Ui componentsReact

Search Bar (React)

Add the Inkeep search bar as a React component.

Quick Start

Install the component library

npm install @inkeep/uikit
bun add @inkeep/uikit
pnpm add @inkeep/uikit
yarn add @inkeep/uikit

Define the component

import {
  InkeepSearchBar,
  type InkeepSearchBarProps,
  type InkeepBaseSettings,
} from "@inkeep/uikit";
 
const baseSettings: InkeepBaseSettings = {
  apiKey: process.env.INKEEP_API_KEY!, // required
  integrationId: process.env.INKEEP_INTEGRATION_ID!, // required
  organizationId: process.env.INKEEP_ORGANIZATION_ID!, // required
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#26D6FF",
};
 
const searchBarProps: InkeepSearchBarProps = {
  baseSettings: {
    ...baseSettings,
    theme: {
      // stylesheetUrls: ['/path/to/stylesheets'], // optional
    },
  },
  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} />;
};

InkeepSearchBarProps

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

PropertyTypeDescription
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.

On this page