### [Vercel AI SDK：构建流式 AI 应用的官方 TypeScript 工具包，25K+ Stars 让 Next.js 开发 AI 应用变得简单](https://www.willai.cc/article/2979)

**Published:** 2026-06-30T11:49:28

**Author:** hiyoho

**Excerpt:** 🤖 Vercel AI SDK：构建 AI 应用的官方 TypeScript 工具包 The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a 

.ai-article { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.8; color: #1a1a2e; } .ai-article h2 { color: #2563eb; border-bottom: 3px solid #2563eb; padding-bottom: 8px; margin-top: 40px; font-size: 22px; } .ai-article h3 { color: #0891b2; margin-top: 30px; font-size: 18px; } .ai-article .hero-box { background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%); color: white; padding: 30px; border-radius: 16px; margin: 24px 0; text-align: center; } .ai-article .hero-box h1 { color: white; margin: 0 0 12px 0; font-size: 26px; line-height: 1.3; } .ai-article .hero-box p { opacity: 0.92; font-size: 15px; margin: 0; line-height: 1.6; } .ai-article .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; } .ai-article .info-card { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 14px 10px; text-align: center; } .ai-article .info-card .label { font-size: 11px; color: #0369a1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .ai-article .info-card .value { font-size: 18px; font-weight: 700; color: #0c4a6e; margin-top: 4px; } .ai-article .feature-list { list-style: none; padding: 0; } .ai-article .feature-list li { background: #f8fafc; border-left: 4px solid #2563eb; padding: 14px 18px; margin: 10px 0; border-radius: 0 10px 10px 0; line-height: 1.7; } .ai-article .feature-list li strong { color: #2563eb; } .ai-article .code-block { background: #1e293b; color: #e2e8f0; padding: 18px; border-radius: 12px; font-family: 'Fira Code', Consolas, monospace; font-size: 13px; overflow-x: auto; margin: 20px 0; line-height: 1.6; } .ai-article .code-block code { color: #e2e8f0; } .ai-article .use-case { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #86efac; border-radius: 12px; padding: 20px; margin: 16px 0; } .ai-article .use-case h4 { color: #166534; margin-top: 0; font-size: 16px; } .ai-article .recommend-box { background: #fefce8; border: 2px solid #facc15; border-radius: 14px; padding: 24px; margin: 30px 0; } .ai-article .recommend-box h3 { color: #a16207; margin-top: 0; } .ai-article .download-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; } .ai-article .dl-btn { background: #2563eb; color: white; padding: 11px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; font-size: 14px; } .ai-article .dl-btn:hover { background: #1d4ed8; } .ai-article .dl-btn.secondary { background: #0891b2; } .ai-article .dl-btn.secondary:hover { background: #0e7490; } .ai-article .divider { height: 2px; background: linear-gradient(90deg, #2563eb, transparent); margin: 36px 0; } .ai-article ul { padding-left: 20px; } .ai-article ul li { margin: 8px 0; }

# 🤖 Vercel AI SDK：构建 AI 应用的官方 TypeScript 工具包

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents

⭐ GitHub Stars

25.251

💻 主要语言

TypeScript

📜 开源许可

NOASSERTION

🏢 开发团队

Vercel

📦 最新版本

@ai-sdk/xai@4.0.3

🔄 周下载量

100万+

## 📌 项目简介

**Vercel AI SDK** 是 Vercel 官方推出的 TypeScript 工具包，专为构建跨框架、跨平台的流式 AI 应用而设计。它提供了一套统一的 API，让开发者可以在 Next.js、React、Vue、Svelte 等任何 JavaScript 框架中，轻松集成 OpenAI、Anthropic、Google 等主流 LLM，并以流式方式将 AI 生成内容实时渲染到 UI 中。

作为 **Vercel AI 工程平台** 的开源核心，AI SDK 已被广泛用于构建 ChatGPT 类应用、AI 写作助手、智能客服等场景。它不仅是 Vercel 官方 AI 解决方案的基石，也是 TypeScript 生态中最流行的 AI 应用开发工具包，GitHub 星标超过 **25,000+**，npm 周下载量超过 **100 万次**。

## ⚙️ 安装要求和过程

### 环境要求

-   **运行环境**：Node.js 18.0+（推荐 20+）
-   **框架支持**：Next.js 14+（App Router 优先）、React 18+、Vue 3+、Svelte 4+
-   **TypeScript**：推荐 5.0+（完整类型支持）
-   **包管理器**：npm / pnpm / yarn / bun 均可

### 快速安装

在 Next.js 项目中一键安装：

// 核心包 + OpenAI 提供商
npm install ai @ai-sdk/openai
// 或使用 pnpm
pnpm add ai @ai-sdk/openai

// Vue/Nuxt 项目
npm install ai @ai-sdk/vue @ai-sdk/openai

// Svelte/SvelteKit 项目
npm install ai @ai-sdk/svelte @ai-sdk/openai

### 最小可用示例（Next.js App Router）

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o'),
    prompt,
  });

  return result.toDataStreamResponse();
}

前端调用（React hooks）：

// app/components/Chat.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}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

无需手动管理流式响应、无需手写 ReadableStream 解析，AI SDK 全部帮你搞定。

## 🌟 核心功能

-   **📡 流式输出（Streaming）** — 内置完整的流式响应处理，AI 生成内容可逐字实时渲染到 UI，用户体验媲美 ChatGPT。支持 `streamText`、`streamObject`、`streamData` 等多种流式 API，兼容 Edge Runtime。
-   **🧩 多框架支持** — 提供 React、Vue、Svelte 专用 hooks（`useChat`、`useCompletion`、`useObject`），一套核心逻辑适配所有主流前端框架。每个框架都有独立的 `@ai-sdk/xxx` 适配器包。
-   **🔌 多模型统一接口** — 通过 `@ai-sdk` 系列提供商适配器，统一接入 OpenAI、Anthropic、Google Gemini、AWS Bedrock、Azure、Ollama、Groq 等 30+ LLM 提供商，切换模型只需改一行代码。
-   **🛠️ 工具调用（Tool Calling）** — 原生支持 LLM 工具调用（Function Calling），可用 TypeScript 函数定义 AI 可调用的”工具”，LLM 自行决定调用哪些工具。支持多步工具调用链（`maxSteps`），轻松构建自主 Agent。
-   **💾 对话持久化** — 内置 `useChat` 的持久化支持，可对接 Vercel KV、Upstash Redis、PostgreSQL 等存储方案，轻松实现对话历史管理与多会话管理。
-   **🖼️ 多模态支持** — 支持图像输入（Vision）、语音转文字（Transcription）、文字转语音（Speech）、图像生成（Image Generation）等多模态能力，覆盖 AI 应用全链路。

## 💡 典型使用场景

#### 场景一：构建类 ChatGPT 的对话应用

AI SDK 的 `useChat` hook 封装了完整的对话状态管理（消息列表、输入状态、提交处理、流式更新），开发者只需几行代码即可构建支持流式输出的多轮对话 UI。配合 Next.js App Router 的 Server Actions，可实现端到端的类型安全。

**适用项目**：AI 聊天助手、智能客服系统、企业内部知识库问答、教育辅导机器人。

#### 场景二：AI 辅助写作与内容生成

利用 `useCompletion` hook，可在任意输入框中集成 AI 续写、改写、翻译、摘要等功能。流式输出让用户实时看到生成结果，配合 `streamObject` 还可生成结构化 JSON 数据（如自动填充表单、结构化数据提取）。

**适用项目**：AI 写作工具、邮件智能助手、代码补全插件、SEO 内容生成器。

#### 场景三：AI Agent 与自动化工作流

AI SDK 的 Tool Calling 功能允许定义 JavaScript 函数作为 AI 可调用的”工具”，LLM 可自行决定调用哪些工具来完成任务。配合 `maxSteps` 参数可实现多轮工具调用链，构建能自主规划并执行任务的 AI Agent。Vercel 还提供了 [Agent 专用 API](https://sdk.vercel.ai/docs/ai-sdk-core/agents)，支持中断/恢复、状态持久化等高级能力。

**适用项目**：智能数据分析助手、自动化工作流编排、AI 运维助手、个人生产力 Agent。

## 🔥 推荐理由

### 为什么选择 Vercel AI SDK？

**1\. Vercel 官方背书，生态最完整**  
作为 Next.js 母公司 Vercel 的官方 AI 解决方案，AI SDK 与 Next.js App Router 深度集成，部署到 Vercel 平台可享受零配置体验。同时支持 Netlify、Cloudflare Pages 等所有主流部署平台，Edge Runtime 全面兼容。

**2\. 流式输出体验最佳**  
AI SDK 的流式处理是 TypeScript 生态中最成熟的实现，支持文字、对象、工具调用结果、Data Stream 附件等多种数据类型的流式传输，前端渲染延迟低至毫秒级。内置的 `Data Stream Protocol` 还支持在流式响应中夹带自定义数据（如推理过程、来源引用）。

**3\. 跨框架复用，学习成本低**  
核心 API 设计高度一致，从 React 迁移到 Vue 只需更换 import 路径。官方文档提供各框架的完整示例，且每个示例都有 TypeScript 类型标注，上手非常快。AI SDK Core（模型调用）甚至可以脱离前端框架在纯 Node.js 环境中使用。

**4\. 内置多模态 AI 工具链**  
除了基础对话，还内置了 `generateImage`（图像生成）、`embed`（文本嵌入向量化）、`transcribe`（语音转文字）、`speech`（文字转语音）等多模态能力，并支持通过统一接口调用。未来还将支持视频生成等更多模态。

**5\. 活跃的社区与持续迭代**  
Vercel 团队保持高频迭代（平均每周发布），积极跟进 LLM 最新能力（如 Anthropic 的 Computer Use、OpenAI 的 o1 推理模式）。GitHub 上 25K+ Stars，npm 周下载量 100 万+，社区提供的示例项目和模板非常丰富。

**💡 个人使用感受**：我用 AI SDK 构建过两个 AI 聊天项目，最深刻的印象是”省心”——流式输出不用自己处理 ReadableStream，工具调用不用手写 JSON Schema 解析，连 TypeScript 类型都是自动推导的。如果你在用 Next.js，这基本上是唯一选择；如果你在用其他框架，它同样是最好的 TypeScript AI 工具包。

## 📥 下载地址

[📦 GitHub 仓库](https://github.com/vercel/ai)  
[📚 官方文档](https://sdk.vercel.ai/docs)  
[🚀 Vercel AI 模板](https://vercel.com/templates/ai)  
[📦 npm 包](https://www.npmjs.com/package/ai)

**开源许可**：NOASSERTION（实际以仓库 LICENSE 文件为准）  
**GitHub**：[github.com/vercel/ai](https://github.com/vercel/ai)  
**官网/文档**：[sdk.vercel.ai](https://sdk.vercel.ai)  
**所属公司**：Vercel（Next.js 母公司）  
**适合人群**：Next.js/React/Vue 开发者、AI 应用创业者、全栈工程师、前端 AI 集成需求者

**Tags:** AI, AI Agent, AI开源项目, AI框架, LLM, Next.js, React, TypeScript, 开源, 流式输出

**Categories:** 开源项目

---