@tanstack/ai-solid weekly downloads statistics

@tanstack/ai-react

React hooks for building AI chat interfaces with TanStack AI.

Installation

useChat Hook

The useChat hook manages chat state, handles streaming responses, and provides a complete chat interface in a single hook.

Design Philosophy (v5 API):

• You control input state • Just call sendMessage() when ready • No form-centric API - use buttons, keyboard events, or any trigger • More flexible and less opinionated

Basic Usage

API

Options

Return Value

Connection Adapters

Connection adapters provide flexible streaming for different scenarios. See the complete guides:

• 📖 Connection Adapters Guide - Complete guide with examples • 📖 Connection Adapters API - API reference

Quick Examples

SSE (Most Common):

Server Functions:

Custom (e.g., WebSockets):

Backend Endpoint

Your backend should use the chat() method which automatically handles tool execution in a loop:

1. Receive POST requests with this body:

2. Use chat() to stream responses (with automatic tool execution):

The response streams StreamChunk objects as Server-Sent Events:

Note: The chat() method automatically executes tools and emits tool_result chunks - you don't need to handle tool execution manually!

Advanced Usage

With Callbacks

Flexible Triggering

With Custom Headers

Programmatic Control

Multiple Chats

Example Backend (Node.js/Express)

Example Backend (Next.js App Router)

Example Backend (TanStack Start)

TypeScript Types

All types are fully exported:

Features

• ✅ Automatic message state management • ✅ Streaming response handling • ✅ Loading and error states • ✅ Simple sendMessage() API (v5 style) • ✅ You control input state (flexible) • ✅ Abort/stop generation • ✅ Reload last response • ✅ Clear conversation • ✅ Custom headers and body data (via connection adapter options) • ✅ Callback hooks for lifecycle events • ✅ Multiple concurrent chats • ✅ Full TypeScript support

License

MIT

Description from the npm listing.