ai-sdk-v6
Guide for building AI-powered applications using the Vercel AI SDK v6. Use when developing with generateText, streamText, useChat, tool calling, agents, structured output generation, MCP integration, or any LLM-powered features in TypeScript/JavaScript applications. Covers React, Next.js, Vue, Svelte, and Node.js implementations.
When & Why to Use This Skill
The AI SDK v6 is a comprehensive TypeScript toolkit designed to streamline the development of AI-powered applications. It provides a unified API for integrating major LLM providers like Anthropic, OpenAI, and Google, while offering specialized components for UI rendering and agentic workflows. By abstracting complex tasks such as streaming, tool calling, and multi-step agent loops, it enables developers to build robust, production-ready AI features in React, Next.js, and Node.js environments with minimal boilerplate.
Use Cases
- Building real-time conversational interfaces: Utilizing 'useChat' and 'streamText' to create responsive, streaming chat components in Next.js or React applications.
- Developing autonomous agents: Implementing 'ToolLoopAgent' to handle complex, multi-step tasks where the AI must autonomously decide which tools to call and process the results.
- Structured data extraction: Using 'generateObject' with Zod schemas to force LLMs to output valid JSON for automated form filling, data migration, or content classification.
- Extending capabilities with MCP: Integrating Model Context Protocol (MCP) to allow AI agents to interact with external local or remote tools and data sources securely.
- Human-in-the-loop workflows: Setting up tool execution approvals to ensure sensitive actions (like shell commands or database writes) require manual user confirmation.
| name | ai-sdk-v6 |
|---|---|
| description | Guide for building AI-powered applications using the Vercel AI SDK v6. Use when developing with generateText, streamText, useChat, tool calling, agents, structured output generation, MCP integration, or any LLM-powered features in TypeScript/JavaScript applications. Covers React, Next.js, Vue, Svelte, and Node.js implementations. |
AI SDK v6
Overview
The AI SDK is the TypeScript toolkit for building AI-powered applications with React, Next.js, Vue, Svelte, Node.js, and more. It provides a unified API across multiple model providers (OpenAI, Anthropic, Google, etc.) and consists of:
- AI SDK Core: Unified API for text generation, structured data, tool calling, and agents
- AI SDK UI: Framework-agnostic hooks (
useChat,useCompletion,useObject) for chat interfaces
Quick Start
Installation
npm install ai @ai-sdk/openai # or @ai-sdk/anthropic, @ai-sdk/google, etc.
Basic Text Generation
import { generateText } from 'ai';
const { text } = await generateText({
model: 'anthropic/claude-sonnet-4.5', // or use provider-specific: anthropic('claude-sonnet-4.5')
prompt: 'Write a haiku about programming.',
});
Streaming Text
import { streamText } from 'ai';
const result = streamText({
model: 'anthropic/claude-sonnet-4.5',
prompt: 'Explain quantum computing.',
});
for await (const text of result.textStream) {
process.stdout.write(text);
}
Provider Configuration
Using Provider Functions
import { anthropic } from '@ai-sdk/anthropic';
import { openai } from '@ai-sdk/openai';
import { google } from '@ai-sdk/google';
// Provider-specific model initialization
const result = await generateText({
model: anthropic('claude-sonnet-4.5'),
prompt: 'Hello!',
});
Using Gateway Strings
// Simpler string-based model references
const result = await generateText({
model: 'anthropic/claude-sonnet-4.5',
prompt: 'Hello!',
});
Tool Calling
Define tools with schemas and execute functions:
import { generateText, tool, stepCountIs } from 'ai';
import { z } from 'zod';
const result = await generateText({
model: 'anthropic/claude-sonnet-4.5',
tools: {
weather: tool({
description: 'Get the weather in a location',
inputSchema: z.object({
location: z.string().describe('City name'),
}),
execute: async ({ location }) => ({
location,
temperature: 72,
condition: 'sunny',
}),
}),
},
stopWhen: stepCountIs(5), // Enable multi-step tool execution
prompt: 'What is the weather in San Francisco?',
});
Tool Execution Approval (Human-in-the-Loop)
const runCommand = tool({
description: 'Run a shell command',
inputSchema: z.object({
command: z.string(),
}),
needsApproval: true, // Require user approval before execution
execute: async ({ command }) => {
// execution logic
},
});
Agents (New in v6)
ToolLoopAgent
Production-ready agent abstraction that handles the complete tool execution loop:
import { ToolLoopAgent } from 'ai';
const weatherAgent = new ToolLoopAgent({
model: 'anthropic/claude-sonnet-4.5',
instructions: 'You are a helpful weather assistant.',
tools: {
weather: weatherTool,
},
});
const result = await weatherAgent.generate({
prompt: 'What is the weather in San Francisco?',
});
Agent with Structured Output
import { ToolLoopAgent, Output } from 'ai';
const agent = new ToolLoopAgent({
model: 'anthropic/claude-sonnet-4.5',
tools: { weather: weatherTool },
output: Output.object({
schema: z.object({
summary: z.string(),
temperature: z.number(),
}),
}),
});
Structured Data Generation
import { generateObject, Output } from 'ai';
import { z } from 'zod';
const { object } = await generateObject({
model: 'anthropic/claude-sonnet-4.5',
schema: z.object({
recipe: z.object({
name: z.string(),
ingredients: z.array(z.object({
name: z.string(),
amount: z.string(),
})),
steps: z.array(z.string()),
}),
}),
prompt: 'Generate a lasagna recipe.',
});
UI Integration (React/Next.js)
useChat Hook
'use client';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
export default function Chat() {
const { messages, sendMessage, status } = useChat({
transport: new DefaultChatTransport({
api: '/api/chat',
}),
});
return (
<div>
{messages.map(message => (
<div key={message.id}>
{message.role}: {message.parts.map((part, i) =>
part.type === 'text' ? <span key={i}>{part.text}</span> : null
)}
</div>
))}
<form onSubmit={e => {
e.preventDefault();
sendMessage({ text: input });
}}>
<input value={input} onChange={e => setInput(e.target.value)} />
<button type="submit" disabled={status !== 'ready'}>Send</button>
</form>
</div>
);
}
API Route (Next.js App Router)
// app/api/chat/route.ts
import { convertToModelMessages, streamText, UIMessage } from 'ai';
export async function POST(req: Request) {
const { messages }: { messages: UIMessage[] } = await req.json();
const result = streamText({
model: 'anthropic/claude-sonnet-4.5',
system: 'You are a helpful assistant.',
messages: await convertToModelMessages(messages),
});
return result.toUIMessageStreamResponse();
}
MCP (Model Context Protocol) Integration
import { createMCPClient } from '@ai-sdk/mcp';
const mcpClient = await createMCPClient({
transport: {
type: 'http',
url: 'https://your-server.com/mcp',
headers: { Authorization: 'Bearer my-api-key' },
},
});
const tools = await mcpClient.tools();
// Use MCP tools with generateText/streamText
const result = await generateText({
model: 'anthropic/claude-sonnet-4.5',
tools,
prompt: 'Use the available tools to help me.',
});
DevTools
Debug AI applications with full visibility into LLM calls:
import { wrapLanguageModel, gateway } from 'ai';
import { devToolsMiddleware } from '@ai-sdk/devtools';
const model = wrapLanguageModel({
model: gateway('anthropic/claude-sonnet-4.5'),
middleware: devToolsMiddleware(),
});
// Launch viewer: npx @ai-sdk/devtools
// Open http://localhost:4983
Resources
For detailed API documentation, see:
- references/core-api.md - Complete AI SDK Core API (generateText, streamText, generateObject, tool definitions)
- references/ui-hooks.md - AI SDK UI hooks (useChat, useCompletion, useObject) and transport configuration
- references/agents.md - Agent abstractions (ToolLoopAgent), workflow patterns, and loop control