> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/algolia/docsearch/llms.txt
> Use this file to discover all available pages before exploring further.
# DocSearchProps
> Configuration interface for the DocSearch component
# DocSearchProps
The `DocSearchProps` interface defines all configuration options for the DocSearch component. This is the primary interface used to configure search behavior, UI customization, AI features, and user interactions.
## Required Properties
Algolia application ID used by the search client.
Public API key with search permissions for the index. This should be a search-only API key, never your admin API key.
## Index Configuration
Name of the Algolia index to query.
**Deprecated:** `indexName` will be removed in a future version. Please use the `indices` property going forward.
List of indices and optional search parameters to be used for search. This allows querying multiple indices or configuring per-index search parameters.
See the [indices documentation](https://docsearch.algolia.com/docs/api#indices) for more details.
```typescript theme={null}
interface DocSearchIndex {
name: string;
searchParameters?: SearchParamsObject;
}
```
The name of the Algolia index.
Optional Algolia search parameters specific to this index.
```tsx Single Index theme={null}
```
```tsx Multiple Indices theme={null}
```
```tsx Indices with Search Parameters theme={null}
```
Additional Algolia search parameters to merge into each query.
**Deprecated:** `searchParameters` will be removed in a future version. Please use the `indices` property going forward.
## AI Features
Configuration or assistant ID to enable Ask AI mode. Pass a string assistant ID for simple configuration, or a full config object for advanced options.
See [DocSearchAskAi configuration](/api/types/ask-ai-config) for detailed options.
```tsx Simple Configuration theme={null}
```
```tsx Advanced Configuration theme={null}
```
Intercept Ask AI requests (e.g., submitting a prompt or selecting a suggested question).
Return `true` to prevent the default modal Ask AI flow (no toggle, no sendMessage). This is useful to route Ask AI into a different UI (e.g., `@docsearch/sidepanel-js`) without flicker.
```typescript theme={null}
type InitialAskAiMessage = {
query: string;
messageId?: string;
suggestedQuestionId?: string;
};
```
```tsx Example theme={null}
{
// Route to custom sidepanel
openCustomSidepanel(initialMessage.query);
return true; // Prevent default behavior
}}
/>
```
## UI Customization
Theme overrides applied to the modal and related components.
```typescript theme={null}
type DocSearchTheme = 'dark' | 'light';
```
Placeholder text for the search input.
```tsx Example theme={null}
```
Localized strings for the button and modal UI.
```typescript theme={null}
type DocSearchTranslations = Partial<{
button: ButtonTranslations;
modal: ModalTranslations;
}>;
```
```tsx Example theme={null}
```
The container element where the modal should be portaled to. Defaults to `document.body`.
```tsx Example theme={null}
```
Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts.
**Default:** `{ 'Ctrl/Cmd+K': true, '/': true }`
```typescript theme={null}
interface DocSearchModalShortcuts {
'Ctrl/Cmd+K'?: boolean;
'/'?: boolean;
}
```
```tsx Example theme={null}
```
## Search Behavior
Maximum number of hits to display per source/group.
```tsx Example theme={null}
```
Query string to prefill when opening the modal.
```tsx Example theme={null}
```
Builds a URL to report missing results for a given query.
```tsx Example theme={null}
`https://github.com/your-org/docs/issues/new?title=Missing+results+for+${encodeURIComponent(query)}`
}
/>
```
## Custom Components
Hook to post-process hits before rendering. Use this to filter, sort, or modify search results.
See [DocSearchHit type](/api/types/docsearch-hit) for the hit structure.
```tsx Filter Results theme={null}
items.filter(item => item.type !== 'lvl1')
}
/>
```
```tsx Modify URLs theme={null}
items.map(item => ({
...item,
url: item.url.replace('http://', 'https://')
}))
}
/>
```
Custom component to render an individual hit. Supports multiple template patterns:
* HTML strings with html helper: `(props, { html }) => html`
{children}
)}
/>
```
Custom component rendered at the bottom of the results panel. Supports the same template patterns as `hitComponent`.
```typescript theme={null}
{
state: AutocompleteState;
}
```
```tsx Example theme={null}
(
Found {state.collections.reduce((acc, col) => acc + col.items.length, 0)} results
)}
/>
```
## Advanced Configuration
Hook to wrap or modify the Algolia search client. Useful for adding custom middleware, logging, or request modification.
```typescript theme={null}
type DocSearchTransformClient = {
search: LiteClient['search'];
addAlgoliaAgent: LiteClient['addAlgoliaAgent'];
transporter: Pick;
};
```
This is the minimal implementation required for the Algolia search client when using the `transformSearchClient` option.
```tsx Add Custom Headers theme={null}
({
...searchClient,
search(requests) {
// Add custom headers or modify requests
return searchClient.search(requests);
}
})}
/>
```
Custom navigator for controlling link navigation. Use this to integrate with client-side routers or add custom navigation logic.
```tsx Next.js Router theme={null}
import { useRouter } from 'next/router';
function Search() {
const router = useRouter();
return (
);
}
```
Insights client integration options to send analytics events. This allows tracking user interactions with search results.
## User Personalization
Disable storage and usage of recent and favorite searches.
```tsx Example theme={null}
```
Limit of how many recent searches should be saved/displayed.
**Default:** `7`
```tsx Example theme={null}
```
Limit of how many recent searches should be saved/displayed when there are favorited searches.
**Default:** `4`
```tsx Example theme={null}
```
## Complete Example
```tsx Full Configuration theme={null}
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
function MyApp() {
return (
items.map(item => ({
...item,
url: item.url.replace('http://', 'https://')
}))
}
translations={{
button: {
buttonText: 'Search',
buttonAriaLabel: 'Search documentation'
}
}}
getMissingResultsUrl={({ query }) =>
`https://github.com/your-org/docs/issues/new?title=Missing+results+for+${encodeURIComponent(query)}`
}
/>
);
}
```