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:

npm

npm install @cookbookdev/docsbot

yarn

yarn add @cookbookdev/docsbot

pnpm

pnpm install @cookbookdev/docsbot

Usage

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

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 [e-mail] 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:

// 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>
  );
}

Having trouble with the integration? Contact us at [e-mail] for help.