Vercel AI SDK - Unified AI model integration with streaming and React hooks

Recipe

npm install ai @ai-sdk/openai @ai-sdk/anthropic

// 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 = streamText({
    model: openai("gpt-4o"),
    messages,
  });
 
  return result.toDataStreamResponse();
}

// app/chat/page.tsx
"use client";
import { useChat } from "@ai-sdk/react";
 
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
 
  return (

When to reach for this: You need to integrate LLM chat, completions, or tool calling into a React or Next.js app with streaming support and minimal boilerplate.

Working Example

// app/components/ChatWithTools.tsx
"use client";
import { useChat } from "@ai-sdk/react";
 
export default function ChatWithTools() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: 

// app/api/chat-tools/route.ts
import { streamText, tool } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { z } from "zod";
 
export async function POST(req: Request) {
  const { messages } 

What this demonstrates:

• Full streaming chat UI with useChat hook
• Tool calling with Zod schema validation
• Multi-step tool execution with maxSteps
• Loading state management and error handling
• Anthropic Claude model usage

Deep Dive

How It Works

• The AI SDK provides a unified interface across providers (OpenAI, Anthropic, Google, Mistral, etc.) so you can swap models by changing one line
• streamText returns a StreamTextResult that converts to a Response via toDataStreamResponse(), sending Server-Sent Events to the client
• useChat manages the full conversation state: message history, input state, loading, error, and abort controller
• Tool calling uses Zod schemas for parameter validation; the SDK automatically handles the tool call/result loop up to maxSteps iterations
• generateText is the non-streaming counterpart for batch processing or server-side generation
• The SDK uses a Data Stream Protocol that encodes text deltas, tool calls, tool results, and finish reasons into a single stream

Variations

Using OpenRouter for model access:

npm install @openrouter/ai-sdk-provider

import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
const openrouter = createOpenRouter({
  apiKey: process.env.OPENROUTER_API_KEY,
});
 
const result = streamText({
  model: openrouter("anthropic/claude-sonnet-4-20250514"),
  messages,
});

Non-streaming generation:

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
 
const { text, usage } = await generateText({
  model: openai("gpt-4o"),
  prompt: "Summarize this article in 3 bullets.",
});

Structured output with generateObject:

import { generateObject } from "ai";
import { z } from "zod";
 
const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: z.object({
    recipe: z.string(),

useCompletion for single-turn prompts:

"use client";
import { useCompletion } from "@ai-sdk/react";
 
export default function Completion() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: "/api/completion",
  });

TypeScript Notes

• Message type from ai includes id, role, content, and optional toolInvocations
• Tool parameters are inferred from Zod schemas, giving full type safety in execute functions
• useChat returns strongly typed messages: Message[]
• Provider-specific options can be passed via the providerOptions field

import type { Message } from "ai";
 
// Tool result types are inferred from the Zod schema
const weatherTool = tool({
  parameters: z.object({ city: z.string() }),
  execute: async ({ city }) => {
    // city is typed as string
    return { temp: 

Gotchas

• Missing API keys — The SDK throws at runtime if the provider's API key env var is not set. Fix: Set OPENAI_API_KEY, ANTHROPIC_API_KEY, etc. in .env.local. Each provider has its own expected env var name.

• useChat not updating — If messages don't stream in, the API route may not be returning a data stream response. Fix: Always return result.toDataStreamResponse(), not result.text or a plain JSON response.

• Tool calls not executing — Tools defined but maxSteps not set defaults to 1, so multi-step tool use won't work. Fix: Set maxSteps: 5 (or higher) to allow the model to process tool results and continue.

• CORS errors in development — API routes must be in the same Next.js app. Fix: Use Next.js API routes (app/api/) rather than calling an external server directly from useChat.

• Large bundle from provider imports — Importing multiple providers increases client bundle size. Fix: Provider imports are server-only; keep them in API routes or server actions, never in "use client" files.

Alternatives

FAQs

import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";
 
// Just change the model line:
const result = streamText({
  model: anthropic("claude-sonnet-4-20250514"),
  messages,
});

import { tool } from "ai";
import { z } from "zod";
 
const weatherTool = tool({
  description: "Get weather for a city",
  parameters: z.object({
    city: z.string().describe("City name"),

import { generateObject } from "ai";
import { z } from "zod";
 
const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: z.object({
    title: z.string

import type { Message } from "ai";

import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
const openrouter = createOpenRouter({
  apiKey: process.env.OPENROUTER_API_KEY,
});
 
const result = streamText({
  model: openrouter("anthropic/claude-sonnet-4-20250514"),
  messages,
});

Related

• TanStack Query — Cache and manage AI response data
• Next.js Server Actions — Alternative to API routes for AI calls
• TypeScript React — Type patterns used with AI SDK

Tool parameter types are inferred from the Zod schema automatically.