Get started with Agent Studio

DocSearch v5 uses Agent Studio as its only AI backend. The public option is still named askAi, so you can add AI without learning a second DocSearch configuration shape.

Don't add an agentStudio flag. There's no AI backend selector in v5.

If you already have an Ask AI assistant, see Migrate Ask AI to Agent Studio.

Before you begin

1. Create and publish an Agent Studio agent.
2. Copy its agent ID. DocSearch calls this value agentId in its public API.
3. Create a Search API key that can search the indices used by DocSearch and Agent Studio. Don't expose an Admin API key.
4. Note your Algolia application ID and DocSearch index name.

Add DocSearch

React

Install the React package and styles:

npm

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

Yarn

yarn add @docsearch/react@^5 @docsearch/css@^5

pnpm

pnpm add @docsearch/react@^5 @docsearch/css@^5

Bun

bun add @docsearch/react@^5 @docsearch/css@^5

Render DocSearchAI, not the search-only DocSearch component:

Search.tsx

import { DocSearchAI } from '@docsearch/react';
import '@docsearch/css';

export function Search() {
  return (
    <DocSearchAI
      appId="YOUR_APPLICATION_ID"
      apiKey="YOUR_SEARCH_API_KEY"
      indices={['YOUR_DOCSEARCH_INDEX']}
      askAi={{
        agentId: 'YOUR_AGENT_ID',
      }}
    />
  );
}

See the React package reference for all DocSearchAI props and exported types.

JavaScript

Install the JavaScript package and styles:

npm

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

Yarn

yarn add @docsearch/js@^5 @docsearch/css@^5

pnpm

pnpm add @docsearch/js@^5 @docsearch/css@^5

Bun

bun add @docsearch/js@^5 @docsearch/css@^5

Add a container to your page:

index.html

<div id="docsearch"></div>

Initialize DocSearch with your Agent Studio agent:

load-docsearch.js

import docsearch from '@docsearch/js';
import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APPLICATION_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indices: ['YOUR_DOCSEARCH_INDEX'],
  askAi: {
    agentId: 'YOUR_AGENT_ID',
  },
});

See the JavaScript package reference for the complete API.

Configure more Agent Studio features

Use the askAi object to add:

• Dynamic indices
• Client-side and MCP tools
• User-scoped memory
• Suggested prompts and follow-ups
• Response feedback

Use the Docusaurus adapter

The v5 Docusaurus adapter requires themeConfig.docsearch.askAi to be an object with agentId. It rejects the string shorthand and the removed agentStudio property. Keep appId, apiKey, and keyword-search indices at the top level.

See the Docusaurus adapter guide for its full configuration and validation rules.