Inkeep light logo
Chat with usSee it for my content
IntegrationsDocusaurus

Add AI Search to your Docusaurus docs

What is Docusaurus

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

Get an API key

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. Click the Example < /> button to get your API key and view suggested settings

Install the Inkeep plugin

npm install @inkeep/docusaurus
bun add @inkeep/docusaurus
pnpm add @inkeep/docusaurus
yarn add @inkeep/docusaurus

Define the widget

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

docusaurus.config.js
themes: ["@inkeep/docusaurus/searchBar"],
Note
Note

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:

docusaurus.config.js
  //..
  themeConfig: {
    inkeepConfig: {
      baseSettings: {
        // see https://docusaurus.io/docs/deployment#using-environment-variables to use docusaurus environment variables
        apiKey: "INKEEP_API_KEY", // required
        integrationId: "INKEEP_INTEGRATION_ID", // required
        organizationId: "INKEEP_ORGANIZATION_ID", // required
        primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        theme: {
          // stylesheetUrls: ['/path/to/stylesheets'], // optional
          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.

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.

We support docusaurus versions 2.0.1 and above.

To load a custom stylesheet for the widgets, start by creating a stylesheet within the static directory. For instance, you might name this file inkeep-overrides.css. You'll then need to specify the URL of the stylesheet in the stylesheetUrls prop of inkeepConfig (inside of baseSettings -> theme).

As an example, if your site is configured with baseUrl: '/', and you have the CSS file located at /static/inkeep-overrides.css, you should set the stylesheetUrls to ['/inkeep-overrides.css'].

For additional details on how Docusaurus manages static assets, please refer to the official documentation.

docusaurus.config.js
//..
themeConfig: {
  inkeepConfig: {
    // ... rest of your settings
    baseSettings: {
      // ... rest of your baseSettings
      theme: {
        stylesheetUrls: ['/inkeep-overrides.css'],
      },
    },
  },
},

If you need more control or customizations, you can use the React components directly. To do so, follow the react guides: chat button, search bar, embedded chat, custom trigger.

A few things to keep in mind:

  • If using Docusaurus 3.4.0 you will need to load the inkeep widget component dynamically and wrap it in a <BrowserOnly> tag. For example:
import React, { useEffect, useState } from "react";
import BrowserOnly from "@docusaurus/BrowserOnly";
 
export default function CustomTrigger() {
  const [isOpen, setIsOpen] = useState(false);
  const [CustomTrigger, setCustomTrigger] = useState(null);
 
  useEffect(() => {
    (async () => {
      const { InkeepCustomTrigger } = await import("@inkeep/uikit");
      setCustomTrigger(() => InkeepCustomTrigger);
    })();
  }, []);
 
  const inkeepCustomTriggerProps = {
    baseSettings: {
      apiKey: "INKEEP_API_KEY", // required
      integrationId: "INKEEP_INTEGRATION_ID", // required
      organizationId: "INKEEP_ORGANIZATION_ID", // required
      primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
      organizationDisplayName: "Inkeep",
    },
    isOpen,
    onClose: () => {
      setIsOpen(false);
    },
    onOpen: () => {
      setIsOpen(true);
    },
  };
 
  return (
    <>
      <button
        type="button"
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Ask AI
      </button>
      <BrowserOnly fallback={<div />}>
        {() => {
          return (
            CustomTrigger && <CustomTrigger {...inkeepCustomTriggerProps} />
          );
        }}
      </BrowserOnly>
    </>
  );
}
  • If using the ChatButton component, you can create a Footer.js in the themes directory then import the original Footer component and add the Chat Button so that it will be present on each page. For example:
import Footer from "@theme-original/Footer";
import React, { useEffect, useState } from "react";
import BrowserOnly from "@docusaurus/BrowserOnly";
 
export default function FooterWrapper(props) {
  const [ChatButton, setChatButton] = useState(null);
 
  useEffect(() => {
    (async () => {
      const { InkeepChatButton } = await import("@inkeep/uikit");
      setChatButton(() => InkeepChatButton);
    })();
  }, []);
 
  const InkeepChatButtonProps = {
    baseSettings: {
      apiKey: "INKEEP_API_KEY", // required
      integrationId: "INKEEP_INTEGRATION_ID", // required
      organizationId: "INKEEP_ORGANIZATION_ID", // required
      primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
      organizationDisplayName: "Inkeep",
    },
  };
 
  return (
    <>
      <BrowserOnly fallback={<div />}>
        {() => {
          return ChatButton && <ChatButton {...InkeepChatButtonProps} />;
        }}
      </BrowserOnly>
      <Footer {...props} />
    </>
  );
}
Add AI Chat to your Docusaurus docsAdd AI Search & Chat to your Docusaurus docs

On this page