Add Inkeep's UI components to your Fumadocs

What is Fumadocs

Fumadocs is an open source documentation framework, powered by Next.js App Router.

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

Create an inkeep-script.tsx client component in your Fumadocs project.

inkeep-script.tsx

"use client";
 
declare global {
  interface Window {
    Inkeep: any;
  }
}
 
import Script from "next/script";
 
export function InkeepScript() {
  return (
    <Script
      id="inkeep-script"
      src="https://unpkg.com/@inkeep/uikit-js@0.3.14/dist/embed.js"
      type="module"
      strategy="afterInteractive"
      onReady={() => {
        window.Inkeep().embed({
          componentType: "ChatButton",
          colorModeSync: {
            observedElement: document.documentElement,
            isDarkModeCallback: (el) => {
              return el.classList.contains("dark");
            },
            colorModeAttribute: "class",
          },
          properties: {
            chatButtonType: "PILL",
            baseSettings: {
              apiKey: "INKEEP_API_KEY", // required
              integrationId: "INKEEP_INTEGRATION_ID", // required
              organizationId: "INKEEP_ORGANIZATION_ID", // required
              primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
              organizationDisplayName: "Inkeep",
              // ...optional settings
            },
            modalSettings: {
              // optional settings
            },
            searchSettings: {
              // optional settings
            },
            aiChatSettings: {
              // optional settings
              botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
              quickQuestions: [
                "Example question 1?",
                "Example question 2?",
                "Example question 3?",
              ],
            },
          },
        });
      }}
    />
  );
}

Then import it in the <body /> of your root layout.tsx file.

layout.tsx

import { InkeepScript } from "@/app/inkeep-script";
import { SearchBar } from "@/app/SearchBar";
import { RootProvider } from "fumadocs-ui/provider";
import "fumadocs-ui/style.css";
import { Inter } from "next/font/google";
import Script from "next/script";
import type { ReactNode } from "react";
 
const inter = Inter({
  subsets: ["latin"],
});
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
      <body
        style={{
          display: "flex",
          flexDirection: "column",
          minHeight: "100vh",
        }}
      >
        <InkeepScript /> // [!code highlight]
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

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

Add Inkeep's UI components to your Fumadocs

What is Fumadocs

Get an API key

Initialize the widget

On this page