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.
- Specify a URL for where this integration will be used.
- For production API keys, leave Enforce referrer URL checked.
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
For local or staging API keys, see here.
Install the Inkeep plugin
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
.
Configure the widget in the plugin options
Docusaurus plugins can accept a tuple of [pluginName, options]
.
In this case, the plugin name is @inkeep/cxkit-docusaurus
.
So use like this:
Configure the widget in standalone config
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.
You can customize the path to the config file in the plugin options:
We also export a fully typed defineConfig
function that you can use to create your config:
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.
FAQ
We support docusaurus versions 2.0.1
and above.
Our plugin swizzles the SearchBar
component. If you have a plugin that
also swizzles the SearchBar
component, you need to ensure that plugin comes after our plugin in your docusaurus.config.js
file.
This way, your custom SearchBar
will override our default one.
To add custom styles to the Inkeep widget in your Docusaurus site, first create a CSS file in your static
directory (e.g. static/inkeep-overrides.css
). Then specify the URL of the stylesheet in the styles
array within the theme
object (inside of baseSettings
).
For example, if you created a file at static/inkeep-overrides.css
, you should set the styles
array to:
For additional details on how Docusaurus manages static assets, please refer to the official documentation.
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 modal 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:
- 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: