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

JS package

Use @docsearch/js to render DocSearch into an HTML element. The default entry includes keyword search and Ask AI. A separate entry includes keyword search only.

Before you start​

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

Install the packages​

npm install @docsearch/js@^5 @docsearch/css@^5

Add a container where you want the search button:

index.html
<div id="docsearch"></div>

Pass a container element or a selector that matches one. Don't pass an input; DocSearch renders the search button and input.

Add keyword search and Ask AI​

Import the default entry and provide an askAi configuration:

app.js
import docsearch from '@docsearch/js';

import '@docsearch/css';

const search = docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indices: ['YOUR_INDEX_NAME'],
  askAi: {
    assistantId: 'YOUR_ASSISTANT_ID',
  },
});

The default entry bundles both experiences. askAi accepts an assistant ID string or a configuration object. See the JavaScript API reference.

Add keyword search only​

Import the /docsearch entry to exclude Ask AI code:

app.js
import docsearch from '@docsearch/js/docsearch';

import '@docsearch/css';

const search = docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indices: ['YOUR_INDEX_NAME'],
});

Load DocSearch from a CDN​

Load the complete stylesheet and one JavaScript bundle. Both UMD bundles expose window.docsearch.

Keyword search and Ask AI​

index.html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@docsearch/css@^5/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@^5/dist/umd/index.js"></script>
<script>
  window.docsearch({
    container: '#docsearch',
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_SEARCH_API_KEY',
    indices: ['YOUR_INDEX_NAME'],
    askAi: {
      assistantId: 'YOUR_ASSISTANT_ID',
    },
  });
</script>

Keyword search only​

index.html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@docsearch/css@^5/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@^5/dist/umd/docsearch.js"></script>
<script>
  window.docsearch({
    container: '#docsearch',
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_SEARCH_API_KEY',
    indices: ['YOUR_INDEX_NAME'],
  });
</script>

Don't load both UMD bundles on the same page. The second bundle replaces the same window.docsearch global.

Control the instance​

docsearch() returns a DocSearchInstance:

app.js
const search = docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indices: ['YOUR_INDEX_NAME'],
  askAi: 'YOUR_ASSISTANT_ID',
});

search.open();
search.close();
search.openAskAi({ query: 'How do I configure search?' });

// Unmount DocSearch when your application removes this view.
search.destroy();

Use openAskAi() only with the default AI-capable entry.

Next steps​