Skip to main content
Version: Stable (v5.x)

React package

@docsearch/react exports separate components for keyword search and Ask AI. Choose the component that matches your application.

Before you start​

Collect your Algolia application ID, Search API key, and index name. To add Ask AI, create an assistant in Agent Studio and copy its assistant ID.

Install the packages​

npm install @docsearch/react@^5.0.0-beta @docsearch/css@^5.0.0-beta

The package supports React and React DOM versions from 16.8 through 19.

Render DocSearch when your site only needs keyword results:

Search.jsx
import { DocSearch } from '@docsearch/react';

import '@docsearch/css';

export function Search() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      apiKey="YOUR_SEARCH_API_KEY"
      indices={['YOUR_INDEX_NAME']}
    />
  );
}

DocSearch doesn't include the Ask AI experience.

Add keyword search and Ask AI​

Render DocSearchAI and pass the Agent Studio assistant:

Search.jsx
import { DocSearchAI } from '@docsearch/react';

import '@docsearch/css';

export function Search() {
  return (
    <DocSearchAI
      appId="YOUR_APP_ID"
      apiKey="YOUR_SEARCH_API_KEY"
      indices={['YOUR_INDEX_NAME']}
      askAi={{
        assistantId: 'YOUR_ASSISTANT_ID',
      }}
    />
  );
}

askAi also accepts the assistant ID as a string. Use the object form for Agent Studio search parameters, dynamic indices, tools, memory, and prompt suggestions.

Control DocSearch with a ref​

Both components forward a DocSearchRef:

Search.tsx
import { useRef } from 'react';
import { DocSearchAI, type DocSearchRef } from '@docsearch/react';

export function Search() {
  const searchRef = useRef<DocSearchRef>(null);

  return (
    <>
      <button
        type="button"
        onClick={() =>
          searchRef.current?.openAskAi({
            query: 'How do I configure search?',
          })
        }
      >
        Ask about setup
      </button>
      <DocSearchAI
        ref={searchRef}
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        indices={['YOUR_INDEX_NAME']}
        askAi="YOUR_ASSISTANT_ID"
      />
    </>
  );
}

Use open() and close() for keyword search. Sidepanel methods become useful when you register a Sidepanel through hybrid mode.

Next steps​