JS package API reference
docsearch(options)
Renders DocSearch in options.container and returns a DocSearchInstance.
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;
}
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.
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 ''.
navigator
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:
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
hitComponentreceives{ hit, children }.resultsFooterComponentreceives{ state }.footerActioncurrently 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({
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.
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.
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.
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.
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.
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.
indexNameand rootsearchParametersremain supported but are deprecated. Move toindices.- The default entry uses Agent Studio. The v4 Ask AI transport and
askAi.agentStudioswitch aren't available. - The keyword-only
/docsearchexport is the smaller choice when you don't configure Ask AI.