Inkeep light logo
Schedule a callSee it for my content
Ui componentsReact

Search Bar (React)

Add the Inkeep search bar as a React component.

Overview

The search bar is a great way to add an AI powered search bar to your website.

Quick Start

Install the component library

npm install @inkeep/cxkit-react
yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepSearchBar,
  type InkeepSearchBarProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepSearchBarProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    organizationDisplayName: "Your Company",
    primaryBrandColor: "#4F46E5",
  },
  searchSettings: {
    placeholder: "Search documentation...",
  },
};
 
const App = () => {
  return <InkeepSearchBar {...config} />;
};

Search Bar Props

Search bar props control the behavior and interaction of the search bar.

PropTypeRequiredDescription
baseSettingsobjectYesCore configuration settings. See Base Settings for details.
aiChatSettingsobjectNoAI chat configuration settings. See AI Chat Settings for details.
modalSettingsobjectNoModal configuration settings. See Modal Settings for details.
canToggleViewbooleanNoWhether to allow toggling between chat and search views. Defaults to true.
defaultView'search' | 'chat'NoThe default view to show when opened. Defaults to 'chat'.

Examples

Set the default view

import {
  InkeepSearchBar,
  type InkeepSearchBarProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepSearchBarProps = {
  // ... other config
  defaultView: "search", // or "chat"
};
 
const App = () => {
  return <InkeepSearchBar {...config} />;
};

Force the default view

If you want to force the default view to be the search or the chat, you can use the forceDefaultView property. This is useful to ensure the widget always opens the defaultView instead of last used view.

import {
  InkeepSearchBar,
  type InkeepSearchBarProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepChatButtonProps = {
  // ... other config
  forceDefaultView: true,
};
 
const App = () => {
  return <InkeepSearchBar {...config} />;
};

Refer to the Search Settings and Chat Settings docs for more details on the available properties.

Accessing Component Methods

Exactly how you'd do it in the Embedded Search and Embedded Chat components respectively.

const App = () => {
  import type { SearchFunctions } from "@inkeep/cxkit-types";
 
  const searchFunctionsRef = useRef<SearchFunctions | null>(null);
  const chatFunctionsRef = useRef<ChatFunctions | null>(null);
 
  const config: InkeepChatButtonProps = {
    // ... other config
    searchSettings: {
      searchFunctionsRef,
    },
    aiChatSettings: {
      chatFunctionsRef,
    },
  };
 
  const updateSearchQuery = () => {
    searchFunctionsRef.current?.updateQuery("Hello!");
  };
 
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  return (
    <>
      <InkeepSearchBar {...config} />
      <button onClick={updateSearchQuery}>Update Query</button>
      <button onClick={clearChat}>Clear Chat</button>
    </>
  );
};

Chat Methods

MethodDescription
submitMessage(message?: string)Programmatically sends a message in chat. If message is omitted, sends the current input value.
updateInputMessage(message: string)Updates the text in chat input field
clearChat()Resets the chat to its initial state
openForm(formSettings: FormSettings)Displays a form overlay in chat interface
focusInput()Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

Search methods

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

Widget methods

type ModalViewTypes = "search" | "chat";
MethodDescription
setView(view: ModalViewTypes)Set the view of the widget to either search or chat

FAQ

If you use a webpack build. You could come across this error. To fix this you need to create a custom loader for your webpack configuration to disable this behavior.

Since webpack 5.0.0-beta.30, you're required to specify extensions when using imports in .mjs files or any .js files with a package.json with "type": "module". You can still disable the behavior with resolve.fullySpecified set to false if you see any related errors in your project.

We can add a new rule to our webpack configuration to disable this behavior.

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
            },
        ],
    },
};

Then add this to your webpack.config.js file.

If you use docusaurus, you can add this to your docusaurus.config.js file as a webpack config override with plugins.

/** @type {import('@docusaurus/types').Config} */
const config = {
// ...
plugins: [
    () => {
    return {
        name: "loader",
        configureWebpack() {
        return {
            module: {
            rules: [
                {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
                },
            ],
            },
        };
        },
    };
    },
],
// ...
};
 
module.exports = config;
Chat Button (React)Intelligent Form (React)

On this page