{"slug": "tanstack-ai-beta-code-mode-middleware-and-mcp-are-here", "title": "TanStack AI Beta: Code Mode, Middleware, and MCP Are Here", "summary": "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.", "body_md": "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.\n\n## Code Mode: Let the Model Write the Program\n\nThe 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.\n\nWith Code Mode enabled, the model writes a TypeScript program that orchestrates your tools with loops, conditionals, and `Promise.all`\n\n— 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.\n\n``` js\nimport { codeMode } from \"@tanstack/ai-code-mode\";\n\nconst adapter = codeMode({\n  adapter: openaiText(\"gpt-5.5\"),\n  driver: \"quickjs-wasm\", // also: \"node-v8\", \"cloudflare-worker\"\n  tools: { getWeather, searchDatabase, formatData },\n});\n```\n\nThe 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.\n\n## Middleware: AI Finally Has Production-Grade Observability\n\nThe Alpha was fine for prototyping. The Beta is a different story. Middleware hooks into every stage of the `chat()`\n\nlifecycle, and TanStack ships three built-in middlewares that cover the most common production needs:\n\n``` js\nconst stream = chat({\n  adapter: openaiText(\"gpt-5.5\"),\n  messages,\n  middleware: [\n    toolResultCache({ ttl: 60_000 }),\n    contentRedaction({ patterns: [/SSN:\\s*\\d+/g] }),\n    openTelemetryTracing({ serviceName: \"my-app\" }),\n  ],\n});\n```\n\nTool 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.\n\n## Provider Swap in One Line\n\nThe 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:\n\n``` js\n// OpenAI\nimport { openaiText } from \"@tanstack/ai-openai\";\nconst adapter = openaiText(\"gpt-5.5\");\n\n// Anthropic — only this changes\nimport { anthropicText } from \"@tanstack/ai-anthropic\";\nconst adapter = anthropicText(\"claude-sonnet-4-6\");\n```\n\nThe 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.\n\n## MCP Integration\n\nHost-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:\n\n``` js\nconst tools = await mcpServer({\n  transport: \"stdio\",\n  command: \"npx\",\n  args: [\"-y\", \"@modelcontextprotocol/server-filesystem\"],\n  lifecycle: \"managed\",\n});\n```\n\nThe `managed`\n\nlifecycle 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()`\n\n.\n\n## 265 E2E Tests and What Comes After\n\nThe 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.\n\nOne 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.\n\n## TanStack AI vs Vercel AI SDK: The Honest Read\n\nVercel 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).\n\nThe 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.\n\nInstall with `npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai`\n\nand start with the [official TanStack AI docs](https://tanstack.com/ai/latest/docs/getting-started/overview).", "url": "https://wpnews.pro/news/tanstack-ai-beta-code-mode-middleware-and-mcp-are-here", "canonical_source": "https://byteiota.com/tanstack-ai-beta-code-mode-middleware-mcp/", "published_at": "2026-06-21 16:11:33+00:00", "updated_at": "2026-06-21 16:39:37.067879+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "developer-tools", "large-language-models", "ai-infrastructure"], "entities": ["TanStack", "OpenAI", "Anthropic", "Google Gemini", "Mistral", "Grok", "Groq", "Ollama"], "alternates": {"html": "https://wpnews.pro/news/tanstack-ai-beta-code-mode-middleware-and-mcp-are-here", "markdown": "https://wpnews.pro/news/tanstack-ai-beta-code-mode-middleware-and-mcp-are-here.md", "text": "https://wpnews.pro/news/tanstack-ai-beta-code-mode-middleware-and-mcp-are-here.txt", "jsonld": "https://wpnews.pro/news/tanstack-ai-beta-code-mode-middleware-and-mcp-are-here.jsonld"}}