# Ask AI chatbot widget for Fumadocs
> For the complete documentation index, see [llms.txt](/llms.txt)
> Add an AI chatbot or AI search widget to your Fumadocs site with this step-by-step guide.
Add an [AI chatbot](https://biel.ai) or [AI search widget](https://biel.ai/ai-search-for-docs) to your Fumadocs site using Biel.ai's React components.
## Prerequisites
- A **Biel.ai account**. If you don't have one, [sign up for free](https://app.biel.ai/accounts/signup/).
- **A project created in your Biel.ai dashboard**. Follow the [Quickstart guide](https://docs.biel.ai/quickstart.md) to create one.
- **A Fumadocs site** ready to install Biel.ai.
- **Node.js** installed.
## Add the chatbot widget
1. Install Biel.ai for React:
```console
npm install biel-react
```
2. Open your root layout file (typically `app/layout.tsx`) and add the Biel.ai imports and button component:
```tsx
const inter = Inter({ subsets: ['latin'],});
if (typeof window !== 'undefined') { defineCustomElements(window);}
export default function Layout({ children }: { children: ReactNode }) { return (
{children}
Ask AI
);}
```
Replace `` with your project's ID from the [Biel.ai dashboard](https://docs.biel.ai/quickstart.md#2-create-a-project).
3. Start your Fumadocs project by running `npm run dev` and verify that the chatbot appears and functions correctly on your site.
## Next steps
- [Customize](https://docs.biel.ai/customization.md) the widget's appearance, behavior, and tone.
- [Connect integrations](https://docs.biel.ai/integrations.md) like GitHub Actions, MCP, or Zapier.