AI SDK：重新定义 AI 应用开发

news/2025/11/24 9:20:03/文章来源:https://www.cnblogs.com/guangzan/p/19261094

引言

如果你在过去一年中关注前端和全栈开发领域，可能会注意到一个有趣的现象：传统的 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>);
}