The chat button is a great way to add an AI copilot to your landing page, documentation, or app without changing your current search experience.

You can choose from three variants to fit your style:

The default is PILL.

​
Quick Start

​
Install the component library

npm install @inkeep/uikit

​
Define the component

import {
  InkeepChatButton,
  type InkeepChatButtonProps,
  type InkeepBaseSettings,
} from "@inkeep/uikit";

const baseSettings: InkeepBaseSettings = {
  apiKey: process.env.INKEEP_API_KEY!,
  integrationId: process.env.INKEEP_INTEGRATION_ID!,
  organizationId: process.env.INKEEP_ORGANIZATION_ID!,
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#26D6FF",
};

const InkeepChatButtonProps: InkeepChatButtonProps = {
  chatButtonType: 'PILL', // default. Alternatives are 'RECTANGLE_SHORTCUT' and 'ICON'
  baseSettings: {
    ...baseSettings,
  },
  modalSettings: {
    // optional typeof InkeepModalSettings
  },
  searchSettings: {
    // optional typeof InkeepSearchSettings
  },
  aiChatSettings: {
    // optional typeof InkeepAIChatSettings
    botAvatarSrcUrl: "/img/inkeep-logo.svg", // use your own bot avatar
    botAvatarDarkSrcUrl: "/img/inkeep-logo-dark.svg" // for dark mode or more contrast against button bg
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  },
};

export const ChatButton = () => {
  return <InkeepChatButton {...InkeepChatButtonProps} />;
};

​
InkeepChatButtonProps

This type represents the available settings for the Inkeep Chat Button component.

​
Properties

PropertyTypeDescription
chatButtonTypeChatButtonTypesType of the chat button. Can be RECTANGLE_SHORTCUT, PILL, or ICON. Default value PILL.
chatButtonBgColorstringBackground color of the chat button. Defaults to a dark gray.
chatButtonBgColorDarkModestringBackground color of the chat button in dark mode. Defaults to a light gray.
chatButtonTextstringText on the chat button if using the PILL or RECTANGLE_SHORTCUT versions. Default is Ask AI for the PILL version and Ask anything for the RECTANGLE_SHORTCUT version.
isPositionFixedbooleanDetermines whether the position of the chat button is fixed. Default value true.
fixedPositionXOffsetstringX offset for the fixed position of the chat button. Default value 1.5rem
fixedPositionYOffsetstringY offset for the fixed position of the chat button. Default value 1.5rem.
baseSettingsInkeepBaseSettingsRequired. Base settings for any Inkeep widget. See reference here.
modalSettingsInkeepModalSettingsSettings for the modal. See reference here.
searchSettingsInkeepSearchSettingsAdditional search settings for the Inkeep widget. See reference here.
aiChatSettingsInkeepAIChatSettingsAI chat settings for the Inkeep widget. See reference here.

​
Example

import type {
  InkeepChatButtonProps,
  InkeepChatButtonModalSettings,
} from "@inkeep/uikit";
import baseSettings from "./baseSettings"; // your base settings typeof InkeepBaseSettings

const InkeepChatButtonProps: InkeepChatButtonProps = {
    chatButtonType: "PILL",
    chatButtonBgColor: "#000",
    chatButtonBgColorDarkMode: "#fff",
    isPositionFixed: true,
    fixedPositionXOffset: "1.5rem",
    fixedPositionYOffset: "1.5rem",
    baseSettings : {
        ...baseSettings
        //... typeof InkeepBaseSettings
    },
    modalSettings : {
        //... typeof InkeepModalSettings
    }
    searchSettings : {
        //... typeof InkeepSearchSettings
    },
    aiChatSettings : {
        //... typeof InkeepAIChatSettings
    },
};
Search BarSearch Bar