<Chatbot />

Introduction

Chatbot is the ready-made UI component included with react-ai-chat.

It provides the complete chatbot interface while managing chat state internally through ChatbotProvider.

Import

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

Use the stylesheet once when using the ready-made UI.

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.

Your server must expose a compatible POST handler at that endpoint.

See API Route.

Props

`title`

title?: string

The title displayed in the chatbot header.

<Chatbot title="AI Assistant" />

`subtitle`

subtitle?: string

The subtitle displayed below the chatbot title.

<Chatbot subtitle="Ask me anything" />

`triggerText`

triggerText?: string

Text displayed inside the floating trigger button when the chatbot is collapsed.

<Chatbot triggerText="Chat with us" />

`triggerIcon`

triggerIcon?: React.ReactNode

Custom icon rendered inside the floating trigger button.

<Chatbot triggerIcon={<ChatIcon />} />

`sendIcon`

sendIcon?: React.ReactNode

Custom icon used by the send button.

<Chatbot sendIcon={<SendIcon />} />

`closeIcon`

closeIcon?: React.ReactNode

Custom icon used by the chatbot close button.

<Chatbot closeIcon={<CloseIcon />} />

`position`

position?: "bottom-right" | "bottom-left" | "top-right" | "top-left"

Controls where the chatbot window and trigger are positioned.

Default: "bottom-right"

<Chatbot position="bottom-left" />

Supported values:

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

`starterPrompts`

starterPrompts?: string[]

An array of prompts displayed when the conversation has no messages.

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

`emptyStateText`

emptyStateText?: string

Text displayed when the conversation is empty.

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

`placeholder`

placeholder?: string

Placeholder text displayed inside the message input.

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

`starterPromptsLabel`

starterPromptsLabel?: string

Label displayed above the starter prompt buttons.

<Chatbot starterPromptsLabel="Try asking" />

`apiEndpoint`

apiEndpoint?: string

The server endpoint used for chat requests.

Default: "/api/chat"

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

Your server route must expose a compatible POST handler at the configured endpoint.

See API Route.

`initialOpen`

initialOpen?: boolean

Controls whether the chatbot window is open when it first renders.

Default: false

<Chatbot initialOpen />

`themeMode`

themeMode?: "auto" | "light" | "dark"

Controls the chatbot's color mode.

Default: "auto"

<Chatbot themeMode="dark" />

Supported values:

Value	Behavior
`auto`	Follows the user's system color preference
`light`	Always uses the light theme
`dark`	Always uses the dark theme

See Theming.

`classNames`

classNames?: {
  wrapper?: string;
  trigger?: string;
  window?: string;
  header?: string;
}

Provides custom CSS classes for supported chatbot elements.

<Chatbot
  classNames={{
    wrapper: "my-chatbot",
    trigger: "my-trigger",
    window: "my-window",
    header: "my-header",
  }}
/>

Available keys:

Key	Element
`wrapper`	Root chatbot wrapper
`trigger`	Floating chat trigger
`window`	Chat window
`header`	Chat window header

See Customization.

`theme`

theme?: ChatbotTheme

Customizes the chatbot's visual theme.

<Chatbot
  theme={{
    primaryColor: "#7c3aed",
    primaryForeground: "#ffffff",
    background: "#ffffff",
    foreground: "#111827",
  }}
/>

The theme supports general tokens as well as light and dark mode overrides.

See Theming for the complete ChatbotTheme API.

`onError`

onError?: (error: Error) => void

Called when the chatbot encounters an error.

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

This can be used to connect the chatbot to application-specific error handling or logging.

Complete example

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

export default function App() {
  return (
    <Chatbot
      apiEndpoint="/api/chat"
      title="AI Assistant"
      subtitle="Ask me anything"
      triggerText="Chat"
      position="bottom-right"
      initialOpen={false}
      starterPrompts={[
        "What can you help me with?",
        "Tell me more about this project",
      ]}
      emptyStateText="How can I help you?"
      placeholder="Type your question..."
      starterPromptsLabel="Try asking"
      themeMode="auto"
      theme={{
        primaryColor: "#7c3aed",
        primaryForeground: "#ffffff",
      }}
      classNames={{
        wrapper: "my-chatbot",
        trigger: "my-trigger",
        window: "my-window",
        header: "my-header",
      }}
      onError={(error) => {
        console.error(error);
      }}
    />
  );
}

Type definition

The complete public props interface is:

export interface ChatbotProps {
  title?: string;
  subtitle?: string;
  triggerText?: string;
  triggerIcon?: ReactNode;
  sendIcon?: ReactNode;
  closeIcon?: ReactNode;
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  starterPrompts?: string[];
  emptyStateText?: string;
  placeholder?: string;
  starterPromptsLabel?: string;
  apiEndpoint?: string;
  initialOpen?: boolean;
  themeMode?: "auto" | "light" | "dark";
  classNames?: {
    wrapper?: string;
    trigger?: string;
    window?: string;
    header?: string;
  };
  theme?: ChatbotTheme;
  onError?: (error: Error) => void;
}