TanStack AI

Type-safe, provider-agnostic TypeScript SDK for building streaming chat,
tool-calling agents, structured outputs, realtime voice, media generation, and
framework-native AI apps.

TanStack AI is built from composable activities and provider adapters. Use one
provider or switch between many. Import only chat, or add image, audio, video,
speech, transcription, summarization, realtime, Code Mode, devtools, and
framework bindings as your app needs them.

<a href="https://tanstack.com/ai">Read the docs -></a>

Start Here

Overview -
what TanStack AI is and how the packages fit together.
Quick Start: React -
add streaming chat to a React app.
Quick Start: Vue -
build with Vue composables.
Quick Start: Svelte -
build with Svelte 5 runes.
Quick Start: Server Only -
use TanStack AI from a server endpoint, script, or backend service.
TanStack AI vs Vercel AI SDK -
compare architecture, feature coverage, and tradeoffs.

What You Can Build

Streaming chat experiences with typed messages, tool calls, reasoning parts,
and configurable connection adapters.
Type-safe tools that can run on the server or client from one shared
toolDefinition() contract.
Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or
plain JSON Schema.
Multimodal prompts and responses that include text, images, audio, video, and
documents.
Image, audio, video, speech, transcription, and summarization workflows using
a shared generation client pattern.
Realtime voice chat with provider adapters for realtime sessions and token
minting.
Code Mode agents that let an LLM write and execute TypeScript in an isolated
sandbox to orchestrate tools with loops, branches, and parallel calls.
Devtools and observability pipelines for inspecting messages, tool calls,
stream chunks, errors, usage, and OpenTelemetry traces.
Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a
headless client for custom runtimes.

Install

Install the core package and the provider/framework packages your app uses:

bash
pnpm add @tanstack/ai @tanstack/ai-openai

For a React chat UI:

bash
pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai

OpenRouter is also a good starting point if you want access to many providers
through one API key:

bash
pnpm add @tanstack/ai @tanstack/ai-openrouter

Streaming Chat

typescript
import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

export async function POST(request: Request) {
  const body = await request.json()

  const stream = chat({
    adapter: openaiText('gpt-5.2'),
    messages: body.messages,
  })

  return toServerSentEventsResponse(stream)
}

Learn more in the
Chat & Streaming docs and
Connection Adapters docs.

Type-Safe Tools

Define a tool once, then attach a server or client implementation with the same
input and output types:

typescript
import { toolDefinition } from '@tanstack/ai'
import { z } from 'zod'

const getProducts = toolDefinition({
  name: 'getProducts',
  description: 'Search the product catalog',
  inputSchema: z.object({ query: z.string() }),
  outputSchema: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
    }),
  ),
}).server(async ({ query }) => {
  return db.products.search(query)
})

Learn more in the
Tools docs,
Tool Approval Flow docs,
and
Lazy Tool Discovery docs.

Structured Outputs

Use outputSchema when you need typed objects instead of freeform text:

typescript
import { chat } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'
import { z } from 'zod'

const Person = z.object({
  name: z.string(),
  age: z.number(),
})

const person = await chat({
  adapter: openaiText('gpt-5.2'),
  messages: [{ role: 'user', content: 'Ada Lovelace, 36' }],
  outputSchema: Person,
})

Learn more in the
Structured Outputs docs.

Media, Realtime, and Code Mode

Generations - one
pattern for image generation, text-to-speech, transcription, summarization,
audio generation, and video generation.
Realtime Voice Chat -
build low-latency realtime voice experiences.
Code Mode - let
models write and execute TypeScript inside a secure isolate.
Code Mode with Skills -
give Code Mode reusable runtime capabilities.

Providers

Official adapters include:

Package	Use it for
`@tanstack/ai-openrouter`	300+ models through one OpenRouter API, with per-request cost tracking
`@tanstack/ai-openai`	OpenAI chat, image, video, speech, transcription, realtime, and provider tools
`@tanstack/ai-anthropic`	Anthropic Claude chat, thinking, tools, and structured outputs
`@tanstack/ai-gemini`	Google Gemini chat, image, speech, and audio generation
`@tanstack/ai-ollama`	Local Ollama models
`@tanstack/ai-grok`	xAI Grok chat, images, and realtime
`@tanstack/ai-groq`	Groq low-latency inference
`@tanstack/ai-elevenlabs`	ElevenLabs realtime voice, speech, transcription, music, and sound effects
`@tanstack/ai-fal`	fal.ai image, video, audio, speech, and transcription models

The adapter system is tree-shakeable by activity. Import openaiText for chat,
openaiImage for images, falVideo for video, geminiSpeech for TTS, and so
on.

Framework Packages

Package	What it provides
`@tanstack/ai-client`	Headless chat, realtime, and generation clients
`@tanstack/ai-react`	React hooks including `useChat`, `useRealtimeChat`, and generation hooks
`@tanstack/ai-solid`	Solid hooks for chat and generations
`@tanstack/ai-vue`	Vue composables for chat and generations
`@tanstack/ai-svelte`	Svelte 5 factories for chat and generations
`@tanstack/ai-preact`	Preact hooks for chat
`@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui`	Headless UI components for chat interfaces

Advanced Docs

Middleware - hook
into chat configuration, chunks, tool calls, usage, errors, and structured
outputs.
OpenTelemetry - emit
vendor-neutral GenAI traces and metrics.
Observability -
subscribe to typed TanStack AI events.
Per-Model Type Safety -
narrow model options and content modalities to the selected model.
Runtime Adapter Switching -
switch providers at runtime.
Tree-Shaking -
ship only the activities and adapters you use.
Agent Skills -
install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
and other coding agents with TanStack Intent.

Get Involved

Read the docs.
Participate in GitHub discussions.
Chat with the community on Discord.
See CONTRIBUTING.md
for setup instructions.
Become a sponsor.

Partners

<table align="center"> <tr> <td> <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" /> <img src="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" alt="CodeRabbit" /> </picture> </a> </td> <td> <a href="https://www.cloudflare.com?utm_source=tanstack"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" /> <img src="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" alt="Cloudflare" /> </picture> </a> </td> </tr> </table> <div align="center"> <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/partner_logo.svg" alt="AI and you?" height="65" /> <p> We're looking for TanStack AI partners to join our mission. Partner with us to push the boundaries of TanStack AI and build amazing things together. </p> <a href="mailto:partners@tanstack.com?subject=TanStack AI Partnership"><b>LET'S CHAT</b></a> </div>

Explore the TanStack Ecosystem

<a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> -
tooling for JS/TS packages
<a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> - reactive
sync client store
<a href="https://github.com/tanstack/devtools"><b>TanStack Devtools</b></a> -
unified devtools panel
<a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> -
type-safe form state
<a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> -
debouncing, throttling, batching
<a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> -
async state and caching
<a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> -
range and slider primitives
<a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> -
type-safe routing, caching, and URL state
<a href="https://github.com/tanstack/start"><b>TanStack Start</b></a> -
full-stack SSR and streaming
<a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> -
reactive data store
<a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> -
headless datagrids
<a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> -
virtualized rendering