Vercel AI SDK Complete Guide — One Unified API for OpenAI, Anthropic, and Gemini (2026)

"I shipped on the OpenAI API, but I want to try Claude and Gemini too" — and you spend two hours rewriting the same logic against three different SDKs, translating request and response formats by hand. The Vercel AI SDK (just "AI SDK" since 2026) collapses that into "one import, one function, every provider." A TypeScript open-source library with 20M+ monthly downloads, AI SDK 6 ships Agents, MCP, tool approval, and DevTools, and as of May 2026 it's the de facto standard for unified LLM interfaces.

Up front: If you're calling LLMs from a web app or Node.js project in 2026, the AI SDK is the right default — period. The only reasons to write directly against the OpenAI or Anthropic SDK are "existing codebase," "bleeding-edge provider-specific features (Anthropic computer use, etc.)". Otherwise, the AI SDK gets you "easy switching, 1/3 the implementation, type safety, React integration" with overwhelming advantage.

Personal take up front: the AI SDK's true value is freedom from vendor lock-in. OpenAI raises prices? Three lines to switch to Anthropic. Gemini ships a new model? Try it in one place. All in a single codebase. As covered in What Is an AI API, the 2026 reality is that "using multiple models for different jobs" is now the default — and the AI SDK pushes the switching cost asymptotically toward zero. This article covers what the AI SDK is, why you'd use it, a 5-minute quickstart, structured output, tool calling and agents, React integration, provider switching, and three production pitfalls — all grounded in AI SDK 6 as of May 2026.

1. What Is the AI SDK — "OpenAI/Anthropic/Gemini Through One API"

The AI SDK is an open-source TypeScript library built by Vercel. GitHub: vercel/ai, license Apache 2.0, 20M+ monthly downloads as of May 2026. Vercel-built, but doesn't require Vercel to run — Cloudflare Workers, AWS Lambda, Deno, your own Node.js, the browser all work.

The core idea is an "adapter layer for switching LLM providers." For example:

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-5'),
  prompt: 'Tell me today\'s weather',
});

Switching this to Anthropic means three lines change:

import { generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';  // ← changed

const { text } = await generateText({
  model: anthropic('claude-opus-4-7'),  // ← changed
  prompt: 'Tell me today\'s weather',
});

The calling code doesn't change at all. That's what "one API for all providers" means in practice. Each provider has its own messages format, stop sequences, tool schemas, system prompt placement, and response JSON shape — and the AI SDK absorbs all of that under the hood.

2. Why Use the AI SDK — 3 Practical Reasons

Three concrete reasons: "easy switching, 1/3 the implementation, type safety."

When the AI SDK doesn't fit: ① when you need to push a provider's bleeding-edge feature (Anthropic computer use, etc.) right after release, before AI SDK wraps it; ② when you only work in Python (the AI SDK is TypeScript-only); ③ when an existing OpenAI-SDK codebase works and there's no reason to rewrite. Outside of those, the 2026 default is the AI SDK.

3. Running in 5 Minutes — generateText to streamText

Minimum setup is three steps. Demo on Node.js / Next.js.

# Step 1: install
npm install ai @ai-sdk/openai
# env: OPENAI_API_KEY=sk-...

# Step 2: create a file (app/api/chat/route.ts or index.ts)

// Step 3: code
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text, usage } = await generateText({
  model: openai('gpt-5'),
  system: 'You are a careful, helpful assistant.',
  prompt: 'List three benefits of the AI SDK.',
});

console.log(text);
console.log(`tokens: ${usage.totalTokens}`);

That's non-streaming, full text returned. Run it and the response lands in text in seconds. usage gives you token counts automatically — the cost discipline from the token-saving article drops in directly.

Switching to streaming (typewriter UX) is just renaming the function to streamText:

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

const result = streamText({
  model: openai('gpt-5'),
  prompt: 'List three benefits of the AI SDK.',
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);  // emit token by token
}

With the raw OpenAI SDK you'd be writing SSE parsing, chunk concatenation, end-of-stream detection by hand (30–50 lines). The AI SDK is one for-await loop. The same code runs against Anthropic and Gemini unchanged.

4. Structured Output — Type-Safe JSON with generateObject

Ask an LLM for "JSON" and you'll occasionally get it wrapped in a Markdown code block, with comments inserted, or with the structure quietly shifted. generateObject fixes this at the root: define the shape with a Zod schema, and the AI SDK handles parsing, validation, and retry automatically.

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-5'),
  schema: z.object({
    title: z.string(),
    tags: z.array(z.string()).max(5),
    sentiment: z.enum(['positive', 'neutral', 'negative']),
    summary: z.string().max(200),
  }),
  prompt: 'Analyze the article: "AI SDK 6 has..." [body]',
});

// object.title, object.tags etc are typed
console.log(object.tags);  // string[]

The real win: "the type of object is determined by `z.infer<typeof schema>`." TypeScript infers it, so typing object. in your IDE autocompletes title / tags / sentiment / summary. Runtime validation runs inside the SDK — schema violations trigger automatic retries. The "AI returned bad JSON, parse failed" class of incident effectively disappears.

5. Tool Calling and Agents — The Heart of AI SDK 6

The 2026 frontier of AI development is "tool-calling agents," and AI SDK 6's biggest leap is here. With tools and stopWhen, you get "call tool → AI decides → call next tool" loops directly.

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

const { text, steps } = await generateText({
  model: anthropic('claude-opus-4-7'),
  tools: {
    weather: tool({
      description: 'Get the weather for a city',
      inputSchema: z.object({ city: z.string() }),
      execute: async ({ city }) => {
        // real API call
        return { temp: 22, condition: 'sunny' };
      },
    }),
    convertToFahrenheit: tool({
      description: 'Convert Celsius to Fahrenheit',
      inputSchema: z.object({ celsius: z.number() }),
      execute: async ({ celsius }) => celsius * 9/5 + 32,
    }),
  },
  stopWhen: stepCountIs(5),  // cap the loop at 5 steps
  prompt: 'What is the weather in Tokyo, in Fahrenheit?',
});

The AI now autonomously sequences "weather('Tokyo') → convertToFahrenheit(22)", runs them, and integrates the results. steps exposes the per-step execution history.

AI SDK 6 also offers a ToolLoopAgent class for an object-oriented style (equivalent to generateText + stopWhen). It adds tool execution approval (a human confirms tool runs before they execute) and full MCP (Model Context Protocol) integration. Connecting an MCP server (see What is MCP) is three lines in May 2026.

6. React Integration — A Chat UI in 10 Lines with useChat

The AI SDK's other star is React Hooks. With useChat, a ChatGPT-like UI is 10 lines of code.

'use client';
import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

The server side (Next.js API Route):

// app/api/chat/route.ts
import { streamText, convertToModelMessages } 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-5'),
    messages: convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
}

That alone gets you SSE connection, message state management, loading, and error handling — all automatic. AI SDK 6's useChat also natively handles tool approval UI (the user clicks to approve "should this tool run?"). Vue (useChat from @ai-sdk/vue), Svelte, and Solid hooks are also shipped.

7. Switching Providers — Claude ↔ GPT ↔ Gemini in 3 Lines

The major providers officially supported by the AI SDK as of May 2026:

Switching: one import + one model line. AI SDK 5 added a global provider feature where you can specify a model by string ID (e.g. 'openai/gpt-5'). Pair this with the LLM knowledge cutoff comparison and Claude vs ChatGPT pricing to choose models by "cost, performance, regional requirements" with confidence.

8. Three Production Pitfalls

The AI SDK is convenient, but there are three pitfalls every team hits in production. Knowing them up front avoids 80% of the incidents.

One more note: the AI SDK is "an LLM adapter," not "an LLM-cost reseller." Each provider's API key is your responsibility, with billing direct to you. As covered in What Is an AI API, costs are billed by OpenAI/Anthropic/Google directly. The AI SDK itself is free; you only pay for the LLMs you use.

Summary

"How should I call LLMs from a web app?" — by May 2026, the design decision has converged on "the AI SDK, period." 20M+ monthly downloads, AI SDK 6 ships Agents, MCP, tool approval, DevTools, and you can call OpenAI/Anthropic/Google/Mistral/xAI/local LLMs from the same codebase. That's three things at once: "freedom from vendor lock-in," "1/3 the implementation cost," and "type-safe structured output."

Getting started is simple: ① npm install ai @ai-sdk/openai, ② set the API key, ③ one line of generateText({ model, prompt }). Once that runs, layer on streamText for streaming, generateObject for JSON, tools for agents, useChat for UI. Before going to production, internalize the three pitfalls (provider feature gaps, stream abort billing, type-inference overload).

Related: What Is an AI API (basics), AI Recommends Vercel, What is MCP, Token saving.

FAQ

Q. Do I have to deploy on Vercel to use it?
A. No. The AI SDK is a pure TypeScript library — Cloudflare Workers, AWS Lambda, Deno, your own Node.js server, the browser all work. "Built by Vercel" doesn't mean "Vercel-only."

Q. Does it cost anything?
A. The AI SDK itself is fully free, MIT-style license. The cost is only the API usage of the LLM provider you call (OpenAI/Anthropic/etc). The SDK adds zero markup.

Q. How does it differ from LangChain or LlamaIndex?
A. Different roles. The AI SDK is a "thin LLM-call adapter" optimized for web app integration. LangChain is a full-featured framework for "RAG and agent workflows." Practical split: "TypeScript + integrate into a Web UI" → AI SDK; "Python + complex agent pipelines" → LangChain.

Q. Is it hard to migrate from existing OpenAI SDK code?
A. For simple openai.chat.completions.create calls, about 10 minutes of rewrite — replace with generateText and pass messages. Complex features (function calling, vision) need a small format conversion, but the docs include migration guides.

Q. Does it work with local LLMs (Ollama)?
A. Yes. The @ai-sdk/openai-compatible package lets you hit any OpenAI-compatible API endpoint — Ollama, LM Studio, vLLM, your own server. The "develop on local LLMs, ship on the cloud" workflow becomes a single baseURL change.