Vercel AI SDK 6: TypeScript-First Agent Framework

What AI SDK 6 Brings

Vercel AI SDK 6, released in December 2025, is the sixth major version of the leading TypeScript toolkit for building AI applications. With over 20 million monthly npm downloads, the SDK provides a unified API for connecting to any AI provider -- OpenAI, Anthropic, Google, xAI, Ollama, and more -- through a single, model-agnostic interface. Version 6 represents the largest architectural shift since the SDK's inception, introducing first-class agent primitives, stable MCP support, and purpose-built DevTools for debugging AI workflows.

The headline feature is the Agent abstraction. In v6, Agent is an interface rather than a class, and ToolLoopAgent provides the production-ready default implementation. You define an agent once with its model, instructions, and tools, then reuse it across your entire application -- in API routes, Server Actions, background jobs, and streaming UIs. The agent handles the complete tool execution loop: call the LLM, execute any requested tool calls, add results back to the conversation, and repeat until a stop condition is reached.

Other major additions include human-in-the-loop tool approval via the needsApproval flag, stable structured outputs with tool calling, native MCP client integration for connecting to any MCP server, and AI SDK DevTools for inspecting token usage, execution flows, and raw provider requests. Version 6 also replaces REST-based /api/chat endpoints with native Server Actions, eliminating boilerplate and enabling end-to-end type safety between server-side model calls and client-side React components.

v5 to v6 Migration Guide

Upgrading from AI SDK 5 to 6 is streamlined by the official codemod. Run npx @ai-sdk/codemod v6 to automatically migrate the majority of breaking changes. The codemod handles import path updates, renamed parameters, and deprecated API replacements. Manual review is still recommended for custom agent implementations.

The most significant breaking change is the replacement of Experimental_Agent with ToolLoopAgent. The system parameter is renamed to instructions, and the default stopWhen changes from stepCountIs(1) to stepCountIs(20). If your v5 code relied on single-step agent behavior, you must explicitly set stopWhen: stepCountIs(1) in v6 to preserve the old behavior.

// v5 (deprecated)
import { Experimental_Agent } from 'ai';

const agent = new Experimental_Agent({
  model: openai('gpt-4o'),
  system: 'You are a helpful assistant.',
  tools: { myTool },
  stopWhen: stepCountIs(1)
});

// v6 (current)
import { ToolLoopAgent } from 'ai';

const agent = new ToolLoopAgent({
  model: openai('gpt-4o'),
  instructions: 'You are a helpful assistant.',
  tools: { myTool },
  // Default: stopWhen: stepCountIs(20)
});

Other migration highlights: /api/chat REST routes should migrate to Server Actions for type safety and reduced boilerplate. The experimental_createMCPClient function is now the stable createMCPClient. Provider imports remain unchanged. The useChat hook now connects to Server Actions by default, but REST endpoint support is preserved for backward compatibility.

The Agent Abstraction and ToolLoopAgent

The core innovation of AI SDK 6 is treating agents as reusable, composable primitives. The Agent interface defines the contract: a model, instructions, tools, and a stop condition. ToolLoopAgent implements this interface with a production-ready reasoning-and-acting loop that handles tool execution, result collection, and iterative reasoning.

Unlike single-shot generateText() calls, a ToolLoopAgent can invoke tools, collect results, reason over them, invoke more tools, and repeat until the stop condition is reached. This enables autonomous multi-step workflows: research agents that search, summarize, and synthesize; coding agents that plan, implement, and test; and data agents that query, analyze, and report.

import { ToolLoopAgent, generateText, streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';
import { tool } from 'ai';
import { z } from 'zod';

const researchAgent = new ToolLoopAgent({
  model: anthropic('claude-sonnet-4-5'),
  instructions: 'You are a research assistant. Search for information, analyze results, and provide comprehensive answers.',
  tools: {
    search: tool({
      description: 'Search the web for information',
      parameters: z.object({
        query: z.string().describe('Search query'),
      }),
      execute: async ({ query }) => {
        // Your search implementation
        return await searchWeb(query);
      },
    }),
    analyze: tool({
      description: 'Analyze a text document',
      parameters: z.object({
        text: z.string(),
        focus: z.string().describe('Analysis focus area'),
      }),
      execute: async ({ text, focus }) => {
        return await analyzeText(text, focus);
      },
    }),
  },
  // Runs up to 10 reasoning steps
  stopWhen: stepCountIs(10),
});

// Use the same agent for text generation
const result = await generateText({ agent: researchAgent, prompt: 'Compare React and Vue in 2026' });

// Or for streaming
const stream = await streamText({ agent: researchAgent, prompt: 'Analyze the latest AI trends' });

You can also implement the Agent interface directly for custom abstractions. This is useful when you need non-standard loop behavior, such as agents that collaborate with other agents, agents that switch models mid-conversation based on task complexity, or agents with custom memory systems that persist across sessions.

Human-in-the-Loop Tool Approval

AI SDK 6 introduces needsApproval as a first-class property on tool definitions. This enables human-in-the-loop safety for sensitive operations without building custom approval infrastructure. When a tool requires approval, the agent pauses execution and surfaces the tool call to the user for review.

There are two modes: static approval (always require approval with needsApproval: true) and dynamic approval (conditionally require approval based on the tool's input parameters). Dynamic approval is powerful for graduated safety: small payments execute automatically, large payments require human review.

import { streamText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

// Server Action
export async function chat(messages) {
  'use server';
  return streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      // Static: always requires approval
      deleteUser: tool({
        description: 'Delete a user account',
        parameters: z.object({ userId: z.string() }),
        needsApproval: true,
        execute: async ({ userId }) => {
          return await deleteUserAccount(userId);
        },
      }),
      // Dynamic: approval only for amounts over 1000
      processPayment: tool({
        description: 'Process a payment',
        parameters: z.object({
          amount: z.number(),
          recipient: z.string(),
        }),
        needsApproval: async ({ amount }) => amount > 1000,
        execute: async ({ amount, recipient }) => {
          return { status: 'processed', amount, recipient };
        },
      }),
    },
  });
}

On the frontend, the useChat hook surfaces the approval-requested state. You check for pending tool approvals and render approve/deny buttons. The addToolApprovalResponse function from useChat sends the user's decision back to the server, where the agent either executes the tool or skips it and continues reasoning.

Native MCP Client Integration

AI SDK 6 ships with stable MCP support through createMCPClient(). This function connects to any MCP server and makes its tools available through the same interface as native AI SDK tools. You can mix MCP tools with SDK-defined tools in a single agent, giving you the best of both worlds: the MCP ecosystem's 50+ community servers alongside your custom tool definitions.

The MCP client supports both Stdio transport (for local servers) and Streamable HTTP transport (for remote servers). Once connected, you access server tools via client.tools() and pass them directly to your agent or generateText()/streamText() calls. The integration is transparent -- the AI model sees no difference between MCP tools and native tools.

import { createMCPClient, generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

// Connect to a local MCP server via Stdio
const githubClient = await createMCPClient({
  transport: {
    type: 'stdio',
    command: 'npx',
    args: ['-y', '@modelcontextprotocol/server-github'],
    env: { GITHUB_TOKEN: process.env.GITHUB_TOKEN },
  },
});

// Connect to a remote MCP server via Streamable HTTP
const dbClient = await createMCPClient({
  transport: {
    type: 'streamable-http',
    url: 'https://mcp.internal.company.com/db',
    headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
  },
});

// Combine MCP tools with native tools
const result = await generateText({
  model: anthropic('claude-sonnet-4-5'),
  tools: {
    ...await githubClient.tools(),
    ...await dbClient.tools(),
    myCustomTool: tool({ /* ... */ }),
  },
  prompt: 'Check the latest PR on my repo and query the database for related issues',
});

// Clean up connections
await githubClient.close();
await dbClient.close();

DevTools for Agent Debugging

AI SDK DevTools provides full visibility into LLM calls and agent execution. Launch the viewer with npx @ai-sdk/devtools and open http://localhost:4983 to inspect your runs. Every step of every call is recorded: input messages, output text, model configuration, token usage, timing, tool calls, tool results, and raw provider HTTP requests and responses.

For multi-step agent loops, DevTools shows each iteration as a separate step within the run. You can see exactly which tools the agent called at each step, what results were returned, and how the agent reasoned about them before deciding on the next action. This is invaluable for debugging agents that take unexpected paths, consume too many tokens, or get stuck in loops.

DevTools integrates with Next.js development workflows. Next.js 16.2 ships Agent DevTools for debugging AI integrations directly from the Next.js dev server. The combined tooling provides end-to-end observability from the React component rendering the streaming response all the way down to the raw HTTP request sent to the model provider.

Streaming UI in Next.js with useChat and useCompletion

The useChat hook is the primary interface for building chat UIs with AI SDK 6. It manages the full conversation lifecycle: appending user messages, streaming assistant responses token by token, maintaining conversation history, and handling errors. In v6, useChat connects directly to Server Actions instead of REST endpoints, enabling end-to-end type safety and eliminating the need for separate /api/chat routes.

The useCompletion hook handles single-prompt text completions for use cases like autocomplete, summarization, and inline suggestions. Both hooks support all AI SDK features including tool calls, structured output, and human-in-the-loop approval. The streaming is powered by the Node.js ReadableStream API, ensuring compatibility with edge runtimes and serverless functions.

// app/actions.ts - Server Action
'use server';
import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export async function chat(messages) {
  return streamText({
    model: anthropic('claude-sonnet-4-5'),
    messages,
  });
}

// app/page.tsx - Client Component
'use client';
import { useChat } from '@ai-sdk/react';
import { chat } from './actions';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: chat, // Direct Server Action reference
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} placeholder="Ask something..." />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

Provider Switching: Claude, GPT, Gemini, Ollama

AI SDK 6 is model-agnostic by design. Every provider follows the same interface: you import the provider package, pass a model string, and the returned model object works with generateText(), streamText(), generateObject(), and ToolLoopAgent without any code changes. Switching from Claude to GPT to Gemini requires changing exactly two lines of code -- the import and the model string.

import { generateText } from 'ai';

// Anthropic Claude
import { anthropic } from '@ai-sdk/anthropic';
const result1 = await generateText({ model: anthropic('claude-sonnet-4-5'), prompt: 'Hello' });

// OpenAI GPT
import { openai } from '@ai-sdk/openai';
const result2 = await generateText({ model: openai('gpt-4o'), prompt: 'Hello' });

// Google Gemini
import { google } from '@ai-sdk/google';
const result3 = await generateText({ model: google('gemini-2.5-pro'), prompt: 'Hello' });

// Ollama (self-hosted)
import { ollama } from 'ollama-ai-provider';
const result4 = await generateText({ model: ollama('llama3.3'), prompt: 'Hello' });

// Any OpenAI-compatible endpoint
import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
const custom = createOpenAICompatible({ baseURL: 'https://my-server.com/v1' });
const result5 = await generateText({ model: custom('my-model'), prompt: 'Hello' });

The Vercel AI Gateway adds model routing, cost controls, and fallback chains on top of the SDK's provider system. Route requests to different models based on task complexity, set spending limits per model, and configure automatic fallback to cheaper models when primary providers experience downtime. The gateway is optional -- the SDK works directly with providers without it.

As of April 2026, the AI Gateway now supports over 50 models including Claude Opus 4.7 and GPT Image 2. The Voyage AI provider (@ai-sdk/voyage) adds embeddings and reranking capabilities from Voyage AI directly through the SDK interface, enabling semantic search and RAG pipelines without separate HTTP calls. The growing provider ecosystem means AI SDK 6 covers every major model family for text generation, image generation, embeddings, and reranking in a single unified API.

Deploying on Vercel Agentic Infrastructure

Agent workloads have fundamentally different requirements than traditional web applications. They need long-lived execution for multi-step reasoning, orchestration primitives for pause/resume workflows, model routing for cost optimization, sandboxed environments for code execution, and abuse resistance for public-facing agents. Vercel's Agentic Infrastructure addresses all of these.

The platform includes four key components: AI Gateway for model routing, rate limiting, and cost controls across all providers. Fluid Compute optimized for AI workloads with dynamic scaling based on token throughput rather than request count. Workflows and Queues that let agents pause execution (waiting for human approval, external API responses, or scheduled resumption) and resume without losing state. Sandbox for isolated code execution environments where agents can safely run generated code.

The shift is significant: over 30% of weekly deployments on Vercel are now initiated by coding agents, up 1,000% from six months prior. This has driven platform optimizations specifically for agent patterns -- longer function execution times, streaming-first infrastructure, and built-in token metering. You can deploy AI SDK 6 agents on other platforms (AWS Lambda, Cloudflare Workers, self-hosted Node.js), but Vercel's infrastructure provides the tightest integration with the SDK.

Comparison: AI SDK 6 vs LangChain JS vs Mastra

The TypeScript AI framework landscape in 2026 has three major contenders. Vercel AI SDK 6 excels at streaming UI and React/Next.js integration. LangChain JS offers the broadest ecosystem for complex RAG pipelines and agent chains. Mastra, which uses AI SDK primitives internally, provides the cleanest agent abstraction with built-in workflow orchestration, vector search, and a local dev UI.

Mastra uses AI SDK primitives under the hood for LLM interactions, which means you get the best of both worlds: Mastra's clean agent abstraction and workflow orchestration with AI SDK's streaming and provider ecosystem. For pure Next.js streaming chat applications, AI SDK 6 alone provides the most direct path with minimal dependencies. For complex multi-agent systems with memory, RAG, and workflow orchestration, consider Mastra on top of AI SDK. For Python-first teams or projects requiring LangChain's mature retrieval ecosystem, LangChain JS is the pragmatic choice despite the larger bundle. For production AI agent architecture, see also the Claude Agent SDK guide and the Full-Stack AI guide.