Embedded Search (React)

Overview

An "embedded search" is a search UI that is directly incorporated into a page instead of within a pop-up modal.

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepEmbeddedSearch,
  type InkeepEmbeddedSearchProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepEmbeddedSearchProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  searchSettings: {
    placeholder: "Search...",
  },
};
 
const App = () => {
  return <InkeepEmbeddedSearch {...config} />;
};

Embedded Search Props

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

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`searchSettings`	`object`	No	Search configuration settings. See Search Settings for details.
`isHidden`	`boolean`	No	Whether to hide the search interface. Defaults to false.
`shouldAutoFocusInput`	`boolean`	No	Whether to auto focus the input. Defaults to true.
`askAILabel`	`string`	No	The label for the Ask AI button

Examples

Auto Focus Input

const App = () => {
  const config: InkeepEmbeddedSearchProps = {
    // ... other config
    shouldAutoFocusInput: true,
  };
 
  return <InkeepEmbeddedSearch {...config} />;
};

With Search Settings

const App = () => {
  const config: InkeepEmbeddedSearchProps = {
    // ... other config
    searchSettings: {
      placeholder: "Search...",
      debounceTimeMs: 300,
    },
  };
 
  return <InkeepEmbeddedSearch {...config} />;
};

Accessing Component Methods

The searchSettings config accepts a searchFunctionsRef prop that allows you to access the search methods.

const App = () => {
  import type { SearchFunctions } from "@inkeep/cxkit-types";
 
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
 
  const config: InkeepEmbeddedSearchProps = {
    // ... other config
    searchSettings: {
      searchFunctionsRef,
    },
  };
 
  const updateQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  const focusInput = () => {
    searchFunctionsRef.current?.focusInput();
  };
 
  return (
    <>
      <InkeepEmbeddedSearch {...config} />
      <button onClick={updateQuery}>Update Query</button>
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
};

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