Vercel AI SDK

The Vercel AI SDK is the TypeScript toolkit for building AI-powered applications. Unlike every other platform on this list (all Python), the AI SDK is JavaScript/TypeScript — designed for React, Next.js, Vue, Svelte, and Node.js. It provides unified APIs for text generation, streaming, tool calling, and agents across 15+ model providers.

Two main libraries: AI SDK Core (unified LLM API) and AI SDK UI (framework-agnostic hooks for chat interfaces). V6 added a dedicated @ai-sdk/agent package for multi-step agent workflows.

Note:

If you're building an AI feature into a Next.js or React app, the Vercel AI SDK is the default choice. It's the only TypeScript agent framework on this list and the most-used in web application contexts. The useChat hook gives you a working chatbot in ~20 lines of React.

Installation

Install the SDK

Node.js 18+ required. Install the core package and a provider.

npm install ai @ai-sdk/openai

Configure API Keys

Set your provider key. The AI SDK supports 15+ providers via dedicated packages.

export OPENAI_API_KEY=sk-...
# or for Anthropic
export ANTHROPIC_API_KEY=sk-ant-...

Verify Installation

Generate text with a one-liner.

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

const { text } = await generateText({
  model: openai("gpt-4o"),
  prompt: "Explain AI agents in one sentence.",
});
console.log(text);

Core Concepts

Architecture Overview

generateText

Single-turn text generation. Returns the full response. Best for non-streaming use cases like data extraction or classification.

Values: generateText({ model, prompt })

streamText

Streaming text generation. Returns a stream of tokens + tool calls. Used in chat interfaces and real-time applications.

Values: streamText({ model, messages, tools })

Agent

Multi-step agent loop. Handles tool calling, retries, and state. V6 feature in the @ai-sdk/agent package.

Values: import { agent } from '@ai-sdk/agent'

useChat

React hook for chatbot UI. Handles message state, streaming, and tool UI rendering. Works with Next.js, React, Vue, Svelte.

Values: const { messages, sendMessage } = useChat()

Tool Calling

The AI SDK handles multi-step tool execution automatically. Define tools as functions — the SDK manages loop detection, parallel calls, and result formatting.

import { generateText, tool } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";

const { text } = await generateText({
  model: openai("gpt-4o"),
  prompt: "What's the weather in San Francisco?",
  tools: {
    getWeather: tool({
      description: "Get current weather for a city",
      parameters: z.object({
        city: z.string().describe("City name"),
      }),
      execute: async ({ city }) => {
        // Call weather API
        return `72°F, sunny in ${city}`;
      },
    }),
  },
  maxSteps: 5,  // Max tool call rounds (prevents infinite loops)
});

Agents (V6)

The @ai-sdk/agent package adds a managed agent loop with tool execution, memory, and sub-agents.

import { agent } from "@ai-sdk/agent";
import { openai } from "@ai-sdk/openai";

const researcher = agent({
  model: openai("gpt-4o"),
  name: "Researcher",
  instructions: "Search for and synthesize information on any topic.",
  tools: { /* web search, reader tools */ },
});

const writer = agent({
  model: openai("gpt-4o"),
  name: "Writer",
  instructions: "Write clear, engaging content from research findings.",
});

// Orchestrator delegates to sub-agents
const orchestrator = agent({
  model: openai("gpt-4o"),
  name: "Orchestrator",
  instructions: "Plan tasks and delegate to specialist agents.",
  subagents: [researcher, writer],
});

const result = await orchestrator.doStream({
  prompt: "Research AI agent frameworks and write a comparison.",
  onEvent: (event) => console.log(event),
});

Workflow Patterns

The AI SDK includes a workflow() builder for structured multi-step agents.

import { workflow } from "@ai-sdk/agent";
import { openai } from "@ai-sdk/openai";

const analyzeWorkflow = workflow({
  model: openai("gpt-4o"),
  steps: {
    gatherData: {
      run: async ({ prompt }) => {
        // Step 1: Gather data
        return { data: "..." };
      },
    },
    analyze: {
      after: "gatherData",
      run: async ({ prompt, gatherData }) => {
        // Step 2: Analyze with context from step 1
        return { analysis: "..." };
      },
    },
    report: {
      after: "analyze",
      run: async ({ prompt, gatherData, analyze }) => {
        // Step 3: Generate report with all prior context
        return { report: "..." };
      },
    },
  },
});

AI SDK UI: Chatbot in 20 Lines

The useChat hook handles all the complexity of a streaming chat interface.

// React / Next.js
"use client";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat",  // Your API route using streamText
  });

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

Provider Wiring

The AI SDK supports 15+ providers through dedicated packages. Switch providers by changing the import — the API is identical.

// OpenAI
import { openai } from "@ai-sdk/openai";
const model = openai("gpt-4o");

// Anthropic
import { anthropic } from "@ai-sdk/anthropic";
const model = anthropic("claude-sonnet-4-20250514");

// Google
import { google } from "@ai-sdk/google";
const model = google("gemini-2.5-flash");

// Mistral
import { mistral } from "@ai-sdk/mistral";
const model = mistral("mistral-large-latest");

// DeepSeek
import { deepseek } from "@ai-sdk/deepseek";
const model = deepseek("deepseek-chat");

// All models use the same API:
const { text } = await generateText({ model, prompt: "..." });

Note:

Vercel AI Gateway vs direct providers. The AI Gateway (@ai-sdk/gateway) adds caching, rate limiting, and observability. For production apps, use the Gateway as a central routing layer over direct provider calls. This gives you unified analytics and cost tracking across all models.

Key Takeaway

The Vercel AI SDK is the only TypeScript agent framework in this list — and that's its superpower. If you're building AI features into a web application (Next.js, React, Vue), this is the natural choice. The useChat hook eliminates the most tedious part of AI UI development (streaming, message state, error handling). The provider-agnostic API means you can start with OpenAI and switch to Anthropic or Google by changing one import. For server-side agents, the @ai-sdk/agent package (V6) now competes directly with Python frameworks like CrewAI.

Vercel AI SDK Setup Guide