Add Search Bar to Redocly API Reference

<script
  src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js"
  type="module"
  defer
></script>
<script src="addInkeep.js" type="module" defer></script>

touch docs/addInkeep.js

// Create an HTML element that the Inkeep widget will be inserted into.
const searchBarParentNode = document.querySelector(".scrollbar-container");
const inkeepDiv = document.createElement("div");
inkeepDiv.id = "inkeep";
searchBarParentNode.prepend(inkeepDiv);
 
let inkeepWidget = null;
const config = {
  baseSettings: {
    apiKey: "INKEEP_API_KEY", // required
    primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
    theme: {
      // optional path to a custom stylesheet
      styles: [
        {
          key: "main",
          type: "link",
          value: "/path/to/stylesheets",
        },
      ],
      // ...optional settings
    },
  },
  modalSettings: {
    // optional settings
  },
  searchSettings: {
    // optional settings
  },
  aiChatSettings: {
    // optional settings
    aiAssistantAvatar: "/img/logo.svg", // use your own AI assistant avatar
    exampleQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  },
};
 
// Wait for container to render
if (!inkeepWidget && targetElement) {
  // Initialize the widget using the Inkeep.SearchBar() function.
  inkeepWidget = Inkeep.SearchBar("#inkeep", config);
}