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

> Official Vercel SDK for building AI-powered web apps. Unified API for streaming chat, tool calling, and generative UI with React Server Components and Edge Runtime support.

## Install

Copy the content below into your project:

## Quick Use

```bash
npm install ai @ai-sdk/openai
```

```typescript
// app/api/chat/route.ts (Next.js App Router)
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toDataStreamResponse();
}
```

```typescript
// app/page.tsx
'use client';
import { useChat } from 'ai/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>
  );
}
```

## 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

```typescript
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)

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

### 3. Tool Calling

```typescript
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

```typescript
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

```typescript
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

| Provider | Package |
|----------|---------|
| OpenAI | `@ai-sdk/openai` |
| Anthropic | `@ai-sdk/anthropic` |
| Google | `@ai-sdk/google` |
| Mistral | `@ai-sdk/mistral` |
| Cohere | `@ai-sdk/cohere` |
| Amazon Bedrock | `@ai-sdk/amazon-bedrock` |

## 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.

## Source & Thanks

> Created by [Vercel](https://github.com/vercel). Licensed under Apache 2.0.
>
> [vercel/ai](https://github.com/vercel/ai) — 15k+ stars

<!-- ZH -->

## 快速使用

```bash
npm install ai @ai-sdk/openai
```

几行代码构建流式 AI 聊天应用。

## 什么是 Vercel AI SDK？

构建 AI Web 应用的 TypeScript 标准工具包。统一多供应商 API，React 流式聊天 Hooks，工具调用，生成式 UI。

**一句话总结**：AI Web 应用标准工具包，统一 OpenAI/Claude/Gemini API，流式聊天 React Hooks + 工具调用 + 生成式 UI，Next.js AI 应用首选，15k+ stars。

**适合人群**：构建 AI 聊天和生成式 UI 的前端开发者。

## 核心功能

### 1. 多供应商统一 API
同一接口切换 OpenAI/Claude/Gemini。

### 2. 流式聊天 Hooks
`useChat()` 一行搞定流式 UI。

### 3. 工具调用
Zod schema 定义工具，自动执行。

### 4. 生成式 UI
LLM 动态生成 React 组件。

## 常见问题

**Q: 只能 Next.js？**
A: 不，核心函数在任何 Node.js 环境可用，React/Svelte/Vue 适配器齐全。

## 来源与致谢

> [vercel/ai](https://github.com/vercel/ai) — 15k+ stars, Apache 2.0

---
Source: https://tokrepo.com/en/workflows/161ad057-be2d-45cd-9677-5e22cc2b9a42
Author: AI Open Source