Add AI to Nextra
Integrate the Kapa Website 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:
- Ensure you have a Kapa project set up with your knowledge sources added
- 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>
);
}