过去一年，AI 应用遍地开花。对前端来说，接 AI看似就是调个接口，但真做过的人都知道坑不少：API 调用要处理流式响应，聊天 UI 得从头搭，换个模型逻辑还要改半天。
Vercel 推出的 AI 全家桶——AI SDK、AI Elements、AI Playground，正好把这些问题打包解决。前端开发者可以一条龙完成：调用模型 → 搭界面 → 调试效果。
AI SDK
AI SDK 是这套工具链的核心。它是一个开源的 TypeScript 库，帮你把各种大语言模型的调用方式统一封装了，支持 React、Next.js、Vue、Svelte、Node.js 等常见框架。
它的主要模块：
- AI SDK Core：一套 API 就能调用不同的模型（OpenAI、Claude、Gemini、Mistral 等），支持文本生成、JSON 输出、嵌入和工具调用。切换模型只改配置，不改逻辑。
- AI SDK UI：提供 useChat、useCompletion 这样的钩子，用来快速搭建实时对话和文本补全界面。
- AI SDK RSC：结合 React Server Components，可以直接从模型流式输出 UI 组件，减少客户端 JS，性能更好。
前端最能感受到的价值就是：它让模型调用变得和调 API 一样自然。
比如在 React 项目里，只要这样写：
import { useChat } from "ai/react";export default function Chat() { const { messages, input, handleInputChange, handleSubmit } = useChat(); return ( <div> {messages.map(m => <p key={m.id}>{m.role}: {m.content}</p>)} <form onSubmit={handleSubmit}> <input value={input} onChange={handleInputChange} /> <button type="submit">Send</button> </form> </div> );}几行代码就能跑起来一个流式聊天，底层的 SSE 处理和状态管理都不用你操心。
对前端的好处：
- 不用手写复杂的 API 调用逻辑。
- 一套代码随时切换不同模型。
- 支持结构化输出（JSON）和直接返回 UI 组件。
换句话说，它的地位就像 Axios 之于数据请求：帮你省下了大量模板代码。
AI Elements
写过聊天 UI 的前端都懂：消息列表、输入框、loading 效果、流式更新……这些活儿其实挺琐碎的。
AI Elements 就是专门解决这个问题的组件库：
- 内置了 Message、Response、MessageContent 等常用组件。
- 默认风格和 Vercel 一脉相承（基于 shadcn/ui + Tailwind）。
- 与 useChat 无缝衔接，直接渲染流式消息。
比如这样：
import { Message, Response } from "ai/elements";{messages.map(m => ( m.role === "assistant" ? <Response key={m.id}>{m.content}</Response> : <Message key={m.id}>{m.content}</Message>))}不用自己写 UI，也不用管流式状态，开箱即用。想自定义样式也没问题，因为它就是普通的 React 组件。
对前端的好处：
- 快速搭建一个“像样”的 AI 聊天界面。
- 节省大量 UI 层的重复劳动。
- 可组合、可定制，灵活度不打折。
这相当于 Vercel 给前端提供了一套“AI 界面脚手架”。
AI Playground
好的 AI 应用离不开好的 Prompt 和合适的模型。但在代码里反复改 Prompt、切换模型，效率非常低。
AI Playground 就是个在线实验室，让你：
- 横向对比模型：输入同一个 Prompt，同时查看 GPT-4o、Claude 3、Llama 3 等模型的输出。哪个更靠谱，一眼就能看出来。
- 快速调 Prompt：像写文档一样调试，不需要修改代码或重新部署。
- 生成代码片段：调到满意的 Prompt，直接一键生成 AI SDK 的调用代码，复制粘贴就能用在项目里。
这样一来，你可以在 Playground 里先把 Prompt 和模型试好，再迁移到项目中，避免上线后发现“模型答非所问”。
前端也能全栈玩 AI
总结一下：
- AI SDK：解决调用层复杂度。
- AI Elements：提供现成的交互 UI。
- AI Playground：帮你做 Prompt 调试和模型选型。
这三件套组合起来，让前端也能轻松完成一个 AI 应用的全流程！
