{"id":16643,"date":"2024-12-09T15:10:12","date_gmt":"2024-12-09T23:10:12","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=16643"},"modified":"2025-06-13T16:36:27","modified_gmt":"2025-06-13T23:36:27","slug":"vector-search-chrome-extension-content-quality","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/vector-search-chrome-extension-content-quality\/","title":{"rendered":"Cracking the Code on Quality Control with Vector Search"},"content":{"rendered":"

There is a good chance you encounter vector search regularly, even if you are not building applications with it. Discovering content recommendations based on previous liked content is a common use case of vector embeddings, and one that many of us utilize as consumers of media. Yet, you may not realize vector search can do a lot more than tell us what new movie to watch on a Saturday evening. Before you scroll down to the comments section on your favorite blog post, find out how vector search can help you decide if it\u2019s worth your time.<\/span><\/p>\n

Everyday applications of vector search<\/h2>\n

First, let\u2019s take just a moment to remind ourselves what we are talking about when we talk about vector search. A vector embedding is a list of numbers that capture the semantic and contextual meaning of a given set of data, whether that be text, video, images or audio. This is possible using embedding models that are trained on human language and vast amounts of information. When we talk about vector search, we are talking about searching those vector embeddings to arrive at relevant results and other use cases.<\/span><\/p>\n

Great, now that we have a shared understanding of what we are discussing, let\u2019s dive into the actual topic at hand, because vector embeddings can do so much more for us than just show us the next great baking show we\u2019re going to want to watch.<\/span><\/p>\n

Vector search can with great certainty give us a glimpse into the quality of content before we even begin reading it.<\/span><\/p>\n

Practical example: analyzing blog comments<\/h2>\n

We all have experienced comment sections on articles that have run amok. The comments have little to do with each other, are not connected to the article they are supposedly responding to, and are filled with spam posts about get rich quick schemes or other similar scams. However, sometimes, comment sections can be helpful. Comments can often carry a conversation forward past the original article with readers adding their own knowledge and viewpoints. There are many technical blog posts I have read where commenters offered more up-to-date solutions since the original article had been posted and saved me valuable time when researching how to fix a bug or work with a given library.<\/span><\/p>\n

How do we know when a comment section falls in the first category and should be avoided, or when it falls into the latter category and we should check it out?<\/span><\/p>\n

Converting the comments section of a blog post into vector embeddings and then scoring the contextual and semantic similarity of the comments against each other can give us a lot of insight into answering that question.\u00a0<\/span><\/p>\n

Wondering, though, how you might be able to give that a try? I built a Chrome extension just for you! This extension will give you the opportunity to experience the usefulness of vector search way beyond content recommendations and into quality control. <\/span><\/p>\n

While the extension works for blog comments, this idea goes even further than quality control of blog posts. How about fraud detection? Revolut, one of Europe\u2019s biggest banks, is doing exactly that<\/a> for their credit card customers every single day.<\/span><\/p>\n

Building the Chrome extension<\/span><\/h2>\n

Want to give it a spin? Here\u2019s a step-by-step guide in running this Chrome extension to see how vector search can determine the overall quality of blog post comments before you ever scroll down the page.<\/span><\/p>\n

As a note of disclaimer, this extension requires technical know-how to use as it\u2019s not built for mass production. Namely, having some familiarity with working with GitHub and the command line will be very useful. You do not need to write any code. It is all written for you.<\/span><\/p>\n

The extension comes in two parts: the extension itself and a backend web server that processes the data. You need the server running to get results, so let\u2019s get working on both.<\/span><\/p>\n

Setting up the backend server<\/h3>\n

Navigate to this GitHub repository<\/a><\/span> in your web browser and clone the repository to your computer. If you have the <\/span>GitHub CLI<\/span><\/a> you can run the following from your command line:<\/span><\/p>\n

gh repo clone hummusonrails\/comments-spam-analyzer-backend<\/code><\/span>
\n<\/span><\/p>\n

Once you have the contents, go to the directory in your terminal and rename the sample environment variables file from <\/span>.env.sample<\/code><\/span> to <\/span>.env<\/code><\/span>. The file will hold your confidential credentials for both OpenAI and Couchbase, so make sure not to share that file on any public website like GitHub.<\/span><\/p>\n

    \n
  1. \n
      \n
    1. Go get your <\/span>OpenAI API ke<\/span><\/a>y from the OpenAI portal and add it to the environment file.\u00a0<\/span><\/li>\n
    2. Create a <\/span>new cluster<\/span><\/a> and <\/span>bucket<\/span><\/a> in Couchbase Capella, the fully managed database as a service platform. Capella offers a free forever account option, which is perfect to use for this extension. Add the cluster and bucket names to your environment file.<\/span><\/li>\n
    3. Grab your Couchbase Capella connection credentials if you have not created them yet, or <\/span>create new credentials<\/span><\/a> from the UI. Add the connection credentials to your environment file.<\/span><\/li>\n
    4. Fetch your <\/span>Couchbase Capella connection string<\/span><\/a>. Add the connection string to your environment file.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      With your environment file defined, install the server\u2019s dependencies by running <\/span>npm install<\/span> from the command line, and then start the server by running <\/span>npm start<\/span>.<\/span><\/p>\n

      Your backend server is now up and running and ready to begin processing comments data, converting the comments into vector embeddings and providing you with a quality percentage score.<\/span><\/p>\n

      Install and using the browser extension<\/h3>\n

      Last, but certainly not least, let\u2019s get the browser extension up and running.<\/span><\/p>\n

      Like the previous step, first navigate to this GitHub repo<\/a><\/span> and clone the repository. If you have the GitHub CLI you can run the following command from your terminal as well:<\/span><\/p>\n

      gh repo clone hummusonrails\/comments-spam-analyzer<\/code><\/span><\/p>\n

      From the directory of the project, install the dependencies by running <\/span>npm install<\/span> and then <\/span>npm build<\/span> to build the extension. Your extension is now ready to be added to your web browser.<\/span><\/p>\n

      Inside Chrome navigate to chrome:\/\/extensions<\/code><\/a> and toggle on Developer Mode<\/em>. Click the Load Unpacked<\/em>\u00a0button, which will appear once you have enabled developer mode and select the directory of the extension in your file system.\u00a0<\/span><\/p>\n

      The extension has been built to work with any blog post on the popular developer blog, <\/span>https:\/\/dev.to\/<\/span><\/a>. All you need to do is open a blog post from the site and then open the extension by clicking on the Extensions tab in your browser menu and choosing the Comment Quality Analyzer<\/em>\u00a0extension you just loaded.<\/span><\/p>\n

      The first time you run the extension it will ask you the URL of your backend server. Since you are running it locally, enter <\/span>https:\/\/localhost:3000<\/span><\/a> and press submit. Then, you can click Analyze and wait a few seconds for the results to be processed. Once processed you will see a percentage score of the quality of the comments on that blog post as determined by their semantic and contextual similarity. The idea being the more contextually and semantically similar comments are to each other, the more on topic the comments are to the topic at hand.<\/span><\/p>\n

      Play the following video see it in action:<\/p>\n

      \n
      \nhttps:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2024\/12\/devto_comment_analyzer_720.mp4<\/a><\/video><\/div>\n<\/div>\n

      Real-world applications and beyond<\/h2>\n

      This Chrome extension is just the tip of the iceberg of what you can accomplish and build with vector search! Want to learn more and get inspired on how you can build innovative use cases with vector search? Check out these articles for further reading:<\/span><\/p>\n