Getting Started

Get react-ai-chat installed and build your first AI-powered chatbot.

This section walks you through the setup from installation to connecting your chatbot UI to a server-side AI route.

What you'll learn

How it works

A basic react-ai-chat setup has two parts:

Your application
       ↓
   Chatbot UI
       ↓
   /api/chat
       ↓
 createChatRoute()
       ↓
    AI model

The client handles the chatbot interface and sends messages to your API endpoint.

The server route handles the AI model and streams the response back to the chatbot.

Basic setup

Once the package is installed, the simplest setup looks like this.

1. Add the chatbot

"use client";

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

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

By default, the chatbot sends requests to:

/api/chat

2. Create the API route

With Next.js App Router, create:

app/
└── api/
    └── chat/
        └── route.ts

Then configure the route with your AI model:

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

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

Your chatbot can now send messages to the server and receive streamed AI responses.

Next steps

Start with Installation if you haven't installed the package yet.

If the package is already installed, continue with Quick Start to build your first chatbot.