Add AI Search to your VuePress docs

What is VuePress

VuePress a markdown-centered static site generator.

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

Load the script files

Navigate to the .vuepress directory
Add the below scripts to the config.js file:

config.js

export default {
  head: [
    [
      "script",
      {
        src: "https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js",
        type: "module",
        defer: true,
        onLoad: "initializeInkeep()",
      },
    ],
    ["script", { src: "js/addInkeep.js", type: "module", defer: true }],
  ],
};

Create the addInkeep.js script

Create an addInkeep.js file in your public/js folder.

touch public/js/addInkeep.js

Create container for search bar

To create a container for the search bar component, navigate to your desired page and add the following code:

<ClientOnly>
  <div id="inkeepSearchBar"></div>
</ClientOnly>

Configure the component

Next, configure the Inkeep widget:

addInkeep.js

const initializeInkeep = () => {
  const addInkeepWidget = () => {
    const searchContainer = document.querySelector("#inkeepSearchBar");
 
    if (!searchContainer) return;
 
    const inkeepWiddget = Inkeep().embed({
      componentType: "SearchBar",
      targetElement: "#inkeepSearchBar",
      colorModeSync: {
        observedElement: document.documentElement,
        isDarkModeCallback: (el) => {
          const currentTheme = el.getAttribute("data-md-color-scheme");
          return currentTheme === "dracula" || currentTheme === "dark";
        },
        colorModeAttribute: "data-md-color-scheme",
      },
      properties: {
        baseSettings: {
          apiKey: "INKEEP_API_KEY", // required
          integrationId: "INKEEP_INTEGRATION_ID", // required
          organizationId: "INKEEP_ORGANIZATION_ID", // required
          primaryBrandColor: "#26D6FF",
          organizationDisplayName: "Inkeep",
        },
      },
    });
  };
 
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", addInkeepWidget);
 
    return;
  }
 
  addInkeepWidget();
};

For a full list of customizations, check out the Search Bar documentation.