Chatbot UI

Introduction

react-ai-chat includes a ready-made <Chatbot /> component that you can add directly to your React application.

It provides the complete chatbot interface while ChatbotProvider manages the chat state and behavior internally.

Basic usage

import { Chatbot } from "react-ai-chat";
import "react-ai-chat/style.css";

export default function App() {
  return <Chatbot />;
}

The chatbot uses /api/chat as its default API endpoint.

Make sure your server has a matching route. See API Route.

Configuration

The <Chatbot /> component can be configured through props.

API endpoint

Use apiEndpoint when your chat route has a different URL.

<Chatbot apiEndpoint="/api/assistant" />

The default value is:

/api/chat

Position

Use position to control where the chatbot appears.

<Chatbot position="bottom-right" />

Supported positions:

bottom-right
bottom-left
top-right
top-left

The default position is bottom-right.

Initial state

Use initialOpen to control whether the chatbot starts open.

<Chatbot initialOpen={true} />

The default is false.

Title and subtitle

Customize the text shown in the chatbot header.

<Chatbot title="AI Assistant" subtitle="Ask me anything" />

You can also change the trigger button text:

<Chatbot triggerText="Chat with us" />

Empty state

Set the message shown before the conversation starts.

<Chatbot emptyStateText="How can I help you today?" />

Starter prompts

Starter prompts give users questions they can select when the conversation is empty.

<Chatbot
  starterPrompts={[
    "What can you help me with?",
    "Tell me about this product",
    "How does it work?",
  ]}
/>

Customize the label displayed above the prompts with starterPromptsLabel:

<Chatbot
  starterPrompts={["What can you help me with?", "Tell me about this product"]}
  starterPromptsLabel="Try asking"
/>

Input placeholder

Customize the text shown inside the message input.

<Chatbot placeholder="Ask a question..." />

Icons

You can provide custom React nodes for the chatbot controls.

<Chatbot
  triggerIcon={<MyTriggerIcon />}
  sendIcon={<MySendIcon />}
  closeIcon={<MyCloseIcon />}
/>

You can use an icon library or your own React components.

Theme mode

Use themeMode to control the chatbot's color mode.

<Chatbot themeMode="light" />

<Chatbot themeMode="dark" />

Use system when you want the chatbot to follow the user's system preference:

<Chatbot themeMode="auto" />

Custom theme

Use the theme prop to customize the chatbot's visual tokens.

<Chatbot
  theme={{
    primaryColor: "#2563eb",
    background: "#ffffff",
    foreground: "#111827",
  }}
/>

If your theme API supports light and dark overrides, you can define them through the theme configuration.

For the complete theme API, see Theming.

Custom classes

Use classNames when you need to target specific chatbot elements with your own CSS classes.

<Chatbot
  classNames={{
    container: "my-chatbot",
    trigger: "my-trigger",
    panel: "my-panel",
  }}
/>

The available class names are defined by the package's ChatbotClassNames type.

See Customization for more details.

Error handling

Use onError to handle errors reported by the chatbot.

<Chatbot
  onError={(error) => {
    console.error(error);
  }}
/>

This can be useful for displaying your own error UI or sending errors to your logging system.

Complete example

import { Chatbot } from "react-ai-chat";
import "react-ai-chat/style.css";

export default function App() {
  return (
    <Chatbot
      title="My AI Assistant"
      subtitle="Ask questions about my website"
      triggerText="Chat"
      position="bottom-right"
      initialOpen={false}
      placeholder="Ask a question..."
      emptyStateText="How can I help?"
      starterPrompts={[
        "What can you help me with?",
        "Tell me about this website",
      ]}
      starterPromptsLabel="Try asking"
      themeMode="auto"
      apiEndpoint="/api/chat"
    />
  );
}

Ready-made UI vs generated UI

The ready-made <Chatbot /> gives you a complete interface through a single component.

If you want to change the component structure itself, generate the chatbot source into your project:

npx react-ai-chat init

The CLI generates source files that you can edit directly:

chatbot/
├── chatbot.tsx
├── chatbot-header.tsx
├── chatbot-messages.tsx
├── chatbot-input.tsx
└── chatbot.css

The generated UI uses the package's ChatbotProvider and useChatbotContext APIs.

See Generated Chatbot.

Next steps