Vercel AI SDK — Build AI Apps with React and Next.js

What is the Vercel AI SDK?

The Vercel AI SDK is a TypeScript toolkit for building AI-powered web applications. It provides a unified API across LLM providers (OpenAI, Anthropic, Google, Mistral), React hooks for streaming chat UIs, server-side streaming with Edge Runtime, and generative UI capabilities. The de facto standard for Next.js AI apps.

Answer-Ready: Vercel AI SDK is the standard toolkit for AI web apps in Next.js/React. Unified provider API (OpenAI, Claude, Gemini), streaming chat hooks, tool calling, generative UI, and Edge Runtime support. Used by thousands of production AI apps. 15k+ GitHub stars.

Best for: Frontend developers building AI chat and generative UI apps. Works with: Next.js, React, Svelte, Vue, Node.js. Setup time: Under 5 minutes.

Core Features

1. Multi-Provider Support

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

// Same API, different providers
const result = await generateText({
  model: anthropic('claude-sonnet-4-20250514'),
  prompt: 'Explain quantum computing',
});

2. Streaming Chat (React Hooks)

const { messages, input, handleSubmit, isLoading } = useChat({
  api: '/api/chat',
  onFinish: (message) => console.log('Done:', message),
});

3. Tool Calling

const result = streamText({
  model: openai('gpt-4o'),
  tools: {
    weather: {
      description: 'Get weather for a city',
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => getWeather(city),
    },
  },
  messages,
});

4. Generative UI

const result = streamUI({
  model: openai('gpt-4o'),
  messages,
  text: ({ content }) => <p>{content}</p>,
  tools: {
    weather: {
      parameters: z.object({ city: z.string() }),
      generate: async function* ({ city }) {
        yield <LoadingSpinner />;
        const data = await getWeather(city);
        return <WeatherCard data={data} />;
      },
    },
  },
});

5. Structured Output

import { generateObject } from 'ai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    recipe: z.object({
      name: z.string(),
      ingredients: z.array(z.string()),
      steps: z.array(z.string()),
    }),
  }),
  prompt: 'Generate a pasta recipe',
});

Provider Packages

FAQ

Q: Does it work outside Next.js? A: Yes, core functions work in any Node.js environment. React hooks work in any React framework. Svelte and Vue adapters available.

Q: How does streaming work? A: Server-side uses streamText() which returns a ReadableStream. Client-side useChat() hook handles SSE parsing automatically.

Q: Can I use Claude with it? A: Yes, @ai-sdk/anthropic provides full Claude support including streaming and tool calling.