Vercel AI SDK 4.x: Streaming Text, Tool Calls, and Multi-Step Agents
The Vercel AI SDK unifies streaming text, structured output, tool calls, and multi-step agents across all major AI providers with a single consistent API.
Every AI provider has a different streaming API, tool call format, and error shape. The Vercel AI SDK abstracts all of that into one consistent interface that works with OpenAI, Anthropic, Google, Mistral, Ollama, and dozens of others - and it integrates directly with React via hooks.
Tools let the model call functions during generation. The SDK handles the tool call → result → continue loop:
import { streamText, tool } from "ai";
import { z } from "zod";
const result = await streamText({
model: openai("gpt-4o"),
tools: {
getWeather: tool({
description: "Get current weather for a city",
parameters: z.object({ city: z.string() }),
execute: async ({ city }) => {
const data = await fetchWeather(city);
return { temperature: data.temp, condition: data.condition };
},
}),
},
prompt: "What is the weather in Tokyo?",
maxSteps: 3, // allow model to use tool then continue
});
Structured Output With generateObject()
When you need structured data instead of free text:
import { generateObject } from "ai";
import { z } from "zod";
const { object } = await generateObject({
model: openai("gpt-4o"),
schema: z.object({
tasks: z.array(z.object({
title: z.string(),
priority: z.enum(["low", "medium", "high"]),
estimatedHours: z.number(),
})),
}),
prompt: "Break down building a REST API into tasks",
});
// object.tasks is fully typed Task[]
Multi-Step Agents
Set maxSteps to let the model take multiple tool calls in a chain:
const result = await streamText({
model: anthropic("claude-3-5-sonnet-20241022"),
tools: {
searchWeb: tool({ /* ... */ }),
readPage: tool({ /* ... */ }),
writeFile: tool({ /* ... */ }),
},
system: "You are a research agent. Search for information and write a summary.",
prompt: "Research the current state of WebAssembly and write a 500-word summary.",
maxSteps: 10, // agent can take up to 10 tool calls
});
// Stream each step as it happens
for await (const delta of result.fullStream) {
if (delta.type === "tool-call") {
console.log("Tool called:", delta.toolName);
}
if (delta.type === "text-delta") {
process.stdout.write(delta.textDelta);
}
}
Switching Providers
The SDK's provider abstraction means switching models is one line:
import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";
import { google } from "@ai-sdk/google";
import { ollama } from "ollama-ai-provider"; // community
// Just swap the model - everything else stays the same
const model = openai("gpt-4o"); // OpenAI
const model = anthropic("claude-3-5-sonnet-20241022"); // Anthropic
const model = google("gemini-1.5-pro"); // Google
const model = ollama("llama3.2"); // Local via Ollama
Practical deep-dives on LLMs, developer tools, and AI engineering. No filler. Unsubscribe any time.
// written byFIG. AUTH-01
530
Mahmudul Haque Qudrati
CEO & ML Engineer
CEO and ML Engineer at Pristren. Builds AI-powered software for teams and writes about machine learning, LLMs, developer tools, and practical AI applications.
What is Harness engineering: Leveraging Codex in an agent-first world? A Practical Overview
Harness engineering is the practice of building structured, safe environments for AI agents to execute code. This post explains how to leverage OpenAI Codex in an agent-first world, with concrete examples, cost breakdowns, and honest tradeoffs.
