TanStack AI vs Vercel AI SDK

Pick TanStack AI for a new app. Stay on the Vercel AI SDK if your app already speaks its UI Message Stream protocol.

Both are open-source TypeScript toolkits. Both stream chat, call tools, talk to many providers, and run on any host. TanStack AI streams the open AG-UI protocol. The Vercel AI SDK streams its own protocol.

Pick TanStack AI when#

• You want an open protocol. The server and the client talk AG-UI, in both directions. Any AG-UI agent or client can sit on the other side of the wire.
• You want typed models. Pick a model and TypeScript narrows the options and input types to what that model supports. See Per-Model Type Safety.
• You want to define a tool once. One schema gives the input and output types on the server and on the client. Add .server() or .client() to run it on either side. See Tools.
• You want to own the UI. Text, thinking, tool calls, and tool results arrive as typed message parts, each with its own state. Render them however you like. See UI.
• You want to own your data. Persistence writes to your database, in your schema. A reload in the middle of a reply loses nothing, because each chunk goes to a log before delivery. See Persistence and Resumable Streams.

TanStack AI also does the hard parts. Each one is its own package, so you load only what the task needs:

• Code Mode. The model chains your tools in one script and runs it in an isolate. See Code Mode.
• Coding-agent harnesses. Run Claude Code, Codex, OpenCode, Grok Build, or any ACP agent as a chat backend, in a local process or a sandbox. See Sandboxes.
• MCP and MCP Apps. A typed MCP client, a CLI that generates the types, and interactive widgets from tool results. See MCP Apps.
• Memory and compaction. Recall across sessions through Redis, mem0, Honcho, or Hindsight. Compaction keeps long threads inside the context window. See Memory and Compaction.
• Media beyond chat. Images, video, speech, transcription, music, realtime voice, and live worlds use the same adapters and persistence as chat. See Generations.

Devtools show each tool call, interrupt, memory recall, and finish reason, on the server and in the client, in one timeline. See Devtools.

Stay on the Vercel AI SDK when#

Your app already speaks the AI SDK stream protocol. For example, your UI uses @ai-sdk/react or AI Elements, or a backend that you do not control emits the UI Message Stream. TanStack AI does not read or write that protocol.

Vercel AI Gateway is not a reason to stay. TanStack AI has a native Vercel AI Gateway adapter for chat, embeddings, and images.

Your provider is not listed#

1. Try OpenRouter, Vercel AI Gateway, or openaiCompatible. They reach most providers today.
2. Ask for a first-party adapter in GitHub Discussions.
3. To build one yourself, follow the community adapter guide.

Try TanStack AI in 5 minutes#

1. Install the packages for your framework:

npm i @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

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

yarn add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

bun add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

2. Put OPENAI_API_KEY in the environment of your server.

3. Add a server route. This is the TanStack AI version of streamText(...).toUIMessageStreamResponse():

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

export async function POST(request: Request) {
  const { messages, threadId, runId } = await chatParamsFromRequest(request)

  const stream = chat({
    adapter: openaiText('gpt-6.1-sol'),
    messages,
    threadId,
    runId,
  })

  return toServerSentEventsResponse(stream)
}

4. Render the chat with useChat. This React example reads text parts from each message:

import { useState } from 'react'
import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'

export function Chat() {
  const [input, setInput] = useState('')
  const { messages, sendMessage } = useChat({
    connection: fetchServerSentEvents('/api/chat'),
    threadId: 'support-chat',
  })

  return (
    <>
      {messages.map((message) => (
        <div key={message.id}>
          {message.parts.map((part, index) =>
            part.type === 'text' ? <p key={index}>{part.content}</p> : null,
          )}
        </div>
      ))}
      <form
        onSubmit={(event) => {
          event.preventDefault()
          sendMessage(input)
          setInput('')
        }}
      >
        <input value={input} onChange={(event) => setInput(event.target.value)} />
        <button type="submit">Send</button>
      </form>
    </>
  )
}

Send a message. The reply streams into the page. Other frameworks are in the Quick Start.

How the core APIs map#

Every option, result member, and hook difference is in Migration from Vercel AI SDK.

Feature comparison#

Versions: Vercel AI SDK ai@7.x and TanStack AI 1.0.

To move an app, start with Migration from Vercel AI SDK.