> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cookbook.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React Integration

> Integrate Ask Cookbook with React applications

Use our React component to integrate Ask Cookbook into your React applications.

## Installation

Install the package using your preferred package manager:

> [tab] npm
>
> ```bash theme={null}
> npm install @cookbookdev/docsbot
> ```

> [tab] yarn
>
> ```bash theme={null}
> yarn add @cookbookdev/docsbot
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm install @cookbookdev/docsbot
> ```

## Usage

Import and add the component to a parent component, such as your app's root or layout:

```jsx theme={null}
import AskCookbook from "@cookbookdev/docsbot";

export default function App() {
  return (
    <>
      <AskCookbook apiKey="YOUR_API_KEY_HERE" />
      {/* Your other components */}
    </>
  );
}
```

## Props

**apiKey** `string` *required*

Your API key for Ask Cookbook. Contact [tyler@cookbook.dev](mailto:tyler@cookbook.dev) to get your key.

**alwaysOpen** `boolean`

If `true`, the modal will be always open (useful for showcase purposes).

**noFastMode** `boolean`

If `true`, disables fast mode switch, forcing the chatbot into detailed mode.

## Next.js example

For Next.js applications, add the component to your root layout:

```jsx theme={null}
// app/layout.js or pages/_app.js
import AskCookbook from "@cookbookdev/docsbot";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AskCookbook apiKey="your-api-key-here" />
        {children}
      </body>
    </html>
  );
}
```

> [!NOTE]
>
> Having trouble with the integration? Contact us at [tyler@cookbook.dev](mailto:tyler@cookbook.dev) for help.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.