Application Development

January 18 , 2024 by Deryk DeGuzman & CJ Cenizal

Vectara semantic search in your React apps

Our users love the speed and quality of our semantic search, even when they’re not using it to ground LLM-generated responses in their retrieval-augmented generation (RAG) applications. Our simple APIs already make it easy to incorporate Vectara semantic search into your apps, but we wanted to make it even easier.

Introducing the open-source React-Search component. Use this component to add a Vectara-powered search UI to your React apps with just a few lines of code!

If you’re new to Vectara, you’ll need to sign up for a free account to use React-Search.

Please note that at this time, this is an open-source project intended as a technology demonstration of how to use Vectara in React.

Polished user interface

With minimal configuration, you can have a search UI running in your app that’s identical to Vectara Docs search. We built this UI to be usable on mobile devices and on larger screens.

User experience designed for ease-of-use

We optimized the user experience for simplicity and usability. Once you plug React-Search into your app, your users will be able to click the search input or use the Ctrl + K keyboard shortcut to open up the search modal. When they execute a search, Vectara returns the results that are the closest semantic matches to the user’s query.

The search results show up as a scrollable list. Each result gives the user both the title of the result as well as the full sentence that contains the matching text, so the user can get a better sense of the content represented by the result before clicking on it.

Straightforward developer experience

Adding this component to your codebase is as simple as adding the @vectara/react-search NPM dependency and then configuring the component with corpus ID, custom ID, and API key.

import { ReactSearch } from "@vectara/react-search";

const MyApp = () => (
  <div>
    <ReactSearch
      corpusId="CORPUS_ID"
      customerId="CUSTOMER_ID"
      apiKey="API_KEY"
      placeholder="Search for anything"
    />
  </div>
);

Roadmap

We’re releasing this early so we can gather early feedback from folks who try it out. We expect to rapidly iterate towards the first major version. We’ll incorporate feedback along the way..

Our next milestone will be to release a “useSearch” React hook. This will enable complete customizability over how the search results show up in the UI, while still providing a straightforward integration between your application code and Vectara semantic search.

Here are some of the other features we’re working on:

• Customization of the search result presentation and onClick behavior.
• Theme customization.
• Inline layout option.
• Search across multiple corpora.

Tell us what you think

If you have suggestions on how we can improve this or if you find a bug, please let us know at the React-Search GitHub repo. This project is open-source, so you’re also welcome to fork the code and submit upstream changes.

Try out the React-Search NPM package in your app and tell us what you think. Looking forward to hearing from you!