Chat Button (React)

Overview

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.

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepChatButton,
  type InkeepChatButtonProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepChatButtonProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  aiChatSettings: {
    aiAssistantName: "Keepie",
  },
  label: "Ask AI",
};
 
const App = () => {
  return <InkeepChatButton {...config} />;
};

Chat Button Props

Chat button props control the behavior and interaction of the chat button.

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`aiChatSettings`	`object`	No	AI chat configuration settings. See AI Chat Settings for details.
`modalSettings`	`object`	No	Modal configuration settings. See Modal Settings for details.
`label`	`string`	No	Custom label for the chat button.
`canToggleView`	`boolean`	No	Whether to allow toggling between chat and search views. Defaults to true.
`defaultView`	`'search' \| 'chat'`	No	The default view to show when opened. Defaults to 'chat'.
`avatar`	`string \| { light: string, dark: string }`	No	URL for ai button's avatar (40x40px recommended)
`askAICardLabel`	`string`	No	The label for the Ask AI card in search results. Defaults to `Ask AI` or `askAILabel` if provided.
`askAILabel`	`string`	No	The label for the Ask AI button in the search/chat toggle. Defaults to `Ask AI`.
`searchLabel`	`string`	No	The label for the search button in the search/chat toggle. Defaults to `Search`.

Examples

Set the default view

import {
  InkeepChatButton,
  type InkeepChatButtonProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepChatButtonProps = {
  // ... other config
  defaultView: "chat", // or "search"
};
 
const App = () => {
  return <InkeepChatButton {...config} />;
};

If you want to force the default view to be the search or the chat, you can use the forceDefaultView property. This is useful to ensure the widget always opens the defaultView instead of last used view.

import {
  InkeepChatButton,
  type InkeepChatButtonProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepChatButtonProps = {
  // ... other config
  forceDefaultView: true,
};
 
const App = () => {
  return <InkeepChatButton {...config} />;
};

Refer to the Search Settings and Chat Settings docs for more details on the available properties.

Accessing Component Methods

Exactly how you'd do it in the Embedded Search and Embedded Chat components respectively.

const App = () => {
  import type {
    SearchFunctions,
    ChatFunctions,
    InkeepChatButtonProps,
  } from "@inkeep/cxkit-types";
 
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
  const chatFunctionsRef = useRef<ChatFunctions | null>(null);
 
  const config: InkeepChatButtonProps = {
    // ... other config
    searchSettings: {
      searchFunctionsRef,
    },
    aiChatSettings: {
      chatFunctionsRef,
    },
  };
 
  const updateSearchQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  return (
    <>
      <InkeepChatButton {...config} />
      <button onClick={updateSearchQuery}>Update Query</button>
      <button onClick={clearChat}>Clear Chat</button>
    </>
  );
};

Chat Methods

Method	Description
`submitMessage(message?: string)`	Programmatically sends a message in chat. If message is omitted, sends the current input value.
`updateInputMessage(message: string)`	Updates the text in chat input field
`clearChat()`	Resets the chat to its initial state
`openForm(formSettings: FormSettings)`	Displays a form overlay in chat interface
`focusInput()`	Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

Search methods

Method	Description
`updateQuery(query: string)`	Programmatically updates the search query.
`focusInput()`	Sets focus to the search input field

type ModalViewTypes = "search" | "chat";

Method	Description
`setView(view: ModalViewTypes)`	Set the view of the widget to either search or chat