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
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 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
Define the widget
Аdd the chat button as a theme in your docusaurus.config.js file:
themes: ["@inkeep/docusaurus/chatButton"],
Сonfiguration settings
Next, configure the widget in the themeConfig property:
//..
themeConfig: {
inkeepConfig: {
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",
// ...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.
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.jsin thethemesdirectory 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} />
</>
);
}