Installation

Install react-ai-chat, configure an AI model provider, and choose how you want to build your chatbot.

1. Install react-ai-chat

npm install react-ai-chat

2. Install an AI model provider

react-ai-chat uses the Vercel AI SDK for model integration.

The ai package is included by react-ai-chat. Install the provider package for the model provider you want to use.

For example, with Google:

npm install @ai-sdk/google

Then configure the model in your server-side API route:

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

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

Your provider package and model name depend on the AI provider you choose.

3. Add your API key

Store your provider API key in an environment variable.

For Google AI SDK:

GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

Keep provider credentials on the server. Do not expose them in client-side code.

See API Route for the complete server configuration.

4. Choose your chatbot UI

react-ai-chat gives you two ways to build the chatbot interface.

Ready-made chatbot

Use <Chatbot /> when you want a complete UI that you can configure through props.

Import the package stylesheet once in your application's global stylesheet entry:

import "react-ai-chat/style.css";

Then render the component:

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

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

Continue with Quick Start.

Generated chatbot

Use the CLI when you want the chatbot source code inside your project.

npx react-ai-chat init

The CLI generates editable React components and CSS that you can modify directly.

Continue with Generated Chatbot.

RAG dependencies

RAG is optional. You only need an embedding provider when you want to retrieve information from your own documents.

Install the SDK for the embedding provider you want to use:

npm install @google/genai

Jina AI does not require an additional SDK. react-ai-chat communicates with the Jina API directly.

See Embedding Providers for provider-specific setup and environment variables.

Server setup

Your chatbot sends messages to a server-side API route. Create the route with createChatRoute() and provide your AI SDK model.

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

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

For a complete Next.js App Router example, see API Route.

What's next?