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

Quick Start

Install the component library

npm install @inkeep/widgets

Define the component

import {
  type InkeepChatButtonProps,
  type InkeepWidgetBaseSettings,
} from "@inkeep/widgets";

const baseSettings: InkeepWidgetBaseSettings = {
  apiKey: process.env.INKEEP_INTEGRATION_API_KEY!,
  integrationId: process.env.INKEEP_INTEGRATION_ID!,
  organizationId: process.env.INKEEP_ORGANIZATION_ID!,
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#26D6FF",

const inkeepChatButtonProps: InkeepChatButtonProps = {
  chatButtonType: 'ICON_TEXT', // default. Alternatives are 'ICON_TEXT_SHORTCUT' and 'ICON'
  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} />;


This type represents the configuration for the Inkeep Chat Button widget.


All properties are optional.

chatButtonTypeChatButtonTypesType of the chat button. Can be ICON_TEXT_SHORTCUT, ICON_TEXT, or ICON. Default value ICON_TEXT.
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.
stylesheetUrlsstring[]Optional. An array of strings. The strings must be valid absolute or relative URLs to CSS files.
baseSettingsInkeepWidgetBaseSettingsRequired. 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.


There are three variations of the chat button. The default is ICON_TEXT.


import type {
} from "@inkeep/widgets";
import baseSettings from "./baseSettings"; // your base settings typeof InkeepWidgetBaseSettings

const inkeepChatButtonSettings: InkeepChatButtonSettings = {
    chatButtonType: "ICON_TEXT",
    isPositionFixed: true,
    fixedPositionXOffset: "1.5rem",
    fixedPositionYOffset: "1.5rem",
    baseSettings : {
        //... typeof InkeepWidgetBaseSettings
    modalSettings : {
        //... typeof InkeepModalSettings
    searchSettings : {
        //... typeof InkeepSearchSettings
    aiChatSettings : {
        //... typeof InkeepAIChatSettings