一套 API 对接所有大模型：AI SDK 实践指南

小码编匠
162 阅读4分钟

前言

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

核心特性

1、提供者（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 的抽象层让模型可以即插即用。

2、流式输出（Streaming）

AI SDK 默认优先支持流式（streaming）输出。对于 Web 应用而言，这意味着用户能立即看到第一个 token，而非等待整个响应完成，极大提升交互体验。

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 应用的基本体验要求。

3、框架无关

虽然由 Next.js 团队打造，但 AI SDK 支持 React、Vue、Svelte、Nuxt、SvelteKit 甚至纯 Node.js。

例如在 SvelteKit 中：

// +page.server.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/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 即可消费流。

4、生成式 UI（Generative UI）

让 AI 不仅生成文本，还能生成可交互的 UI 组件。

例如，AI 可以返回一段 JSON 描述：“显示一个天气卡片，包含温度 23°C 和晴天图标”，前端自动将其渲染为 React 组件。

{
  "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 直接提供可操作的界面。

5、结构化输出

用 Zod 生成 JSON 对象，避免解析乱码：

import { generateObject } from 'ai';
import { z } from 'zod';

const result = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    name: z.string(),
    age: z.number(),
  }),
  prompt: '生成一个名字和年龄。',
});

结构化输出可以降低 AI 的幻觉问题，降低错误率。

6、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 为例：

1、安装

npm install ai @ai-sdk/openai

2、创建路由处理器 /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();
}

3、前端使用 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 阶段，更新了不少东西。

参考链接

关键词

AI SDK、大模型集成、统一API、流式输出、生成式UI、结构化输出、多框架支持、TypeScript、Vercel、开发者工具

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

avatar
文章
阅读
粉丝