Vercel AI SDK: From Chat UI to Agent Loop
Building production AI applications with Vercel AI SDK 6: the streaming architecture from React hooks to API routes, ToolLoopAgent for agentic workflows with cost controls, structured output with generateObject, provider switching with model tiering, and the failure modes you need to handle before shipping.
Quick Reference
- →useChat(): manages conversation state, streaming, loading, and error recovery — one hook replaces hundreds of lines of React state management
- →streamText() / generateText(): server-side streaming or blocking generation — match the function to the UX, not to preference
- →generateObject() / streamObject(): schema-validated structured output via Zod — more reliable than prompting for JSON, promoted to stable in SDK 6
- →ToolLoopAgent (SDK 6): first-class agent loop with stopWhen for termination, needsApproval for HITL, and prepareStep for per-iteration prompt control
- →Provider-agnostic: swap between Anthropic, OpenAI, Google by changing one import — tools, prompts, and UI code stay identical
- →Model tiering: route classification to claude-haiku-4-5-20251001 ($cheap), generation to claude-sonnet-4-6 ($moderate) — same interface, different cost
- →DevTools (SDK 6): inspect LLM calls, tool invocations, and agent loop steps in development — eliminates console.log debugging
When AI SDK Is the Right Choice
The Vercel AI SDK solves a specific problem: getting streaming AI responses into React UIs with minimal boilerplate. It is not a general-purpose agent framework. Before picking it, understand what you are actually optimizing for.
| Criterion | Vercel AI SDK | LangGraph / LangChain |
|---|---|---|
| Primary audience | Frontend / fullstack engineers | Backend / ML engineers |
| Streaming UI | First-class — built into every hook | Supported but requires manual setup |
| React hooks | useChat, useCompletion — ship in minutes | No built-in UI layer |
| Tool definition | Zod schemas — TypeScript-native inference | JSON Schema or Pydantic |
| Single-agent loop | ToolLoopAgent (SDK 6) | ReAct agent, Plan-and-Execute |
| Multi-agent orchestration | Not built-in | Supervisor, swarm, handoffs — first-class |
| State persistence across sessions | Middleware / custom | Built-in checkpointers (SQLite, Postgres, Redis) |
| Best for | Chat UIs, streaming apps, Next.js | Complex stateful pipelines, multi-agent systems |
AI SDK 6 shipped ToolLoopAgent, which handles the full generate → execute tools → feed back loop. This covers 80% of agentic use cases. What it does NOT do: supervisor patterns, agent handoffs, swarm coordination, or shared checkpointed state across agents. For those patterns, use LangGraph. You can use both in the same project.
A SaaS company building customer support shipped AI SDK for the chat interface and ticket streaming. Their backend pipeline — ticket classification, routing to specialized agents, priority escalation — runs on LangGraph with a Postgres checkpointer. The two systems share a message format but operate independently. Neither tried to do the other's job.
useChat sends messages to the API route, which streams tokens back via Server-Sent Events