---
title: Get started with Agent Studio
description: Configure Agent Studio to answer questions from your documentation.
---

import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

DocSearch v5 uses [Agent Studio](https://www.algolia.com/doc/guides/algolia-ai/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](/docs/agent-studio/migrate-to-agent-studio).

## Before you begin

1. [Create and publish an Agent Studio agent](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/quickstart).
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

<Tabs groupId="language" aria-label="Programming language">
  <TabItem value="react" label="React">

Install the React package and styles:

<Tabs groupId="package-manager" aria-label="Package manager">
  <TabItem value="npm" label="npm">

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

  </TabItem>
  <TabItem value="yarn" label="Yarn">

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

  </TabItem>
  <TabItem value="pnpm" label="pnpm">

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

  </TabItem>
  <TabItem value="bun" label="Bun">

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

  </TabItem>
</Tabs>

Render `DocSearchAI`, not the search-only `DocSearch` component:

```tsx title="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](/docs/packages/react/api-reference) for all `DocSearchAI` props and exported types.

  </TabItem>
  <TabItem value="js" label="JavaScript">

Install the JavaScript package and styles:

<Tabs groupId="package-manager" aria-label="Package manager">
  <TabItem value="npm" label="npm">

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

  </TabItem>
  <TabItem value="yarn" label="Yarn">

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

  </TabItem>
  <TabItem value="pnpm" label="pnpm">

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

  </TabItem>
  <TabItem value="bun" label="Bun">

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

  </TabItem>
</Tabs>

Add a container to your page:

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

Initialize DocSearch with your Agent Studio agent:

```js title="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](/docs/packages/js/api-reference) for the complete API.

  </TabItem>
</Tabs>

## Configure more Agent Studio features

Use the `askAi` object to add:

- [Dynamic indices](/docs/agent-studio/dynamic-indices)
- [Client-side and MCP tools](/docs/agent-studio/tools)
- [User-scoped memory](/docs/agent-studio/memory)
- [Suggested prompts and follow-ups](/docs/agent-studio/prompt-suggestions)
- [Response feedback](/docs/agent-studio/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](/docs/packages/docusaurus-adapter/getting-started) for its full configuration and validation rules.