如何用AI SDK重新定义AI应用开发的边界？
摘要：引言 如果你在过去一年中关注前端和全栈开发领域，可能会注意到一个有趣的现象：传统的 Web 应用正在积极拥抱人工智能。 什么是 AI SDK？ AI SDK 是由 Next.js 开发团队 Vercel 推出的开源 TypeScript 工
引言
如果你在过去一年中关注前端和全栈开发领域，可能会注意到一个有趣的现象：传统的 Web 应用正在积极拥抱人工智能。
什么是 AI SDK？
AI SDK 是由 Next.js 开发团队 Vercel 推出的开源 TypeScript 工具库，专为构建 AI 驱动应用而设计。它支持 Next.js、Vue、Svelte 和 Node.js 等框架，提供统一的 API 接口，抽象了不同 LLM（大型语言模型）提供商的差异化细节。简单说，它让开发者像调用本地函数一样集成 OpenAI、Anthropic、Google Gemini 或 xAI Grok 等模型，而无需纠缠于 SDK 切换的样板代码。
核心特性
提供者（Providers）
不同的大模型提供商（如 OpenAI、Anthropic、Google、Hugging Face、Ollama 等）拥有各自迥异的 API 格式、参数命名、错误处理机制。AI SDK 抽象出统一的 generateText、streamText、embed 等函数，开发者只需指定 provider，其余逻辑完全一致。
// 使用 OpenAI
const result = await streamText({
model: openai('gpt-4o'),
prompt: 'Explain quantum entanglement.'
});
// 切换为 Anthropic？只需改一行！
const result = await streamText({
model: anthropic('claude-3-5-sonnet'),
prompt: 'Explain quantum entanglement.'
});
AI 模型正在快速演进，今天最好的模型明天可能就被超越。锁定单一提供商存在风险。AI SDK 的抽象层让模型可以即插即用。
流式输出（Streaming）
AI SDK 默认优先支持流式（streaming）输出。对于 Web 应用而言，这意味着用户能立即看到第一个 token，而非等待整个响应完成，极大提升交互体验。
import { useAIState, useActions, useUIState } from 'ai/rsc';
function Chat() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const newMessage = { role: 'user', content: input };
setMessages([...messages, newMessage]);
const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ messages: [...messages, newMessage] })
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
let aiMessage = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
aiMessage += decoder.decode(value);
setMessages([...messages, newMessage, { role: 'assistant', content: ai助理 }]);
}
};
}
AI SDK 还提供 useAssistant、useChat 等 React Hook，自动处理流式、状态管理、错误重试等，开发者只需关注 UI。
import { useChat } from 'ai/react';
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => <div key={m.id}>{m.content}</div>)}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
</form>
</div>
);
}
流式输出已经是 AI 应用的基本体验要求。
框架无关
虽然由 Next.js 团队打造，但 AI SDK 支持 React、Vue、Svelte、Nuxt、SvelteKit 甚至纯 Node.js。
例如在 SvelteKit 中：
// +page.server.ts
import { streamText } from 'ai';
import { openai } from 'ai/openai';
export const actions = {
chat: async ({ request }) => {
const formData = await request.formData();
const input = formData.get('input') as string;
const result = await streamText({
model: openai('gpt-4o'),
prompt: input
});
return result.toDataStreamResponse();
}
};
前端用 useChat 即可消费流。
生成式 UI（Generative UI）
让 AI 不仅生成文本，还能生成可交互的 UI 组件。
例如，AI 可以返回一段 JSON 描述：“显示一个天气卡片，包含温度 23°C 和晴天图标”，前端自动将其渲染为 React 组件。
// AI 返回结构化 UI 指令
{
type: 'weather-card',
props: { temperature: 23, condition: 'sunny' }
}
配合 useUIState，前端可动态渲染：
const [uiMessages, setUIMessages] = useUIState();
return (
<div>
{uiMessages.map((msg, i) => (
<GeneratedComponent key={i} {...msg} />
))}
</div>
);
传统 Chat UI 是对话的终点，而 Generative UI 是交互的起点。用户不再需要复制粘贴结果，AI 直接提供可操作的界面。
结构化输出
用 Zod 生成 JSON 对象，避免解析乱码：
import { generateObject } from 'ai';
const result = await generateObject({
model: openai('gpt-4o'),
schema: z.object({
name: z.string(),
age: z.number(),
}),
prompt: '生成一个名字和年龄。',
});
结构化输出可以降低 AI 的幻觉问题，降低错误率。
PDF 支持
处理文档：上传 PDF，AI 分析内容。
import fs from 'fs';
import { generateText } from 'ai';
const { text } = await generateText({
model: openai('gpt-4o'),
messages: [
{
role: 'user',
content: [
{ type: 'text', text: '根据此文档分析，什么是大模型？并总结出要点。' },
{ type: 'file', data: fs.readFileSync('./ai.pdf'), mimeType: 'application/pdf' },
],
},
],
});
实战
搭建一个简单的 AI 聊天应用，以 Next.js 为例：
安装：
npm install ai openai
创建路由处理器 /app/api/chat/route.ts：
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openai('gpt-4o'),
messages
});
return result.toDataStreamResponse();
}
前端使用 useChat：
'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} />
<button type="submit">Send</button>
</form>
</div>
);
}
完成，AI SDK 将复杂性封装到极致，整个过程无需手动处理 fetch、流解析、状态同步。
总结
最后，总结一下，在我看来，AI SDK 的最大价值在于标准化。AI 领域模型层出不穷，每家提供商的 API 都像方言般不同，导致开发者疲于切换。AI SDK 像一座桥梁，统一了语法，让你专注于业务逻辑而非适配层。
如果你正在构建 AI 应用，无论使用哪种前端框架，AI SDK 都值得优先考虑，基本流行的开源 Chat 应用都是基于 AI SDK 构建的。它可能不会让你一夜暴富，但一定能让你少掉些头发🤣。
另外，AI SDK v6 已经在 beta 阶段，更新了不少东西，感兴趣可以关注下。
参考链接
官网：https://ai-sdk.dev/
GitHub：https://github.com/vercel/ai
文档：https://sdk.vercel.ai/docs