#Vercel AI SDK 完整教程

欢迎来到 Vercel AI SDK 完整教程。本教程基于 AI SDK 官方文档（7.x）整理，帮助你用 TypeScript 在 Next.js、React 与 Node.js 里接入大模型：流式对话、工具调用、结构化输出，以及（实验性的）Generative UI。

AI SDK 把「各家模型 API 不一样」这件事收成一套统一接口。默认走 Vercel AI Gateway（一条 AI_GATEWAY_API_KEY 即可换模型字符串）；也可以直接装 @ai-sdk/openai 等厂商包。本教程默认模型字符串用 openai/gpt-4.1-mini（Gateway 形态）。厂商 ID 会变，以官方文档与控制台为准。

---

#教程目录

#基础篇

1. AI SDK 简介 — 定位、三大 Surface、与 LangChain 对比
2. 安装与环境 — Node 22+、pnpm、环境变量、ESM
3. 快速上手 — generateText 与第一条流式聊天

#开发篇

4. useChat 对话 UI — @ai-sdk/react、parts、sendMessage、状态
5. 流式输出 — streamText、UI Message Stream、纯文本流
6. 工具调用 — tool()、Zod、stopWhen、多步循环
7. RSC 与 streamUI — 实验性 Generative UI、Server Action

#集成篇

8. Provider 与模型 — Gateway vs 直连、OpenAI 兼容、Ollama
9. Next.js 集成 — App Router Route Handler、maxDuration、部署

#实践篇

10. 实战案例 — 聊天、多工具助手、结构化抽取
11. 资源与延伸阅读 — 官方文档与本站相关教程

---

#学习路径

#前置知识

• TypeScript 基础（import、类型、async/await）
• React 组件与 hooks；聊天页需要 'use client'
• Next.js App Router（app/api/.../route.ts）
• Node.js 22+ 与 pnpm（官方 Quickstart 要求）

#三大 Surface（先建立心智模型）

AI SDK RSC（@ai-sdk/rsc 的 streamUI）仍是 experimental，生产环境优先用 AI SDK UI。

#本站相关教程

---

#学完你能做到

• 用 Gateway 字符串或 @ai-sdk/openai 各打一次 generateText
• 在 Next.js 里用 streamText + useChat 做实时聊天
• 用 Zod 定义工具，并用 isStepCount 做多步调用
• 把 Ollama 的 /v1 接到 @ai-sdk/openai-compatible

权威出处：sdk.vercel.ai/docs、ai-sdk.dev/llms.txt。本教程不杜撰未文档化的 API。

---

#下一步

• AI SDK 简介
• 安装与环境
• 快速上手