AI chat for React.
Your UI. Your rules.
Add a customizable AI chatbot to your React app with streaming responses, server-side model integration, and optional RAG. Start with the ready-made UI or generate editable chatbot components directly into your project.
npm install react-ai-chat
Try the chatbot yourself.
The chatbot in the bottom-right corner is powered by react-ai-chat. Open it and ask a question to see the ready-made component in action.
Start simple. Customize when you need to.
The package separates chat logic from presentation, so you can use the default UI today and take control of the interface later.
Ready-made chatbot
Drop Chatbot into your React application and get streaming chat, starter prompts, themes, positioning, and configurable text.
Own the UI
Generate the chatbot source with the CLI. The generated components live inside your project and can be edited directly.
Simple server route
Connect your chatbot to an AI SDK-compatible model through createChatRoute().
Optional RAG
Load your own documents, create an embedding index, retrieve relevant context, and ground model responses.
Multiple embeddings
Choose from Google, OpenAI, Voyage, Cohere, Jina, or Hugging Face for your embedding workflow.
React-first
Use the package with React 18 or 19 and tested React frameworks including Next.js, Vite, and React Router.
Start with the UI. Own the source.
Generate the UI into your own codebase and change the structure, styling, text, message layout, header, input, or interaction patterns.
Explore generated UISee it running in a real portfolio.
I built an AI chatbot for my portfolio using react-ai-chat, RAG, and Google Gemini. Visitors can ask questions about my projects, skills, and experience.
Keep the pieces you care about.
React handles the experience. Your route handles the server. Your model handles generation. RAG is there when you need grounded answers.
Your React app
Render the chatbot or generate editable UI directly into your project.
Your API route
Use createChatRoute() to connect the client to an AI SDK model.
AI model
Choose the model and provider that fit your application.
Give your chatbot something to know.
Index your own documents with the CLI, retrieve relevant chunks at request time, and pass that context to your model. The basic chatbot stays simple when you do not need RAG.
Works with React apps using these popular frameworks.
From install to first message.
Install the package, create your API route, render the chatbot, and start streaming responses.
Follow the guideimport { createChatRoute } from "react-ai-chat/server";
import { google } from "@ai-sdk/google";
export const POST = createChatRoute({
model: google("gemini-3.5-flash"),
});<Chatbot />Build the chat experience your app actually needs.
Start with the ready-made chatbot. Move to generated UI when your product needs deeper control.