Ask AI

Enhance your Nextra documentation site with AI-powered chat assistance using Inkeep . This integration allows users to get instant help and answers directly within your documentation, improving user experience and reducing support burden.

Setup

Get an API key

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

Copy and add the API key to your environment variables:

.env


NEXT_PUBLIC_INKEEP_API_KEY="your_actual_api_key_here"

Install the component library

Install the Inkeep React component library:


npm i @inkeep/cxkit-react


pnpm add @inkeep/cxkit-react


yarn add @inkeep/cxkit-react


bun add @inkeep/cxkit-react

Create the chat button component

Create a new file inkeep-chat-button.tsx:

inkeep-chat-button.tsx


'use client'
 
import { InkeepChatButton } from '@inkeep/cxkit-react'
import type { FC } from 'react'
 
export const ChatButton: FC = () => {
  return (
    <InkeepChatButton
      aiChatSettings={{
        apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY!,
        // Customize your AI assistant's appearance
        aiAssistantAvatar: '/icon.svg', // Path to your assistant's avatar
        aiAssistantName: 'Nextra Assistant' // Name shown to users
      }}
      baseSettings={{
        // Match your site's brand colors
        primaryBrandColor: '#238aff',
        // Sync with your site's dark/light mode
        colorMode: {
          sync: {
            target: 'html',
            attributes: ['class'],
            isDarkMode(attrs) {
              return attrs.class === 'dark'
            }
          }
        }
      }}
    />
  )
}

Add to your root layout

Import and add the ChatButton component to your root layout file:

app/layout.tsx


import { Layout } from 'nextra-theme-docs' // or nextra-theme-blog or your custom theme
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import type { FC } from 'react'
import { ChatButton } from '../path/to/your/inkeep-chat-button'
 
const RootLayout: FC<LayoutProps<'/'>> = async ({ children }) => {
  const pageMap = await getPageMap()
 
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <Head />
      <body>
        <ChatButton />
        <Layout
          pageMap={pageMap}
          // ... other layout props
        >
          {children}
        </Layout>
      </body>
    </html>
  )
}
 
export default RootLayout

Important

The chat button will appear on all pages of your documentation site.

Additional resources

Inkeep’s official Nextra integration guide
Inkeep React component documentation
Inkeep Dashboard for configuration and analytics