摘要：过去一年，AI 应用遍地开花。对前端来说，接 AI看似就是调个接口，但真做过的人都知道坑不少：API 调用要处理流式响应，聊天 UI 得从头搭，换个模型逻辑还要改半天。
过去一年，AI 应用遍地开花。对前端来说，接 AI看似就是调个接口，但真做过的人都知道坑不少：API 调用要处理流式响应，聊天 UI 得从头搭，换个模型逻辑还要改半天。
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 一样自然。
import { useChat } from "ai/react";export default function Chat { const { messages, input, handleInputChange, handleSubmit } = useChat; return ({messages.map(m =>{m.role}: {m.content}
)});}几行代码就能跑起来一个流式聊天，底层的 SSE 处理和状态管理都不用你操心。
对前端的好处：
不用手写复杂的 API 调用逻辑。一套代码随时切换不同模型。支持结构化输出（JSON）和直接返回 UI 组件。写过聊天 UI 的前端都懂：消息列表、输入框、loading 效果、流式更新……这些活儿其实挺琐碎的。
比如这样：
import { Message, Response } from "ai/elements";{messages.map(m => ( m.role === "assistant" ?{m.content}))}不用自己写 UI，也不用管流式状态，开箱即用。想自定义样式也没问题，因为它就是普通的 React 组件。
对前端的好处：
快速搭建一个“像样”的 AI 聊天界面。节省大量 UI 层的重复劳动。可组合、可定制，灵活度不打折。这相当于 Vercel 给前端提供了一套“AI 界面脚手架”。
好的 AI 应用离不开好的 Prompt 和合适的模型。但在代码里反复改 Prompt、切换模型，效率非常低。
AI Playground 就是个在线实验室，让你：
横向对比模型：输入同一个 Prompt，同时查看 GPT-4o、Claude 3、Llama 3 等模型的输出。哪个更靠谱，一眼就能看出来。快速调 Prompt：像写文档一样调试，不需要修改代码或重新部署。生成代码片段：调到满意的 Prompt，直接一键生成 AI SDK 的调用代码，复制粘贴就能用在项目里。这样一来，你可以在 Playground 里先把 Prompt 和模型试好，再迁移到项目中，避免上线后发现“模型答非所问”。
这三件套组合起来，让前端也能轻松完成一个 AI 应用的全流程！
来源：不秃头程序员
