Add to your:
- Docs
- Docusaurus
- GitBook
- ReadMe
- Fumadocs
- Next.js
- Nextra
- Mintlify
- VitePress
- VuePress
- Document360
- Sphinx
- Hugo
- Redocly
- MkDocs
- Marketing site
- Help center
- Community
- App
Support Team Tools
- Agent copilot
- Auto reply
- Slack assist
Analytics
UI Components
- Overview
- JS Snippet
- React
- Common Settings
- Customization Guides
- Release notes
AI CHAT API
- Chat Completions
- Question Answer Mode
- Context Mode
Analytics API
- Overview
- conversation
- feedback
- events
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
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
Install the Inkeep plugin
npm install @inkeep/docusaurus
Configure the widget
Аdd the Inkeep widgets as themes in the docusaurus.config.js
file:
themes: ["@inkeep/docusaurus/chatButton", "@inkeep/docusaurus/searchBar"],
Сonfiguration settings
Next, configure the widgets in the themeConfig
property:
//..
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", // 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.
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.
//..
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 thethemes
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} />
</>
);
}