Introduction

What is react-ai-chat?

react-ai-chat is a customizable AI chatbot toolkit for React.

It gives you a ready-made Chatbot component, server-side helpers, a CLI for generating editable chatbot UI, and optional RAG support for connecting your chatbot to your own content.

You can start with the ready-made UI and customize it through props. When you need deeper control, generate the chatbot components directly into your project and edit the source yourself.

Why react-ai-chat?

Building an AI chatbot usually means putting together the chat interface, streaming state, API route, model integration, and retrieval system yourself.

react-ai-chat gives you those building blocks while keeping the implementation in your application.

Ready-made UI

Add the Chatbot component and get a complete chat interface with streaming responses, starter prompts, themes, icons, positioning, and customizable text.

Your own UI

Generate the chatbot components with the CLI:

npx react-ai-chat init

The generated components become part of your project, so you can change the markup, styling, message rendering, input behavior, and interaction patterns.

Server-side model integration

Create your chat endpoint with createChatRoute() and connect it to an AI SDK-compatible model.

import { google } from "@ai-sdk/google";
import { createChatRoute } from "react-ai-chat/server";

export const POST = createChatRoute({
  model: google("gemini-3.5-flash"),
});

Optional RAG

Connect your chatbot to your own documents when you need answers grounded in application-specific content.

Your Documents
      │
      v
react-ai-chat CLI
      │
      v
Embedding Index
      │
      v
Relevant Context
      │
      v
AI Model
      │
      v
Streaming Response

RAG is optional. A basic chatbot only needs the chatbot UI, your API route, and an AI SDK-compatible model.

How it works

A typical chatbot setup looks like this:

Your React App
      │
      v
react-ai-chat
Chatbot UI + Chat State
      │
      v
Your API Route
      │
      v
AI SDK + AI Model

The Chatbot component handles the client-side chat experience.

Your API route handles the server-side request and connects the conversation to your chosen AI model.

createChatRoute() provides the server-side route helper, while the AI SDK provider supplies the model.

This separation lets you control your backend and model configuration without having to build the chatbot interface from scratch.

What you get

Prerequisites

You should be comfortable with:

• React: Components, props, hooks, and basic application structure.
• TypeScript: Basic types and TypeScript configuration.
• API routes: How your frontend communicates with a backend endpoint such as /api/chat.
• AI SDK providers: How to configure your chosen model provider.

You will also need API credentials for the AI provider you choose.

For server-side integrations, keep provider API keys in environment variables.

Tested frameworks

react-ai-chat has been tested with:

• Next.js
• Vite
• React Router

The chatbot UI is built around React APIs rather than framework-specific client components.

Your application needs a way to provide the server-side chat endpoint used by the chatbot.

Other React frameworks may work, but they have not been specifically tested by this project.

Choose your path

There are two ways to start with react-ai-chat.

Ready-made chatbot

Use the Chatbot component when you want a complete interface that you can configure through props.

Best for: getting an AI chatbot running quickly.

Generated chatbot

Use the CLI when you want the chatbot UI source inside your own application.

Best for: products that need deeper control over the interface.

Where to go next