VitePress
Add AI Search to your VitePress docs
What is VitePress
VitePress is a lightweight static site generator based on Vue.
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
Copy and add the apiKey
, integrationId
and organizationId
to your environment variables:
.env
VITE_INKEEP_API_KEY="INKEEP_API_KEY"
VITE_INKEEP_INTEGRATION_ID="INKEEP_INTEGRATION_ID"
VITE_INKEEP_ORGANIZATION_ID="INKEEP_ORGANIZATION_ID"
Load the script files
Add the below scripts to the config.ts
file:
config.ts
export default {
head: [
[
"script",
{
src: "https://unpkg.com/@inkeep/uikit-js@0.3.13/dist/embed.js",
type: "module",
defer: true,
},
],
["script", { src: "static/addInkeep.js", type: "module", defer: true }],
],
};
Create the addInkeep.js script
Create an addInkeep.js
file in your static
folder.
touch static/addInkeep.js
Now, create a container and configure the search bar component.
Configure the component
Next, embed the widget using the Inkeep.embed()
function.
This will replace the default search bar used on the website.
addInkeep.js
// Embed the widget using the `Inkeep.embed()` function.
const config = {
componentType: "SearchBar",
targetElement: document.querySelector(".search"),
// optional -- for syncing UI color mode
colorModeSync: {
observedElement: document.documentElement,
isDarkModeCallback: (el) => {
return el.classList.contains("dark");
},
colorModeAttribute: "class",
},
properties: {
baseSettings: {
apiKey: import.meta.env.VITE_INKEEP_API_KEY, // required
integrationId: import.meta.env.VITE_INKEEP_INTEGRATION_ID, // required
organizationId: import.meta.env.VITE_INKEEP_ORGANIZATION_ID, // required
primaryBrandColor: "#26D6FF", // your brand color, the widget color scheme is derived from this
organizationDisplayName: "Inkeep",
// ...optional settings
theme: {
// stylesheetUrls: ['/path/to/stylesheets'], // optional
// ...optional settings
},
},
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?",
],
},
},
};
const inkeepWidget = Inkeep().embed(config);
For a full list of customizations, check out the Search Bar documentation.