TanStack AI Beta: Code Mode, Middleware, and MCP Are Here

TanStack AI reached Beta on June 9, 2026, introducing Code Mode, middleware, and host-side MCP. Code Mode lets the model write and execute TypeScript programs in a sandbox, reducing round trips, while middleware adds caching, PII redaction, and OpenTelemetry tracing. The SDK supports ten providers with tree-shakable adapters and compile-time type safety.

TanStack AI hit Beta on June 9, 2026. If you missed the Alpha back in February, the pitch is simple: a TypeScript AI SDK that doesn’t care which framework you use, which cloud you’re on, or which model provider you’re paying. The Beta adds three features that make it production-credible — middleware, Code Mode, and host-side MCP. None of them are incremental. Together, they change what the SDK can actually do. Code Mode: Let the Model Write the Program The most interesting Beta addition isn’t middleware or MCP — it’s Code Mode, and it challenges a basic assumption in how most AI SDKs work. The standard model is tool calling: you define functions, the LLM decides which to call, the runtime executes them one at a time. Five tools means five round trips. Code Mode does it differently. With Code Mode enabled, the model writes a TypeScript program that orchestrates your tools with loops, conditionals, and Promise.all — then executes it once in an isolated sandbox. Five tool calls happen inside that program. One request, one response. The official TanStack AI Beta release post https://tanstack.com/blog/tanstack-ai-beta covers the full architecture. js import { codeMode } from "@tanstack/ai-code-mode"; const adapter = codeMode { adapter: openaiText "gpt-5.5" , driver: "quickjs-wasm", // also: "node-v8", "cloudflare-worker" tools: { getWeather, searchDatabase, formatData }, } ; The sandbox runs on QuickJS WASM no native deps, works in browsers and edge runtimes , V8 isolates Node.js , or a Cloudflare Worker. There’s no access to the host filesystem, network, or process — the model gets TypeScript with typed access to your tools, nothing else. This is arguably the right abstraction for agentic AI: instead of calling one function at a time and waiting for the orchestrator to decide what’s next, the model writes the orchestration itself. Middleware: AI Finally Has Production-Grade Observability The Alpha was fine for prototyping. The Beta is a different story. Middleware hooks into every stage of the chat lifecycle, and TanStack ships three built-in middlewares that cover the most common production needs: js const stream = chat { adapter: openaiText "gpt-5.5" , messages, middleware: toolResultCache { ttl: 60 000 } , contentRedaction { patterns: /SSN:\s \d+/g } , openTelemetryTracing { serviceName: "my-app" } , , } ; Tool result caching cuts latency and API costs for repeated queries. Content redaction strips PII before it reaches your logs or the model. OpenTelemetry tracing means your AI layer shows up in the same dashboards as everything else. These aren’t luxury features — they’re the minimum bar for running AI in production with confidence. That TanStack built them in, rather than leaving them as an exercise for the developer, matters. Provider Swap in One Line The core promise from Alpha still holds. TanStack AI has tree-shakable adapters for ten providers: OpenAI, Anthropic, Google Gemini, Mistral, Grok, Groq, Ollama, and OpenRouter which adds access to several hundred more . Switching providers means changing one import and one function call: js // OpenAI import { openaiText } from "@tanstack/ai-openai"; const adapter = openaiText "gpt-5.5" ; // Anthropic — only this changes import { anthropicText } from "@tanstack/ai-anthropic"; const adapter = anthropicText "claude-sonnet-4-6" ; The type system enforces this at compile time — pass reasoning flags meant for one model to another and TypeScript tells you on the line where you pass it, not at runtime. That’s the kind of type safety that makes provider experimentation practical instead of painful. MCP Integration Host-side MCP lets you connect a Model Context Protocol server with managed lifecycle and configurable type safety. The MCP docs https://tanstack.com/ai/latest/docs/tools/mcp cover both managed and manual lifecycle options: js const tools = await mcpServer { transport: "stdio", command: "npx", args: "-y", "@modelcontextprotocol/server-filesystem" , lifecycle: "managed", } ; The managed lifecycle means TanStack handles starting and stopping the MCP server. You can also go manual if your app manages the process yourself. Either way, the tools come back typed, ready to pass into chat . 265 E2E Tests and What Comes After The Beta ships with 265 end-to-end tests running across all ten providers on every pull request. That’s the number TanStack is leading with as a signal of production readiness, and it’s a reasonable one — this is the work that makes provider parity claims believable rather than aspirational. One other piece of context: TanStack’s npm packages were hit by the Mini Shai-Hulud supply chain attack in May 2026. The attack was detected in 26 minutes, all affected versions were deprecated, and TanStack published both a postmortem and a hardened CI/CD setup https://tanstack.com/blog/incident-followup . The Beta launching one month later, with the pipeline rebuilt, is worth noting. Supply chain credibility is table stakes for a dependency you’re pulling into a production app. TanStack AI vs Vercel AI SDK: The Honest Read Vercel AI SDK has 38+ provider packages, Angular support, and deep Next.js optimization. If you’re building on Next.js and want the fast path, it’s a reasonable default. But it has a soft platform pull — the observability, gateway routing, and deployment tooling all work best when you’re on Vercel. That’s not a conspiracy, it’s a business model. TanStack AI has no platform to sell you. It works on any framework, any cloud, any runtime. The full comparison is documented by the TanStack team https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk . The practical guidance: if your team is already on Next.js and shipping fast with Vercel AI SDK, don’t switch for the sake of it. If you’re on TanStack Router, Solid, Svelte, or anything that isn’t Next.js — or if you need Code Mode’s sandbox execution — TanStack AI Beta is worth a serious look. It’s Beta software, expect rough edges, but 265 E2E tests across 10 providers is not a small amount of validation. Install with npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai and start with the official TanStack AI docs https://tanstack.com/ai/latest/docs/getting-started/overview .