-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+```typescript
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+ const body = await request.json()
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Multimodal content support** - Send images, audio, video, and documents
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-### Read the docs →
+ return toServerSentEventsResponse(stream)
+}
+```
-## Bonus: TanStack Start Integration
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
-TanStack AI works with **any** framework (Next.js, Express, Remix, etc.).
+## Type-Safe Tools
-**With TanStack Start**, you get a bonus: share implementations between AI tools and server functions with `createServerFnTool`:
+Define a tool once, then attach a server or client implementation with the same
+input and output types:
```typescript
-import { createServerFnTool } from '@tanstack/ai-react'
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
-// Define once, get AI tool AND server function (TanStack Start only)
-const getProducts = createServerFnTool({
+const getProducts = toolDefinition({
name: 'getProducts',
+ description: 'Search the product catalog',
inputSchema: z.object({ query: z.string() }),
- execute: async ({ query }) => db.products.search(query),
+ 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## Structured Outputs
-// Use in AI chat
-chat({ tools: [getProducts.server] })
+Use `outputSchema` when you need typed objects instead of freeform text:
-// Call directly from components (no API endpoint needed!)
-const products = await getProducts.serverFn({ query: 'laptop' })
+```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,
+})
```
-No duplicate logic, full type safety, automatic validation. The `serverFn` feature requires TanStack Start. See [docs](https://tanstack.com/ai) for details.
+Learn more in the
+[Structured Outputs docs](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-
+
-
-
+
+
@@ -94,9 +256,9 @@ No duplicate logic, full type safety, automatic validation. The `serverFn` featu
@@ -104,28 +266,39 @@ No duplicate logic, full type safety, automatic validation. The `serverFn` featu
-
-
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
@@ -104,28 +266,39 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
-
-
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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,
+ })
-A powerful, type-safe AI SDK for building AI-powered applications.
+ return toServerSentEventsResponse(stream)
+}
+```
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Type-safe tools with server/client execution
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
-### Read the 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-
+
-
-
+
+
@@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications.
@@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
-
-
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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,
+ })
-A powerful, type-safe AI SDK for building AI-powered applications.
+ return toServerSentEventsResponse(stream)
+}
+```
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Type-safe tools with server/client execution
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
-### Read the 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-
+
-
-
+
+
@@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications.
@@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
-
-
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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,
+ })
-A powerful, type-safe AI SDK for building AI-powered applications.
+ return toServerSentEventsResponse(stream)
+}
+```
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Type-safe tools with server/client execution
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
-### Read the 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-
+
-
-
+
+
@@ -67,9 +256,9 @@ A powerful, type-safe AI SDK for building AI-powered applications.
@@ -77,28 +266,39 @@ A powerful, type-safe AI SDK for building AI-powered applications.
-
-
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
-
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-
+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
+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.
+
+## Read the docs ->
+
+## Start Here
+
+- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
+ what TanStack AI is and how the packages fit together.
+- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+ add streaming chat to a React app.
+- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
+ build with Vue composables.
+- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
+ build with Svelte 5 runes.
+- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
+ use TanStack AI from a server endpoint, script, or backend service.
+- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/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
-A powerful, type-safe AI SDK for building AI-powered applications.
+Install the core package and the provider/framework packages your app uses:
-- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
-- **Tree-shakeable adapters** - Import only what you need for smaller bundles
-- **Multimodal content support** - Send images, audio, video, and documents
-- **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen
-- Chat completion, streaming, and agent loop strategies
-- Headless chat state management with adapters (SSE, HTTP stream, custom)
-- Isomorphic type-safe tools with server/client execution
-- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
-- **Observability events** - Structured, typed events for text, tools, image, speech, transcription, and video ([docs](./docs/guides/observability.md))
+```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
+```
-### Read the docs →
+OpenRouter is also a good starting point if you want access to many providers
+through one API key:
-## Tree-Shakeable Adapters
+```bash
+pnpm add @tanstack/ai @tanstack/ai-openrouter
+```
-Import only the functionality you need for smaller bundle sizes:
+## Streaming Chat
```typescript
-// Only chat functionality - no summarization code bundled
-import { openaiText } from '@tanstack/ai-openai/adapters'
-import { generate } from '@tanstack/ai'
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
-const textAdapter = openaiText()
+export async function POST(request: Request) {
+ const body = await request.json()
-const result = generate({
- adapter: textAdapter,
- model: 'gpt-4o',
- messages: [{ role: 'user', content: [{ type: 'text', content: 'Hello!' }] }],
-})
+ const stream = chat({
+ adapter: openaiText('gpt-5.2'),
+ messages: body.messages,
+ })
-for await (const chunk of result) {
- console.log(chunk)
+ return toServerSentEventsResponse(stream)
}
```
-Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicText`, `geminiText`, `ollamaText`, and more.
+Learn more in the
+[Chat & Streaming docs](https://tanstack.com/ai/latest/docs/chat/streaming) and
+[Connection Adapters docs](https://tanstack.com/ai/latest/docs/chat/connection-adapters).
+
+## 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](https://tanstack.com/ai/latest/docs/tools/tools),
+[Tool Approval Flow docs](https://tanstack.com/ai/latest/docs/tools/tool-approval),
+and
+[Lazy Tool Discovery docs](https://tanstack.com/ai/latest/docs/tools/lazy-tool-discovery).
+
+## 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](https://tanstack.com/ai/latest/docs/structured-outputs/overview).
+
+## Media, Realtime, and Code Mode
+
+- [Generations](https://tanstack.com/ai/latest/docs/media/generations) - one
+ pattern for image generation, text-to-speech, transcription, summarization,
+ audio generation, and video generation.
+- [Realtime Voice Chat](https://tanstack.com/ai/latest/docs/media/realtime-chat) -
+ build low-latency realtime voice experiences.
+- [Code Mode](https://tanstack.com/ai/latest/docs/code-mode/code-mode) - let
+ models write and execute TypeScript inside a secure isolate.
+- [Code Mode with Skills](https://tanstack.com/ai/latest/docs/code-mode/code-mode-with-skills) -
+ give Code Mode reusable runtime capabilities.
+
+## Providers
+
+Official adapters include:
+
+| Package | Use it for |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
+| [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) | 300+ models through one OpenRouter API |
+| [`@tanstack/ai-openai`](https://tanstack.com/ai/latest/docs/adapters/openai) | OpenAI chat, image, video, speech, transcription, realtime, and provider tools |
+| [`@tanstack/ai-anthropic`](https://tanstack.com/ai/latest/docs/adapters/anthropic) | Anthropic Claude chat, thinking, tools, and structured outputs |
+| [`@tanstack/ai-gemini`](https://tanstack.com/ai/latest/docs/adapters/gemini) | Google Gemini chat, image, speech, and audio generation |
+| [`@tanstack/ai-ollama`](https://tanstack.com/ai/latest/docs/adapters/ollama) | Local Ollama models |
+| [`@tanstack/ai-grok`](https://tanstack.com/ai/latest/docs/adapters/grok) | xAI Grok chat, images, and realtime |
+| [`@tanstack/ai-groq`](https://tanstack.com/ai/latest/docs/adapters/groq) | Groq low-latency inference |
+| [`@tanstack/ai-elevenlabs`](https://tanstack.com/ai/latest/docs/adapters/elevenlabs) | ElevenLabs realtime voice, speech, transcription, music, and sound effects |
+| [`@tanstack/ai-fal`](https://tanstack.com/ai/latest/docs/adapters/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`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/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](https://tanstack.com/ai/latest/docs/advanced/middleware) - hook
+ into chat configuration, chunks, tool calls, usage, errors, and structured
+ outputs.
+- [OpenTelemetry](https://tanstack.com/ai/latest/docs/advanced/otel) - emit
+ vendor-neutral GenAI traces and metrics.
+- [Observability](https://tanstack.com/ai/latest/docs/advanced/observability) -
+ subscribe to typed TanStack AI events.
+- [Per-Model Type Safety](https://tanstack.com/ai/latest/docs/advanced/per-model-type-safety) -
+ narrow model options and content modalities to the selected model.
+- [Runtime Adapter Switching](https://tanstack.com/ai/latest/docs/advanced/runtime-adapter-switching) -
+ switch providers at runtime.
+- [Tree-Shaking](https://tanstack.com/ai/latest/docs/advanced/tree-shaking) -
+ ship only the activities and adapters you use.
+- [Agent Skills](https://tanstack.com/ai/latest/docs/getting-started/agent-skills) -
+ install TanStack AI skills into Claude Code, Cursor, GitHub Copilot, Codex,
+ and other coding agents with TanStack Intent.
## Get Involved
-- We welcome issues and pull requests!
-- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
-- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
-- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+- Read the [docs](https://tanstack.com/ai).
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions).
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ).
+- See [CONTRIBUTING.md](https://github.com/TanStack/ai/blob/main/CONTRIBUTING.md)
+ for setup instructions.
+- [Become a sponsor](https://github.com/sponsors/tannerlinsley/).
## Partners
-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.
-
+ 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.
+
+ 
-
+ 
+ 
-
-
+ 
+ 
-