Generated Chatbot

Introduction

The react-ai-chat CLI can generate the chatbot UI directly inside your project.

This gives you access to the React components and CSS, so you can change the structure, message rendering, interactions, and styling directly.

Use the ready-made Chatbot when you only need configuration through props.

Generate the chatbot

Run:

npx react-ai-chat init

By default, the CLI generates TypeScript React components in:

./chatbot

You can choose a different output directory with --path:

npx react-ai-chat init --path ./components/chatbot

For JavaScript projects, use --jsx:

npx react-ai-chat init --jsx

Run the following to see all available options:

npx react-ai-chat init --help

See CLI for the complete command reference.

Generated files

A default TypeScript generation produces:

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

Each file handles a different part of the chatbot.

`chatbot.tsx`

This is the main chatbot component.

It creates the ChatbotProvider and combines the generated UI components.

import { ChatbotProvider } from "react-ai-chat";
import { ChatbotHeader } from "./chatbot-header";
import { ChatbotMessages } from "./chatbot-messages";
import { ChatbotInput } from "./chatbot-input";
import "./chatbot.css";

The generated component supports configuration for the API endpoint, position, initial state, and theme mode.

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;
}

The defaults are:

Option	Default
`apiEndpoint`	`/api/chat`
`position`	`bottom-right`
`initialOpen`	`false`
`themeMode`	`auto`

Component props

The generated <Chatbot /> supports the same configuration props as the ready-made component.

You can customize:

title and subtitle
triggerText
triggerIcon, sendIcon, and closeIcon
position
starterPrompts
emptyStateText
placeholder
starterPromptsLabel
apiEndpoint
initialOpen
themeMode
classNames
theme
onError

For detailed examples and the complete prop behavior, see Chatbot UI and Chatbot API.

`chatbot-header.tsx`

Contains the chatbot header.

The generated header renders the configured title and subtitle and includes the close button.

You can customize the header through the component props:

<Chatbot
  title="Support Assistant"
  subtitle="We're here to help"
  closeIcon={<CloseIcon />}
/>

It uses `useChatbotContext()` to access the chatbot state.

You can replace the header markup with your own design.

### `chatbot-messages.tsx`

Renders the conversation and handles the empty state.

It uses `useChatbotContext()` to access values such as:

```tsx
const { messages, isLoading, handleSubmit } = useChatbotContext();

Assistant messages are rendered with react-markdown.

The generated UI can include starter prompts for the empty conversation state.

You can customize the prompts through the starterPrompts prop:

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

You can also customize the empty-state text and starter prompt label:

```tsx
<Chatbot
  emptyStateText="How can I help you?"
  starterPromptsLabel="Try asking"
  starterPrompts={[
    "What can you help me with?",
    "Tell me about this project",
  ]}
/>
```

### `chatbot-input.tsx`

Contains the message input and send button.

It uses the chatbot context to read and update the input:

```tsx
const { input, setInput, handleSubmit, isLoading } = useChatbotContext();

The generated input prevents submission while a response is loading or when the input is empty.

`chatbot.css`

Contains the styles for the generated chatbot.

The stylesheet covers the chatbot window, trigger, header, messages, starter prompts, input, loading state, theme tokens, positioning, and responsive behavior.

You own the generated stylesheet inside your project, so you can modify it directly.

Add the generated chatbot

Import the generated component into your application:

import { Chatbot } from "./chatbot/chatbot";

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

The generated chatbot uses /api/chat by default.

If your server route uses another endpoint:

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

Make sure the client endpoint matches your server route.

See API Route for server-side setup.

Position

The generated chatbot supports four positions:

<Chatbot position="bottom-right" />

<Chatbot position="bottom-left" />

<Chatbot position="top-right" />

<Chatbot position="top-left" />

The default position is bottom-right.

Theme mode

Set themeMode to control the generated chatbot's color mode:

<Chatbot themeMode="auto" />

<Chatbot themeMode="light" />

<Chatbot themeMode="dark" />

With auto, the generated stylesheet follows the user's system color preference.

You can also make more detailed visual changes by editing the CSS variables in chatbot.css.

Use the chatbot context

The generated components use ChatbotProvider and useChatbotContext.

You can use the context in your own components to build custom chatbot UI while keeping the package's chat state and request handling.

import { useChatbotContext } from "react-ai-chat";

function CustomComponent() {
  const {
    messages,
    input,
    setInput,
    isLoading,
    handleSubmit,
    isOpen,
    setIsOpen,
  } = useChatbotContext();

  return (
    <div>
      <p>Messages: {messages.length}</p>
      <p>Loading: {isLoading ? "Yes" : "No"}</p>
    </div>
  );
}

See useChatbotContext for the complete context API.

Customize the generated UI

The generated files are regular React components and CSS.

You can change the parts that matter to your application.

Change starter prompts

Replace the generated prompts:

const starterPrompts = [
  "How does pricing work?",
  "What features are available?",
  "How can I contact support?",
];

Change the header

Replace the generated header markup with your own:

<header className="chatbot-header">
  <div className="chatbot-header-content">
    <h2>Support Assistant</h2>
    <p>We're here to help</p>
  </div>
</header>

Change message rendering

You can modify how user and assistant messages are displayed inside chatbot-messages.tsx.

This is useful for adding avatars, timestamps, custom Markdown styling, citations, or other application-specific UI.

Change the input

Modify chatbot-input.tsx when you need custom input behavior, controls, attachments, or additional actions.

Change the styling

Edit chatbot.css when you need changes to colors, spacing, sizing, borders, animations, responsive behavior, or layout.

Regenerating the chatbot

The generated files become part of your application source code.

Running the CLI with --force can overwrite existing generated files:

npx react-ai-chat init --force

If you have customized the generated files, commit your changes before using --force.

Treat regeneration as a fresh generation step rather than a safe update mechanism for customized components.

When should you use generated UI?

Use the ready-made <Chatbot /> when the existing interface and its configuration props are enough for your application.

Use the generated chatbot when you need to change the internal React structure, message rendering, input behavior, or CSS beyond what the ready-made component exposes.

The generated approach gives you direct ownership of the UI while still using react-ai-chat for the underlying chatbot state and behavior.