Quick Start

Install the widget

  • npm

  • bun

  • pnpm

  • yarn

npm install @inkeep/widgets

Define the component

import {
  InkeepSearchBar,
  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: "#522FC9",
};

const searchBarProps: InkeepSearchBarProps = {
  stylesheetUrls: ['/path/to/stylesheets'], // optional
  stylesheets: [<link key="my-stylesheet-key" rel="stylesheet" href="path-to-my-stylesheet.css" />], // optional
  baseSettings: {
    ...baseSettings,
  },
  modalSettings: {
    // optional InkeepModalSettings
  },
  searchSettings: {
    // optional InkeepSearchSettings
  },
  aiChatSettings: {
    // optional InkeepAIChatSettings
  },
};

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

InkeepSearchBarProps

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

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