Add Search Bar to Docusaurus

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

Аdd the search bar as a plugin in your docusaurus.config.js file:

docusaurus.config.js

plugins: ["@inkeep/cxkit-docusaurus"],

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:

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

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

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

So use like this:

Note

You will need to replace REPLACE_WITH_YOUR_INKEEP_API_KEY with your actual Inkeep API key in the code below.

docusaurus.config.js

plugins: [
  ["@inkeep/cxkit-docusaurus", {
    SearchBar: {
      baseSettings: {
        // see https://docusaurus.io/docs/deployment#using-environment-variables to use docusaurus environment variables
        apiKey: "REPLACE_WITH_YOUR_INKEEP_API_KEY", // required - replace with your own API key
        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?",
        ],
      },
    }
  }],
],

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
  },
};

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");
 
defineConfig({
  SearchBar: {
    // ...options
  },
});

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

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.

Add Search Bar to Docusaurus

What is Docusaurus

Get an API key

Install the Inkeep plugin

Define the widget

Сonfiguration settings

Configure the widget in the plugin `options`

Configure the widget in standalone `config`

FAQ

On this page