What is Nextra

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

Install the component library

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 InkeepEmbeddedChat.tsx file for the Embedded Chat component.

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

export default function InkeepEmbeddedChat() {
  const [EmbeddedChat, setEmbeddedChat] = useState(null);

  const { baseSettings, aiChatSettings } = useInkeepSettings();

  // load the library asynchronously
  useEffect(() => {
    const loadEmbeddedChat = async () => {
      try {
        const { InkeepEmbeddedChat } = await import("@inkeep/widgets");
        setEmbeddedChat(() => InkeepEmbeddedChat);
      } catch (error) {
        console.error("Failed to load EmbeddedChat:", error);
      }
    };

    loadEmbeddedChat();
  }, []);

  const embeddedChatProps = {
    baseSettings,
    aiChatSettings,
  };

  return EmbeddedChat && <EmbeddedChat {...embeddedChatProps} />;
}

Use the component

Now to add the InkeepEmbeddedChat.tsx component follow these steps:

  1. Create a new page - Ask AI ✨
    touch pages/ask-ai.mdx
  1. Initialize the page in the _meta.json file:
_meta.json
{
  // ...
  "ask-ai": "Ask AI ✨"
  // ...
}
  1. Add a widget to the page:
ask-ai.mdx
# Ask AIimport InkeepEmbeddedChat from "../components/InkeepEmbeddedChat";

<InkeepEmbeddedChat />

For a full list of customizations, check out the Embedded Chat documentation.

FAQ