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

技术分享 4个月前 (11-25) 0 999+

引言

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