Skip to main content

Add AI to Nextra

Integrate the kapa.ai chat widget into your Nextra documentation to enable users to ask natural language questions about your product, significantly enhancing user experience by providing quick and accurate answers.

Prerequisites​

Before adding the widget to your Nextra site, you'll need to:

  1. Ensure you have a kapa.ai project set up with your knowledge sources added
  2. Follow the general installation instructions to enabled your domain and obtain your Website ID

Installation​

Using Next.js App Router (Nextra 3.0+)​

Add the widget script to your root layout file (app/layout.tsx or app/layout.js):

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://widget.kapa.ai/kapa-widget.bundle.js"
          data-website-id="XXX-XXX-XXX"
          data-project-name="PROJECT_NAME"
          data-project-color="#HEX_COLOR_CODE"
          data-project-logo="https://LINK_TO_LOGO.com/logo.png"
          async
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Using Pages Router​

For Nextra sites using the Pages Router, add the widget script to your pages/_document.tsx or pages/_document.js file:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          src="https://widget.kapa.ai/kapa-widget.bundle.js"
          data-website-id="XXX-XXX-XXX"
          data-project-name="PROJECT_NAME"
          data-project-color="#HEX_COLOR_CODE"
          data-project-logo="https://LINK_TO_LOGO.com/logo.png"
          async
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Using theme.config.jsx​

Alternatively, you can add the widget using Nextra's theme configuration file (theme.config.jsx or theme.config.js):

export default {
  head: (
    <>
      <script
        src="https://widget.kapa.ai/kapa-widget.bundle.js"
        data-website-id="XXX-XXX-XXX"
        data-project-name="PROJECT_NAME"
        data-project-color="#HEX_COLOR_CODE"
        data-project-logo="https://LINK_TO_LOGO.com/logo.png"
        async
      />
    </>
  ),
  // ... other theme configuration
};
Customization Options

To tailor the widget to your brand and specific needs, visit our Configuration page. There, you'll find detailed instructions on how to adjust colors, logos, and other widget properties.

note

Since Nextra is built on top of Next.js, you can use any of the above methods depending on your project's setup and preferences. The theme.config.jsx method is specific to Nextra and might be the most straightforward approach for most documentation sites.