Overview

TanStack AI is a TypeScript SDK for streaming chat, tool calls, and media generation. Swap the provider or the UI framework without rewriting the call.

TanStack AI gives you one typed API for all of that. Your server talks to the provider through an adapter. Your UI reads the stream through a hook for your framework.

Start here: Quick Start. You get a streaming chat in about 5 minutes.

Who it is for#

• You are new and want to try it. Go to Quick Start.
• You have chat and want one more feature. Start with Tools, Structured Outputs, or Persistence.
• You want to pick or switch a provider. Open the OpenRouter adapter for 300+ models with one key, or any page under Adapters.
• You run it in production or extend it. Read Middleware, Resumable Streams, and Sandboxes.
• You come from 0.x or the Vercel AI SDK. Read Upgrade to 1.0 or TanStack AI vs Vercel AI SDK.

What you get#

• Type safety. Tool inputs, model options, and message parts are typed from your schemas and the model you pick.
• Streaming. Responses stream token by token, from the server route to the UI.
• Isomorphic tools. Define a tool once with toolDefinition(). Run it on the server with .server() or in the browser with .client().
• Any provider. OpenRouter, OpenAI, Anthropic, Gemini, Ollama, and more. Swap the adapter, keep the code.
• Any framework. React, Vue, Solid, Svelte, Preact, Angular, Octane, Remix, or no framework.

Later, when you need them:

• Approvals. Pause a tool call until a person says yes. See Tool Approval.
• Typed decisions. Ask choice, score, and boolean questions with decide(). See Evaluate.
• Bring your own key. Users paste their own provider key in the browser. See Bring Your Own Key.

How it works#

A chat has two halves:

1. The server calls chat() with an adapter and the messages. It returns the stream as a Response.
2. The client calls a hook such as useChat(). The hook sends messages to your server route and renders the parts as they arrive.

Tools fit into the same loop. When the model calls a tool, TanStack AI runs it, sends the result back to the model, and keeps streaming.

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

const products = [
  { id: '1', name: 'Blue mug' },
  { id: '2', name: 'Red mug' },
]

const getProductsDef = toolDefinition({
  name: 'getProducts',
  description: 'Search for products by query',
  inputSchema: z.object({ query: z.string() }),
  outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
})

const getProducts = getProductsDef.server(async ({ query }) =>
  products.filter((product) => product.name.toLowerCase().includes(query)),
)

const stream = chat({
  adapter: openaiText('gpt-6.1-sol'),
  messages: [{ role: 'user', content: 'Find mugs' }],
  threadId: 'thread-1',
  tools: [getProducts],
})

Learn by building#

Each tutorial builds one small app from start to finish:

• Basic Chat: a streaming React chat. The key stays in the browser tab.
• Generate Image: an image from a prompt.
• Streaming Structured Table: a typed table that fills in from chat({ outputSchema }).
• Subagents: a researcher, an SEO agent, and a writer in one blog-writing chat.
• Build an MCP Server: serve a tool, a resource, and a prompt.
• Computer Use: let the model use a web page from screenshots.

Reference#

Where it runs#

The core works in any JavaScript runtime. These hosts are common:

Core packages#

Vue, Svelte, Preact, Angular, and Remix have their own packages too. See the API reference for each one.

Provider adapters#

Each adapter is its own package. Install only the ones you use.

The Adapters section of the sidebar has a page for each provider.