​
InkeepSearchSettings

This interface is used to configure the search settings for the Inkeep widgets.

All properties are optional.

PropertyTypeDescription
placeholderstringPlaceholder text for the search input field. Default 'Search for anything...' for large screens and 'Search...' for small screens.
prefilledQuerystringThe prefilled query that will appear in the search bar. Default undefined.
shouldOpenLinksInNewTabbooleanDetermines whether links should open in a new tab. Default false.
isControlledSearchQuerybooleanDetermines whether the search query will be controlled by a wrapping component. Default false. Use along side handleSearchQueryChange and searchFunctionsRef.
handleSearchQueryChange(query: string) => voidCallback for when the search query changes. isControlledSearchQuery must be true. To be used along side searchFunctionsRef.
tabSettingsInkeepTabSettingsSettings for tabs in search results.
maximumHitsLimitnumberMax number of results to show for a search. Default is 40.
debounceTimenumberNumber of milliseconds to wait before fetching search results. Default is 0.
searchFunctionsRefReact.Ref<SearchFunctions>Ref to the component's callable functions for search. See here.
shouldShowAskAICardbooleanWhether or not to show the Ask AI "<query>" card in the search results. Default true.
searchQueryParamKeystringIf this property is set, the search query will be appended to search result links as a query param under the specified key. Default is undefined.

​
InkeepTabSettings

These settings control the tab behavior in search results.

All properties are optional.

PropertyTypeDescription
isAllTabEnabledbooleanEnables the 'All' tab in search results. Default true.
rootBreadcrumbsToUseAsTabsstring[]Specify a list of root breadcrumbs to put into individual tabs. For example, ['Docs', 'Blog']. Only applies for search results that include breadcrumbs. Default [].
tabOrderByLabelstring[]Controls the order of the tabs. Defaults to ['All', ...rootBreadcrumbsToUseAsTabs, ...defaultExternalSources]. defaultExternalSources includes GitHub, Discourse, Slack and Discord.
disabledDefaultTabsstring[]List tabs you to not show. Useful for disabling certain default tabs, like 'GitHub' or 'Slack' as standalone tabs.
alwaysDisplayedTabsstring[]Tabs that should always be displayed, including during the loading animation and regardless of whether there are any matching search results. Defaults to ['All', ...rootBreadcrumbsToUseAsTabs].

​
Example

import { type InkeepSearchSettings } from "@inkeep/uikit";

export const searchSettings: InkeepSearchSettings = {
  placeholder: "Search for anything...",
  prefilledQuery: null,
  shouldOpenLinksInNewTab: false,
  isControlledSearchQuery: false,
  handleSearchQueryChange: undefined,
  tabSettings: {
    isAllTabEnabled: true,
    rootBreadcrumbsToUseAsTabs: ["Docs", "Blog", "Case Studies"], // Example usage
    tabOrderByLabel: undefined,
    disabledDefaultTabs: undefined,
    alwaysDisplayedTabs: undefined,
  },
  searchFunctionsRef: undefined,
};

​
SearchFunctions

The SearchFunctions interface provides a set of functions that can be used to programmatically interact with the search input.

MethodParametersDescription
updateSearchQuery(query: string)Updates the search query with the provided string.

​
Example

You can follow a similar pattern in React to programmatically call the above method.

typescript
import { useRef } from 'react';
import {
  InkeepSearchBar,
  type InkeepSearchBarProps,
  type SearchFunctions,
} from '@inkeep/uikit';
import baseSettings from "./baseSettings"; // your base settings
import aiChatSettings from "./aiChatSettings"; // your ai chat settings

function SearchBar() {
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
  const inkeepSearchBarProps: InkeepSearchBarProps = {
    baseSettings: {
      ...baseSettings,
    },
    aiChatSettings: {
      ...aiChatSettings,
    },
    searchSettings: {
      isControlledSearchQuery: true,
      searchFunctionsRef,
      handleSearchQueryChange: (newQuery: string) => {
        console.log(newQuery);
        // update the search widget with the query
        searchFunctionsRef?.current?.updateSearchQuery(newQuery);
      },
    },
  };

  return (
    <div>
      <InkeepSearchBar {...inkeepSearchBarProps} />
    </div>
  );
}

export default SearchBar;
BaseAI Chat