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

JS package API reference

docsearch(options)

Renders DocSearch in options.container and returns a DocSearchInstance.

load-docsearch.ts
import docsearch from '@docsearch/js';

const instance = docsearch(options);

The default export from @docsearch/js is AI-capable and uses DocSearchAI. The default export from @docsearch/js/docsearch is keyword-only and uses DocSearch.

JavaScript options

container

type: HTMLElement | string | required

Container element or CSS selector for the search button. A selector resolves against environment.document and must match an element.

environment

type: typeof window | optional

Browser-like environment used to resolve a string container. Defaults to window.

onReady

type: () => void | optional

Callback after DocSearch mounts.

onOpen

type: () => void | optional

Callback when the modal opens.

onClose

type: () => void | optional

Callback when the modal closes.

interceptAskAiEvent

type: (initialMessage: InitialAskAiMessage) => boolean | void | optional

Callback before DocSearch starts an Ask AI request. Return true to prevent the modal from toggling or sending the message. Use this option to route the request to another view, such as the Sidepanel.

InitialAskAiMessage contains query and can contain messageId or suggestedQuestionId.

Search options

These options apply to both package entries.

appId

type: string | required

Algolia application ID.

apiKey

type: string | required

Public API key with search permission.

indices

type: Array<string | DocSearchIndex> | optional

Indices used for keyword search, in display order. There's no default, and at least indices or indexName is required.

Use a string for default search parameters or a DocSearchIndex for per-index parameters:

interface DocSearchIndex {
name: string;
searchParameters?: SearchParamsObject;
}
docsearch-options.js
indices: [
{
name: 'docs_en',
searchParameters: {
facetFilters: ['version:v5'],
attributesToRetrieve: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
'type',
'url',
'version',
],
},
},
'docs_fr',
];

If you pass both indexName and indices, DocSearch queries indexName first, then each indices item. indexName and the root searchParameters remain available for v4 compatibility but are deprecated.

indexName

type: string | optional

Deprecated index name. There's no default. Use indices.

facets

type: DocSearchFacet[] | optional

Facet controls populated from the configured indices. Defaults to [].

interface DocSearchFacet {
key: string;
label?: string;
}

DocSearch supports up to five facets. It compares trimmed, lowercase keys to ignore duplicates and empty keys, fetches values from all configured indices, and displays only facets that have values. Selecting a value adds a facetFilters entry to every index query while retaining that index's configured filters.

docsearch-options.js
facets: [
{ key: 'language', label: 'Language' },
{ key: 'version', label: 'Version' },
];

Configure each attribute for faceting in the Algolia index before exposing it here.

theme

type: 'light' | 'dark' | optional

Theme written to document.documentElement.dataset.theme. By default, DocSearch leaves the current theme unchanged.

placeholder

type: string | optional

Search input placeholder. The default is experience-specific.

searchParameters

type: SearchParamsObject | optional

Deprecated search parameters for indexName. There's no default. Put them on an indices item.

maxResultsPerGroup

type: number | optional

Maximum results in each result group. There's no default.

transformItems

type: (items: DocSearchHit[]) => DocSearchHit[] | optional

Function that transforms hits before grouping and rendering. Defaults to the identity function.

hitComponent

type: ({ hit, children }, { html }) => JSX.Element | optional

Template for a result link. Defaults to the built-in hit template. See Templates.

resultsFooterComponent

type: ({ state }, { html }) => JSX.Element | null | optional

Template below the result collections. There's no default. See Templates.

footerAction

type: (_, { html }) => JSX.Element | null | optional

Optional function to render a custom action in the Modal's footer. It will be rendered in line with the Algolia "powered by" logo. See Templates.

transformSearchClient

type: (client) => client | optional

Function that wraps or replaces the Algolia search client. Defaults to the identity function.

disableUserPersonalization

type: boolean | optional

Whether to disable recent searches, favorites, and stored AI conversations. Defaults to false.

initialQuery

type: string | optional

Query placed in the input when the modal opens. Defaults to ''.

type: AutocompleteOptions['navigator'] | optional

Autocomplete navigation implementation. Defaults to the default navigator.

translations

type: DocSearchTranslations | optional

Button and modal text overrides. Defaults to the English strings.

getMissingResultsUrl

type: ({ query }) => string | optional

Function that builds the no-results report URL. There's no default.

insights

type: AutocompleteOptions['insights'] | optional

Algolia Insights integration options. Defaults to false.

portalContainer

type: DocumentFragment | Element | optional

Element that receives the modal portal. Defaults to document.body.

recentSearchesLimit

type: number | optional

Maximum recent searches without favorites. Defaults to 7.

recentSearchesWithFavoritesLimit

type: number | optional

Maximum recent searches when favorites exist. Defaults to 4.

keyboardShortcuts

type: DocSearchModalShortcuts | optional

Whether Ctrl/Cmd+K and / open the modal. Both shortcuts are enabled by default. Escape always closes it.

resultBadgeKey

type: string | optional

Hit property rendered as a result badge. There's no default.

The key supports property paths such as version, hierarchy.lvl1, tags[2], and tags.2. Primitive values render as text. Arrays of primitive values render as a comma-separated list.

Add custom badge data to attributesToRetrieve. Otherwise the property isn't present in the hit:

docsearch-options.js
indices: [
{
name: 'docs',
searchParameters: {
attributesToRetrieve: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
'type',
'url',
'version',
],
},
},
],
resultBadgeKey: 'version',

Set translations.modal.resultsScreen.resultBadgeLabelText to describe the badge to screen-reader users. Its default is Category.

Templates

  • hitComponent receives { hit, children }.
  • resultsFooterComponent receives { state }.
  • footerAction currently does not receive any extra props.

JavaScript templates can return a Preact element, a string, or a component function. The optional second argument provides an html tagged-template helper.

docsearch-options.js
docsearch({
hitComponent({ hit, children }, { html }) {
return html`<a href=${hit.url} data-result-type=${hit.type}>${children}</a>`;
},
resultsFooterComponent({ state }, { html }) {
return html`<p>No results found for query: ${state.query}</p>`;
},
footerAction(_, { html }) {
return html`<a href="https://algolia.com">Our other project</a>`;
},
});

Ask AI options

Ask AI is available from the default @docsearch/js entry. Its askAi option is required by that entry's DocSearchProps type.

askAi

type: string | DocSearchAskAi | required

Assistant ID or Agent Studio configuration. The default entry requires it.

docsearch-options.js
askAi: 'YOUR_ASSISTANT_ID';

Use an object for additional controls.

Follow Get started with Agent Studio to create the assistant and hybrid mode to route AI requests to a Sidepanel.

assistantId

type: string | required

Agent Studio assistant ID.

appId

type: string | optional

Application ID used by Ask AI. Defaults to the root appId.

apiKey

type: string | optional

API key used by Ask AI. Defaults to the root apiKey.

indexName

type: string | optional

Index used by Ask AI. Defaults to the first normalized keyword index.

suggestedQuestions

type: boolean | optional

Whether to show published assistant questions on the new-conversation screen. Defaults to false.

searchParameters

type: AgentStudioSearchParameters | optional

Search parameters keyed by index name. There's no default.

Each value supports filters, attributesToRetrieve, restrictSearchableAttributes, and distinct. This Agent Studio shape doesn't accept facetFilters.

docsearch-options.js
askAi: {
assistantId: 'YOUR_ASSISTANT_ID',
searchParameters: {
docs: {
filters: 'language:en',
attributesToRetrieve: ['title', 'content', 'url'],
distinct: true,
},
},
}

indices

type: string[] | optional

Index names for the Agent Studio search tool on this request. There's no default.

Put descriptions and tool defaults on the agent configuration. Put per-index runtime overrides in searchParameters.

docsearch-options.js
askAi: {
agentId: 'YOUR_ASSISTANT_ID',
indices: ['api_reference', 'docs_markdown'],
searchParameters: {
api_reference: {
filters: 'version:latest',
},
},
}

tools

type: ToolCalls | optional

Custom Agent Studio tool renderers and handlers. Defaults to {}.

ToolCalls maps Agent Studio tool names to ToolDefinition objects. render converts the tool input and output to displayed text. onToolCall handles a client-side tool and must call addToolOutput when it produces a result. translations.callingToolText changes the pending label.

memory

type: Memory | optional

Agent Studio memory display and user token. Memory is disabled by default.

docsearch-options.js
memory: {
enabled: true,
userToken: 'SERVER_GENERATED_JWT_TOKEN',
}

enabled controls whether memory tool calls appear. userToken is the JWT sent in the x-algolia-secure-user-token header.

promptSuggestions

type: PromptSuggestions | optional

Prompt suggestions displayed with keyword results. There's no default.

docsearch-options.js
promptSuggestions: {
indexName: 'docsearch_prompt_suggestions',
hitsPerPage: 3,
}

The index records must contain a prompt attribute. hitsPerPage defaults to 3.

DocSearchInstance

isReady

type: readonly boolean

Whether the instance is mounted.

isOpen

type: readonly boolean

Whether the modal is open.

open

type: () => void

Opens keyword search.

close

type: () => void

Closes the modal.

openAskAi

type: (initialMessage?: InitialAskAiMessage) => void

Opens Ask AI with an optional query. Use with the AI-capable entry.

destroy

type: () => void

Unmounts DocSearch and marks the instance not ready.

Compatibility and deprecations

  • The bundles target ES2017 browsers.
  • indexName and root searchParameters remain supported but are deprecated. Move to indices.
  • The default entry uses Agent Studio. The v4 Ask AI transport and askAi.agentStudio switch aren't available.
  • The keyword-only /docsearch export is the smaller choice when you don't configure Ask AI.