API Reference

Explore the APIs available in react-ai-chat.

The API reference covers the ready-made chatbot, provider and context APIs, server-side chat routes, embedding providers, error handling, and TypeScript types.

Explore the API

Client API

The client API provides the components and hooks used to build chatbot interfaces.

Chatbot

Use Chatbot when you want the complete ready-made chatbot UI.

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

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

See Chatbot for all available props.

ChatbotProvider

Use ChatbotProvider when you want to build your own chatbot interface.

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

export function App() {
  return (
    <ChatbotProvider>
      <YourChatbotUI />
    </ChatbotProvider>
  );
}

See ChatbotProvider for configuration options.

useChatbotContext

Use useChatbotContext() inside a ChatbotProvider to access chatbot state and actions.

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

function ChatInput() {
  const { input, setInput, handleSubmit, isLoading } = useChatbotContext();

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(event) => setInput(event.target.value)} />

      <button type="submit" disabled={isLoading}>
        Send
      </button>
    </form>
  );
}

See useChatbotContext for the complete context API.

Server API

The server API handles model requests and optional retrieval.

createChatRoute

Use createChatRoute() to create the POST handler used by your chatbot.

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

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

The route supports:

• System prompts
• Message history limits
• Streaming responses
• RAG retrieval
• Embedding providers
• Error handling

See createChatRoute for the complete API.

Embedding providers

RAG uses an embedding provider to convert user queries into vectors and search the generated embedding index.

react-ai-chat provides helpers for supported providers.

See Providers for configuration examples.

Error handling

Use ChatbotError and ChatbotErrorCode when you need typed chatbot error handling.

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

function handleError(error: Error) {
  if (error instanceof ChatbotError) {
    console.error(error.code);
    console.error(error.message);
  }
}

Available error codes include:

type ChatbotErrorCode =
  | "RATE_LIMIT"
  | "AUTHENTICATION"
  | "INVALID_REQUEST"
  | "PROVIDER"
  | "UNKNOWN";

See Errors for details.

TypeScript

The package exports types for its public APIs.

For example:

import type { ChatbotErrorCode } from "react-ai-chat";

See Types for the available exported types.

Which API should you use?

For a complete chatbot with minimal setup:

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

For a fully custom interface:

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

For the server-side chat endpoint:

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