What is Docusaurus

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

For Docusaurus you can add the Inkeep Search widget using the @inkeep/docusaurus npm package.

Install the Inkeep plugin

  • npm

  • bun

  • pnpm

  • yarn

npm install @inkeep/docusaurus

Define the widget

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

themes: ["@inkeep/docusaurus/searchBar"],

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

Сonfiguration settings

Next, add the below to the themeConfig property:

  themeConfig: {
    inkeepConfig: {
      stylesheetUrls: ['/path/to/stylesheets'], // optional 
      baseSettings: {
        apiKey: "YOUR_API_KEY", // required
        integrationId: "YOUR_INTEGRATION_ID", // required
        organizationId: "YOUR_ORGANIZATION_ID", // required
        primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        theme: {
          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
        botAvatarSrcUrl: "/img/logo.svg", // optional -- use your own bot avatar
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",

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

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.