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-1723049339233.svg",
    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 content

Chat with us

Customize the modal component for Inkeep widgets.

Modal

AI for Customers

AI for Support Teams

Why Inkeep?

Privacy

Mintlify

Add Inkeep's UI components to your Mintlify docs

Discord

Add an AI chatbot to your Discord server

Slack

Add an AI chatbot to your Slack workspace or community.

Discourse

Add AI Chat to your Discourse community

Bettermode

Add AI Chat to your Bettermode community

Install Keep, Inkeep's Copilot for Support Agents, to your Zendesk workspace.

Zendesk

Copilot for Support Agents (Zendesk)

Keep, Inkeep's copilot for support agents, can be used with any support platform as a Chrome Extension.

Any platform

Copilot for Support Agents (Any Platform)

Turn tickets into FAQs

Turn closed support tickets into FAQs

Tickets

Auto-reply to support tickets with Inkeep AI

Live chat

Auto-reply to live chat with Inkeep AI

Onboarding sources

How content is kept up to date for any source

Updating content

Use Inkeep's analytics to keep tabs on usage and get actionable reporting.

Reports

Analytics & Reporting

Overview

UI Kit Components

Add the Inkeep chat button using a JS snippet.

Chat Button

Chat Button (JS)

Add the Inkeep search bar using a JS snippet.

Search Bar

Search Bar (JS)

Add a chat UI directly on a dedicated page

Embedded Chat

Embedded Chat (JS)

Custom Trigger

Custom Trigger (JS)

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

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.

Embedded Form

Embedded Support Forms

In-App Copilots

Gate search or chat API calls with authentication.

Add user authentication

Sharable chats

Release notes

UI Components Release Notes

Chat Completions

Chat Completions API

Vercel AI SDK

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

OpenAI SDK

Add analytics to any OpenAI compatible chat

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

**API Key Types:** `WEB`, `API`

Property	Type	Description
defaultView	`AI_CHAT` \| `SEARCH`	Default view for the modal. The default is `AI_CHAT` except for the `InkeepSearchBar` component.
forceInitialDefaultView	`boolean`	Force modal to open to the `defaultView` regardless of which view was last opened. Default `false`.
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:

Support Team Tools

Sources

Analytics

UI Components

AI CHAT API

Analytics API

FAQs

Modal

InkeepModalSettings

Example

Overview

Add to your:

Support Team Tools

Sources

Analytics

UI Components

AI CHAT API

Analytics API

FAQs

​InkeepModalSettings

​Example

InkeepModalSettings

Example