Add Chat and Search to Nextra

Integrate Inkeep's chat button and search bar into your Nextra documentation for enhanced user experience and content discovery.

What is Nextra

Nextra is a framework for creating content-focused websites using Next.js and markdown.

Follow these steps to create an API key for your web integration.

Copy and add the apiKey to your environment variables:

.env

NEXT_PUBLIC_INKEEP_API_KEY="INKEEP_API_KEY"

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define your Inkeep settings.

Next, create component files InkeepChatButton.tsx and InkeepSearchBar.tsx

To add widgets to the page, paste the code shown below into the theme.config.tsx file:

theme.config.tsx

//...
footer: {
  component: () => <InkeepChatButton />
},
search: {
  component: () => <InkeepSearchBar />
}

For a full list of customizations, check out the Common Settings.