Add AI Search to your MkDocs docs

extra_javascript:
  - search-bar.js
plugins: []

document.addEventListener("DOMContentLoaded", () => {
  // Create a new div for the Inkeep search bar
  const inkeepDiv = document.createElement("div");
  inkeepDiv.id = "inkeepSearchBar";

  // Get the header element where you want to place the Inkeep search bar
  const headerElement = document.querySelector(".navbar-nav");
  if (headerElement) {
    headerElement.parentNode.insertBefore(inkeepDiv, headerElement.nextSibling);
  }

  // Load the Inkeep script
  const inkeepScript = document.createElement("script");
  inkeepScript.src = "https://unpkg.com/@inkeep/uikit-js@0.3.18/dist/embed.js";
  inkeepScript.type = "module";
  inkeepScript.defer = true;
  document.head.appendChild(inkeepScript);

  // Initialize the Inkeep widget after the script loads
  inkeepScript.addEventListener("load", () => {
    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",
        },
      },
    });
  });
});