Vercel AI SDK 4.x: Streaming Text, Tool Calls, and Multi-Step Agents

// app/api/chat/route.ts
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai("gpt-4o"),
    messages,
    onFinish({ usage, finishReason }) {
      // cost tracking
      console.log("Tokens used:", usage.totalTokens);
    },
  });

  return result.toDataStreamResponse();
}

// components/Chat.tsx
"use client";
import { useChat } from "ai/react";

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

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

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
});

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[]

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);
  }
}

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