TanStack AI Beta: Provider-Agnostic AI Hooks for React and TypeScript

You saw TanStack AI Beta and wondered if you need another AI library

You read the headline, checked your package.json, and sighed. Another AI toolkit. Another week where the chat demo works in staging and the production wiring still feels like duct tape.

TanStack AI Beta is not another wrapper around one vendor API. The TanStack team shipped it on June 9, 2026 as a framework-agnostic, provider-agnostic toolkit for teams who want AI features without rebuilding the app every time a model price sheet changes.

By the end of this walkthrough, you will know how useChat, useGeneration, and the multi-modal hook family fit into a normal React and TypeScript stack—and what actually changes when you swap OpenAI for Anthropic on a Friday afternoon.

What changed on June 9, 2026

The alpha landed in December 2025 with a clear pitch: no platform migration, no vendor lock-in, just adapters you own. Six months of releases later, Beta means the core APIs are stable, the client-server protocol is documented and versioned, and the surface area is wide enough to ship a real product.

That is a meaningful shift. Alpha asked you to bet on architecture. Beta asks you to build features. The team killed early prototypes, rebuilt adapters twice, and landed on a typed activity model where text, tools, images, audio, video, and realtime voice are first-class—not extras bolted onto a chat helper.

If you already trust TanStack Query or TanStack Router for frontend infrastructure, this release sits in the same mental bucket: boring primitives, sharp types, and escape hatches when you outgrow the defaults.

Why provider-agnostic hooks beat vendor-shaped abstractions

Most AI client libraries secretly assume one cloud. Your UI hooks, streaming parser, and tool-call types all inherit that assumption. When pricing shifts or a model deprecates, you refactor UI code—not just an env var.

TanStack AI splits the problem cleanly. Adapters talk to providers. Activities like chat() and generateAudio() orchestrate those adapters. React hooks like useChat connect your components to a transport. Swap the adapter import; keep the hook shape.

For full-stack JavaScript teams, that separation mirrors good backend design: business logic does not live inside the HTTP client. Your chat UI should not live inside OpenAI-specific streaming assumptions either.

useChat: the hook you will actually reach for first

useChat from @tanstack/ai-react is the front door. It manages message state, loading flags, and the send flow while you focus on rendering. The hook does not dictate markup—you render messages however your design system wants.

The connection layer is explicit. You pass a transport factory such as fetchServerSentEvents('/api/chat') so the same hook can talk to a Next.js route, an Express handler, or a Cloudflare Worker behind your API gateway.

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

export function SupportChat() {
  const { messages, sendMessage, isLoading, error } = useChat({
    connection: fetchServerSentEvents('/api/chat'),
  });

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}>{m.role}: {m.content}</p>
      ))}
      <button
        disabled={isLoading}
        onClick={() => sendMessage('Where is order ORD-4421?')}
      >
        Send
      </button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

Devtools integration ships out of the box, which matters when you are debugging why the assistant message stopped mid-stream at 2 a.m.

Wiring useChat to your Express or Next.js API

On the server, chat() accepts an adapter and message array, then returns a stream you convert to Server-Sent Events. That pattern fits Node.js handlers whether you use Express, Fastify, or the App Router.

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

export async function POST(request: Request) {
  const { messages } = await request.json();

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

  return toServerSentEventsResponse(stream);
}

Your React component never imports the provider package. That boundary keeps frontend bundles smaller and makes provider swaps a server-side change.

useGeneration for streaming structured output

Chat is not the only UI pattern. Forms, dashboards, and wizards often need typed JSON arriving progressively—not a paragraph of prose. That is where useGeneration enters.

It streams structured objects as they are generated, so your UI can render partial results before the model finishes. A product configurator can show fields as they appear. A ticket triage panel can populate severity and category while tokens still flow.

When typed objects beat raw token streams

Raw token streams force you to guess boundaries with regex or fragile JSON repair. Structured generation keeps schema and UI in sync because TypeScript knows the shape on both sides of the wire.

import { fetchServerSentEvents, useGeneration } from '@tanstack/ai-react';
import type { TriageResult } from '../schemas/triage';

export function TriagePanel() {
  const { object, submit, isLoading } = useGeneration<TriageResult>({
    connection: fetchServerSentEvents('/api/triage'),
  });

  return (
    <div>
      <button onClick={() => submit('Customer angry about late shipment')} disabled={isLoading}>
        Analyze
      </button>
      {object?.severity && <p>Severity: {object.severity}</p>}
      {object?.category && <p>Category: {object.category}</p>}
    </div>
  );
}

The hook family shares the same connection model as useChat, so once you understand one, the others feel familiar instead of like a new framework each time.

Multi-modal hooks beyond text chat

Beta treats every major modality as a typed activity with a matching React hook. You are not jamming image generation into a chat callback and hoping the types forgive you.

The hook list reads like a checklist for modern AI products: useGenerateImage, useGenerateAudio, useGenerateSpeech, useTranscription, useSummarize, useGenerateVideo, and useRealtimeChat. Same shape, same devtools story, different adapter on the server.

Image, audio, video, and realtime voice

Providers ship small, capability-split adapters instead of one monolith. You might import openaiText for chat and geminiAudio for music generation in the same app without conflicting client assumptions.

import { generateAudio } from '@tanstack/ai';
import { geminiAudio } from '@tanstack/ai-gemini';

const result = await generateAudio({
  adapter: geminiAudio('lyria-3-pro-preview'),
  prompt: 'A cinematic orchestral piece with a rising string motif',
});

Realtime voice chat routes through OpenAI Realtime over WebRTC or ElevenLabs over WebSocket—again behind one provider-agnostic architecture. Your React hook stays put; the adapter picks the transport.

For frontend engineers building creative tools or support copilots, that consistency cuts integration time. You learn one hook lifecycle, then reuse it across modalities.

Swapping providers without rewriting your UI

Provider swaps should feel like changing a database driver, not rewriting a product. TanStack AI Beta makes that literal: change the adapter import and model string on the server.

// Before
import { openaiText } from '@tanstack/ai-openai';
const stream = chat({ adapter: openaiText('gpt-5.2'), messages });

// After
import { anthropicText } from '@tanstack/ai-anthropic';
const stream = chat({ adapter: anthropicText('claude-opus-4-6'), messages });

Your React useChat call does not change. Your SSE endpoint path does not change. Only the adapter line moves—which is exactly how backend engineering should work when a vendor quote arrives.

OpenAI, Anthropic, Gemini, and the long tail

Official adapter packages cover the names you expect: @tanstack/ai-openai, @tanstack/ai-anthropic, @tanstack/ai-gemini, plus Groq, Ollama, OpenRouter, and others. Install the provider package you need; skip the rest.

Per-model type safety goes further than a generic options bag. Model-specific capabilities—native web search, code execution, modality support—are gated at the type level. Wire an incompatible tool to a model and TypeScript flags it at the call site instead of letting production fail quietly.

That detail matters for platform teams running multiple models behind feature flags. You catch misconfiguration in CI, not in a customer thread.

How the server side stays boring on purpose

TanStack AI is TypeScript-first end to end, but the architecture respects a classic split: smart server, thin client. Activities like chat(), generateAudio(), and tool execution belong in Node.js services where secrets stay off the bundle.

Tool definitions support isolated server and client implementations with types that hold across the whole app. Summarization ships as a built-in activity. Image and video generation follow the same adapter-in, typed-result-out pattern as text.

If you deploy on AWS, GCP, or a bare VPS, nothing here requires a proprietary hosting layer. You bring your own infra, env vars, and observability stack—same as any other backend service.

AG-UI, the wire protocol, and why it matters

The client and server talk over a documented, versioned protocol built on AG-UI events—not a one-off JSON stream with a compatibility shim. Beta stabilizes that contract so you can swap transports without forking the React hooks.

Speak the protocol over HTTP, WebSockets, or RPC via a connection adapter, and the TanStack client keeps working. That opens a door many teams need: a Python or Rust agent backend with a React frontend that does not care about the language behind the endpoint.

AG-UI-compliant frameworks—LangGraph, CrewAI, Mastra, Microsoft Agent Framework, and others—can sit behind the same frontend. Your React app stays provider-agnostic at the UI layer and agent-agnostic at the wire layer.

Vanilla JS, Solid, Vue, Svelte, and Preact clients ship alongside React. If your org standardizes on Vue for one product and React for another, the protocol—not the hook import—is the shared contract.

Production pieces: middleware, MCP, and agent workflows

A toy chat endpoint is fifty lines. Production endpoints accrete logging, redaction, caching, tracing, and tool discovery until nobody wants to touch the file. Beta ships primitives aimed at that reality.

Middleware that keeps chat endpoints from turning into monsters

Middleware hooks into every stage of the chat() lifecycle. You can observe, transform, or short-circuit behavior before bad requests burn tokens. Built-in middleware covers tool-result caching, content redaction, and OpenTelemetry tracing.

const stream = chat({
  adapter: openaiText('gpt-5.2'),
  messages,
  debug: { provider: true, middleware: true, tools: true },
});

Debug mode is one flag with per-category toggles. Raw provider chunks, middleware inputs and outputs, tool execution, and agent-loop iterations each get their own switch. When streaming fails mysteriously, you finally have visibility on both sides of the connection.

Host-side MCP and experimental orchestration

Host-side MCP connects one Model Context Protocol server or a pool of them, with lifecycle modes from zero-config discovery to fully generated end-to-end types. Lazy tool discovery stops you from stuffing every tool definition into context when the model only needs two.

Experimental orchestration adds generator-based workflows, typed agent calls, human-in-the-loop approvals, SSE streaming, and React hooks for multi-step agentic systems. Code Mode lets a model compose your tools with loops and conditionals inside a sandbox instead of one round trip per call.

None of that replaces your system design homework. It does give you typed building blocks so agent features do not all become bespoke Node.js spaghetti.

TanStack AI Beta vs what you might already use

If you are on the Vercel AI SDK, you already have solid React hooks. TanStack's docs include an honest feature comparison—including places Vercel is ahead. The trade is familiar: Vercel optimizes for its ecosystem; TanStack optimizes for stack neutrality.

Pick TanStack when provider and framework flexibility rank above zero-config deployment to one host. Pick a vendor SDK when you want the tightest integration with that vendor's hosted tools and you accept the coupling.

Many teams will use both in different services. Shared AG-UI events make that less painful than it sounds.

Summary

TanStack AI Beta, announced June 9, 2026, is the mature release of a provider-agnostic, framework-agnostic AI toolkit for TypeScript teams. useChat and useGeneration cover the two UI patterns you hit most—conversation and structured streaming—while hooks like useGenerateImage, useTranscription, and useRealtimeChat extend the same model to audio, video, and voice.

Swapping OpenAI for Anthropic is an adapter change on the server, not a React rewrite. AG-UI grounds the wire protocol so Python or Rust agent backends can feed the same frontend. Middleware, MCP hosting, debug tooling, and per-model type safety target production pain, not demo polish.

Start with one endpoint and one hook. Prove provider swap on a branch. Then expand modalities once the boring path works.

FAQ

Is TanStack AI Beta production-ready?

Beta means core APIs and the client-server protocol are stable enough to build on—not that every experimental feature is frozen. The team runs 265 deterministic end-to-end tests across ten LLM providers on every pull request. Prototype your riskiest workflow first, then promote what survives load testing.

How does useChat compare to Vercel AI SDK useChat?

Both manage message state and streaming for React. TanStack's version emphasizes provider-agnostic connections and AG-UI events over a documented protocol. Vercel's hook is deeply integrated with its ecosystem and hosted patterns. Compare your lock-in tolerance and backend language requirements—not just hook ergonomics.

Can I use TanStack AI with Vue or Svelte instead of React?

Yes. Packages exist for Vue, Svelte, Solid, and Preact alongside React. The server activities and adapters are shared; only the client hook import changes. That is the point of splitting adapters, activities, and framework bindings.

Do I need TypeScript on the backend too?

The toolkit is TypeScript-first and the happiest path is Node.js with typed adapters. The AG-UI protocol is language-agnostic, so a Python LangGraph or CrewAI server can power the same React frontend if it speaks the events correctly.

Which providers ship official adapters?

Beta includes adapters for OpenAI, Anthropic, Gemini, Groq, Ollama, OpenRouter, fal, and ElevenLabs among others—split by capability such as text, audio, and image rather than one mega package. Check the TanStack AI docs for the current list because adapter coverage expanded quickly during the alpha cycle.

How do I debug streaming failures in development?

Enable the debug flag on server activities with per-category toggles for provider, middleware, and tools. Isomorphic devtools built on TanStack Devtools show both sides of the connection. When a chunk goes missing, you can see whether the adapter, middleware, or client parser dropped it.