# React AI Chat

> [View this product on lib-pro](https://lib-pro-3f8437.gitlab.io/libs/react-ai-chat) · Drop-in AI chat that looks like a product, not a demo.

**Outcome:** Ship a real AI chat feature in a single afternoon.

Streaming responses, tool calling visualization, file uploads, markdown rendering, conversation history — all as simple React components and hooks. Works with any LLM API.

**Price:** £25 — lifetime · **Category:** React Library · **Tech:** React 18+, TypeScript, Tailwind CSS, Vercel AI SDK compatible

| Metric | Value |
|--------|-------|
| Time to first message | 1 hour |
| Models supported | Any LLM |
| Built-in features | 8 |

## Quick start

```bash
npm install react-ai-chat ai
```

- # Wrap your app in <ChatProvider>
- # Point useChat at your /api/chat route
- # Done — works with OpenAI, Anthropic, local

## Code preview

```tsx
import { Chat, useChat } from 'react-ai-chat'

export default function ChatPanel() {
  const { messages, input, setInput, append, isLoading } = useChat({
    api: '/api/chat',          // your endpoint
    tools: [searchTool, dbTool], // function calling
  })

  return (
    <Chat
      messages={messages}
      input={input}
      onInput={setInput}
      onSend={(msg) => append({ role: 'user', content: msg })}
      isLoading={isLoading}
      enableFileUpload
    />
  )
}
```

## Use cases

### 1. In-app AI assistants

Help your users do things in your product by chat. Streaming, tool calls, file uploads — all the pieces.

**Outcome:** Ship a 'ChatGPT for your app' feature.

### 2. Customer support bots

Conversational UI over your docs, with tool calls to your API. Markdown and code blocks render correctly.

**Outcome:** Cut support load with a real product, not a bot.

### 3. Document Q&A

Drop in a PDF or a doc set, get back citations and answers. Custom tools for retrieval, formatting, follow-ups.

**Outcome:** Build a Perplexity clone over your data.

### 4. AI-powered tools

Build AI features that aren't pure chat. The hook is just state — wire it into your own UI however you want.

**Outcome:** AI as a feature, not as the whole product.

## Built for

- AI engineers shipping chat features
- Full-stack devs adding AI to existing apps
- Teams standardising on the Vercel AI SDK
- Indie hackers building AI tools

## Highlights

### Streaming you can feel

Token-by-token streaming with a typing indicator that doesn't lie. Markdown, code blocks, and tool calls render inline as they arrive.

### Tool calls, not magic

First-class support for function calling. Tools render as collapsible cards with their inputs and outputs visible — no hidden LLM behavior.

### Bring your own model

Works with the Vercel AI SDK. OpenAI, Anthropic, Mistral, OpenRouter, Ollama, your own fine-tune. Same hook, swap the endpoint.

## What's in the box

- `Chat component` — drop-in UI
- `useChat hook` — model-agnostic state
- `Streaming renderer` — token-by-token
- `Tool call cards` — input + output visible
- `File upload` — drag-and-drop
- `Markdown + code` — renders inline
- `Theme tokens` — light/dark/custom
- `Full source + docs` — no obfuscation

## Works with

- **React 18+** (peer dep)
- **Vercel AI SDK** (streaming + tools)
- **OpenAI / Anthropic** (any provider)
- **Mistral / Cohere / Ollama** (any provider)
- **OpenRouter** (multi-model)
- **Tailwind CSS** (styling)

## Features

- useChat hook — connect to any LLM API
- Streaming response rendering with typing indicators
- Tool call visualization & inline results
- Markdown & code block rendering
- File upload with drag-and-drop
- Conversation history management
- Customizable theme (light/dark)
- Built-in error handling & retry

## FAQ

### Do I need a backend?

Yes — you need an endpoint that calls your LLM. The library is the UI; the proxy is your call. We recommend the Vercel AI SDK's `streamText`.

### Does it work with non-OpenAI models?

Yes. Anything the Vercel AI SDK supports works: OpenAI, Anthropic, Mistral, Cohere, Ollama, OpenRouter. The chat UI doesn't care.

### Can I customize the theme completely?

Yes. Pass `theme` with token overrides, or replace individual components (message bubble, input, tool card) via the `slots` prop.

### How are conversations persisted?

It's your call. The hook takes a `messages` array you control. Save to localStorage, IndexedDB, your server, or a managed service — same code.