What is Nextra

Nextra is a framework for creating content-focused websites using Next.js and markdown.

Install the component library

  • npm

  • bun

  • pnpm

  • yarn

npm install @inkeep/widgets

Customize your settings

Create a useInkeepSettings.ts file that will contain a hook that will return the configuration for Inkeep component(s).

import { useTheme } from "nextra-theme-docs";

const useInkeepSettings = () => {
  const { resolvedTheme } = useTheme();

  const baseSettings = {
    apiKey: "YOUR_API_KEY",
    integrationId: "YOUR_INTEGRATION_ID",
    organizationId: "YOUR_ORGANIZATION_ID",
    primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
    theme: {
      colorMode: {
        forcedColorMode: resolvedTheme, // to sync dark mode with the widget
      },
    },
  };

  const modalSettings = {
    // optional settings
  };

  const searchSettings = {
    // optional settings
  };

  const aiChatSettings = {
    // optional settings
    botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  };

  return { baseSettings, aiChatSettings, searchSettings, modalSettings };
};

export default useInkeepSettings;

Define the component

Next, create an InkeepSearchBar.tsx file for our Search Bar component.

import { useEffect, useState } from "react";
import useInkeepSettings from "../utils/useInkeepSettings";

export default function InkeepSearchBar() {
  const [SearchBar, setSearchBar] = useState(null);

  const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
    useInkeepSettings();

  // load the library asynchronously
  useEffect(() => {
    const loadSearchBar = async () => {
      try {
        const { InkeepSearchBar } = await import("@inkeep/widgets");
        setSearchBar(() => InkeepSearchBar);
      } catch (error) {
        console.error("Failed to load SearchBar:", error);
      }
    };

    loadSearchBar();
  }, []);

  const searchBarProps = {
    stylesheetUrls: ['/path/to/stylesheets'], // optional
    baseSettings,
    aiChatSettings,
    searchSettings,
    modalSettings,
  };

  return SearchBar && <SearchBar {...searchBarProps} />;
}

To add a widget to the page, paste the code shown below into the theme.config.tsx file:

theme.config.tsx
//...
search: {
  component: () => <InkeepSearchBar />
}
Search bar will be replaced by this widget by default

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

FAQ