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

引言

如果你在过去一年中关注前端和全栈开发领域，可能会注意到一个有趣的现象：传统的 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 阶段，更新了不少东西，感兴趣可以关注下。

参考链接

posted @ 2025-11-24 09:18 guangzan 阅读(128) 评论(0) 收藏举报

刷新页面返回顶部