body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sidebar {
  h5 {
    color: rgb(107 114 128 / var(--tw-text-opacity));
  }
}

header .text-sm.text-primary, #sidebar h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

#table-of-contents {
  li {
    a {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
    }
  }
}

#content-container {
  a {
    h2 {
      margin-bottom: 0.5rem;
    }
    p {
      font-size: 14px;
    }
  }
}


.hello-world {
    background-color: #f0f0f0;
}

"use client";

const integrateWithMyAppWorkflow = {
  id: "ikp_integrate_with_my_app",
  displayName: "Help me integrate with my app",
  goals: [
    "Identify the platform that the user is looking to add Inkeep on. Can be a website-based (e.g. Webflow) or docs platform (e.g. Docusaurus/Nextra/Readme), Slack/Discord bots, or custom via API. Note that these are just examples - not an exhaustive list!",
    "Give instructions for how to add the bot to that platform.",
  ],
  botPersona: "You are an expert solutions engineer",
  informationToCollect: [
    {
      description: "Platform they are integrating Inkeep to.",
      required: true,
    },
  ],
  guidance: [
    "don't mention workflow, assume that the user is not seeing this message context and their input is a direct response to an initial message that says `What platform are you using?`",
    "<only>If **not** detailed in the user's message</only>, <then>ask clarifying questions to understand the underlying platform.</then>",
    "The user's initial message input might be a single word like `Docusaurus` or `Slack`. Assume they intend to say that is their platform, unless clearly not.",
    "If the platform is not detailed in our INFORMATION SOURCES, then ask whether it's a React or JavaScript based platform so you can give the right guidance based on that",
  ],
  initialReplyMessage:
    "Happy to help. \n Where are you looking to add Inkeep to?",
};

const inkeepSettings = {
  baseSettings: {
    apiKey: "ff8db7b1f131b45948013729cbf773e3ca24ee5052d8990d",
    integrationId: "clrfeva74001wgpollwkipc3w",
    organizationId: "inkeep",
    primaryBrandColor: "#26D6FF",
    organizationDisplayName: "Inkeep",
  },
  aiChatSettings: {
    botAvatarSrcUrl:
      "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarSrcUrl-1722892145922.png",
    quickQuestions: [
      "What sources are supported?",
      "Can I add Inkeep as a Slack bot?",
      "Who's in the Inkeep team?",
      "What's included in the analytics?",
    ],
    workflows: [integrateWithMyAppWorkflow],
  },
  modalSettings: {
    // disable default cmd+k behavior, it's handled in this script
    isShortcutKeyEnabled: false,
  },
};

// The Mintlify search triggers, which we'll reuse to Trigger the Inkeep modal
const searchButtonContainerIds = [
  "search-bar-entry",
  "search-bar-entry-mobile",
];

// Clone and replace, needed to remove existing event listeners
const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
  const originalElement = document.getElementById(id);
  const clonedElement = originalElement.cloneNode(true);
  originalElement.parentNode.replaceChild(clonedElement, originalElement);

  return clonedElement;
});

// Load the Inkeep component library
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/uikit-js@latest/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep library is loaded, instantiate the UI components
inkeepScript.addEventListener("load", function () {
  // Customization settings

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // Instantiate the "Ask AI" pill chat button
  Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: inkeepSettings,
  });

  // Instantiate the search bar modal
  const inkeepSearchModal = Inkeep({
    ...inkeepSettings.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...inkeepSettings,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
    },
  });

  // When the Mintlify search bar elements are clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach((trigger) => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });

  // Open the Inkeep Modal with cmd+k
  window.addEventListener(
    "keydown",
    (event) => {
      if (
        (event.metaKey || event.ctrlKey) &&
        (event.key === "k" || event.key === "K")
      ) {
        event.stopPropagation();
        inkeepSearchModal.render({ isOpen: true });
        return false;
      }
    },
    true
  );
});


Example

InkeepModalSettings

Inkeep

See it for my docs

Chat with us

Customize the modal component for Inkeep widgets.

Modal

Learn how to turn your content into an AI search and support copilot with Inkeep.

Getting Started

Showcase

Why Inkeep?

Privacy

Slack

Add an AI chatbot to your Slack workspace

Discord

Add an AI chatbot to your Discord server

Chat Button

Add AI Chat to your Docusaurus docs

Search Bar

Add AI Search to your Docusaurus docs

Chat Button & Search Bar

Add AI Search & Chat to your Docusaurus docs

Add AI Chat to your Next.js app

Add AI Search to your Next.js app

Embedded Chat

Add an Embedded Chat to your Next.js app

Trigger the Inkeep modal with a custom button in your Next.js app.

Custom Trigger

Add a Custom Trigger to your Next.js app

Add AI Chat to your Nextra docs

Add AI Search to your Nextra docs

Add an Embedded AI Chat to your Nextra docs

Add a Custom Trigger to your Nextra docs

Add AI Search & Chat Button to your Nextra docs

Add AI Chat to your ReadMe docs

Add AI Search to your ReadMe docs

Add AI Search & Chat Button to your ReadMe docs

Discourse

Add AI Chat to your Discourse community

Add AI Chat to your Webflow site

Add AI Search to your Webflow site

Add an Embedded AI Chat to your Webflow site

Add a Custom Trigger to your Webflow site

Add AI Chat to your Framer website

Add AI Search to your Framer website

Add AI Chat to your WordPress site

Add AI Search to your WordPress site

Add AI Chat to your Astro app

Add AI search to your Astro app

Add AI Chat to your Gatsby app

Add AI Search to your Gatsby app

Add an Embedded AI Chat to your Gatsby app

Add AI Chat to your Remix app

Add AI Search to your Remix app

Mintlify

Add Inkeep's UI components to your Mintlify docs

Add AI Chat to your VitePress docs

Add AI Search to your VitePress docs

Add AI Chat to your Sphinx docs

Add AI Search to your Sphinx docs

Ananke (Base theme)

Add AI Chat to your Hugo docs

Add a chat button React component that triggers the Inkeep modal.

Chat Button (React)

Add the Inkeep search bar as a React component.

Search Bar (React)

Add a chat UI directly on a dedicated React powered page.

Embedded Chat (React)

Custom Trigger (React)

React 17

Add the Inkeep chat button using a JS snippet.

Chat Button (JS)

Add the Inkeep search bar using a JS snippet.

Search Bar (JS)

Add a chat UI directly on a dedicated page

Embedded Chat (JS)

Custom Trigger (JS)

Review the basic configuration settings for our search and chat experiences.

Base

Customize search-related settings for the Inkeep widgets.

Search

Customize the chat experience for the Inkeep widgets.

AI Chat

Customize the search and chat widgets to match your brand.

Style the components

Use our callback function to log events from the search and chat widgets to your own analytics tool.

Add your own analytics

Use our AI annotations to intelligently show a contact support button and integrate with your support system.

Support Forms

In-App Copilots

Gate search or chat API calls with authentication.

Add user authentication

Sharable chats

Release notes

UI Components Release Notes

Onboarding sources

How content is kept up to date for any source

Updating content

Chat Completions

OpenAI-compatible chat completion endpoints

Vercel AI SDK

Using `inkeep-qa` models with the Vercel AI SDK

OpenAI SDK

Overview

Add analytics to any OpenAI compatible chat

Logs a new conversation or updates an existing one with new messages. Always include all messages.

Property	Type	Description
defaultView	`AI_CHAT` \| `SEARCH`	Default view for the modal. The default is `AI_CHAT` except for the `InkeepSearchBar` component.
isModeSwitchingEnabled	`boolean`	Determines whether switching between search and chat in the modal is enabled. Default `true`.
askAILabel	`string`	Text for the button that switches the modal to AI chat mode and for the `Ask AI "<query>"` card in the search results. Default is `Ask AI`.
switchToSearchMessage	`string`	Text for the button that switches the modal to Search mode. Default is `Search`.
openShortcutKey	`string`	Shortcut key for opening the modal. Default `k` for the `InkeepSearchBar` and `InkeepCustomTrigger`. Default `/` for `InkeepChatButton`.
isShortcutKeyEnabled	`boolean`	Determines whether hotkeys for opening the modal are enabled. Default `true` for the `InkeepSearchBar`, `InkeepCustomTrigger`, and the `RECTANGLE_SHORTCUT` variant of the `InkeepChatButton`.
onShortcutKeyPressed	`() => void`	Callback for when the shortcut key is pressed (only applies to `InkeepCustomTrigger`). Default `undefined`.
isAlignedToTop	`boolean`	Determines whether the modal is aligned to the top. Default `true`.
isAlignedToRight	`boolean`	Determines whether the modal is aligned to the right. Default `false`.

Overview

Add to your workspace

Add to your site

UI Components

Sources

AI API

Analytics API

FAQs

Modal

InkeepModalSettings

Example

Overview

Add to your workspace

Add to your site

UI Components

Sources

AI API

Analytics API

FAQs

​InkeepModalSettings

​Example

InkeepModalSettings

Example