Quick Start

Install the component library

npm install @inkeep/widgets

Define the component

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

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

const searchBarProps: InkeepSearchBarProps = {
  stylesheetUrls: ["/path/to/stylesheets"], // optional
  baseSettings: {
  modalSettings: {
    // optional InkeepModalSettings
  searchSettings: {
    // optional InkeepSearchSettings
  aiChatSettings: {
    // optional typeof InkeepAIChatSettings
    botAvatarSrcUrl: "/img/inkeep-logo.svg", // use your own bot avatar
    botAvatarDarkSrcUrl: "/img/inkeep-logo-dark.svg" // for dark mode
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",

export const SearchBar = () => {
  return <InkeepSearchBar {...searchBarProps} />;


This type represents the configuration for the Inkeep search bar widget.

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.