Skip to main content

Add AI to Docusaurus

Integrate the kapa.ai chat widget into your Docusaurus 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 Docusaurus 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

Add the following script configuration to your docusaurus.config.js file:

const config = {
scripts: [
{
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: true,
},
],
};
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.