Inkeep light logo
Schedule a callSee it for my content
IntegrationsDocusaurus

Add AI Search & Chat to your Docusaurus docs

What is Docusaurus

Docusaurus is an open-source documentation platform powered by MDX and React.

Get an API key

Follow these steps to create an API key for your web integration.

Install the Inkeep plugin

npm install @inkeep/cxkit-docusaurus
bun add @inkeep/cxkit-docusaurus
pnpm add @inkeep/cxkit-docusaurus
yarn add @inkeep/cxkit-docusaurus
Note
Note

If you are already using Algolia DocSearch provided by Docusaurus by default, it will be replaced by our widget.

Сonfiguration settings

You have two configuration options:

  1. Configure the widget in the plugin options.
  2. Configure the widget in standalone config.

Configure the widget in the plugin options

Docusaurus plugins can accept a tuple of [pluginName, options].

In this case, the plugin name is @inkeep/cxkit-docusaurus.

So use like this:

docusaurus.config.js
const inkeepConfig = {
  baseSettings: {
    // see https://docusaurus.io/docs/deployment#using-environment-variables to use docusaurus environment variables
    apiKey: "INKEEP_API_KEY", // required
    primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
    theme: {
      // optional path to a custom stylesheet
      styles: [
        {
          key: "main",
          type: "link",
          value: "/path/to/stylesheets",
        },
      ],
      syntaxHighlighter: {
        lightTheme: lightCodeTheme, // optional -- pass in the Prism theme you're using
        darkTheme: darkCodeTheme, // optional -- pass in the Prism theme you're using
      },
    }
  },
  modalSettings: {
    // optional settings
  },
  searchSettings: {
    // optional settings
  },
  aiChatSettings: {
    // optional settings
    aiAssistantAvatar: "/img/logo.svg", // optional -- use your own ai assistant avatar
    exampleQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  },
}
plugins: [
  ["@inkeep/cxkit-docusaurus", {
    SearchBar: {
      ...inkeepConfig,
    },
    ChatButton: {
      ...inkeepConfig,
    },
  }],
],

Configure the widget in standalone config

In this case, the plugin name is @inkeep/cxkit-docusaurus.

What this means is that you create a config file in your project. By default, you can create an inkeep.config.js or inkeep.config.ts file in the root of your project, and inkeep will automatically pick it up.

inkeep.config.js
window.inkeepConfig = {
  SearchBar: {
    // ...options
  },
  ChatButton: {
    // ...options
  },
};

You can customize the path to the config file in the plugin options:

docusaurus.config.js
plugins: [
  ["@inkeep/cxkit-docusaurus", { config: "./path/to/my-inkeep-config.js" }],
],

We also export a fully typed defineConfig function that you can use to create your config:

inkeep.config.js
const { defineConfig } = require("@inkeep/cxkit-docusaurus");
 
module.exports = defineConfig({
  SearchBar: {
    // ...options
  },
  ChatButton: {
    // ...options
  },
});

For a full list of customizations, check out the Common Settings.

Note
Note

If you have already created a custom SearchBar component (for example via swizzle eject) this will need to be removed in order to use our Search Bar.

FAQ

Add AI Search to your Docusaurus docsAdd AI Chat to your GitBook docs

On this page