Vercel AI SDK实战：全流程构建现代Web AI应用与聊天机器人

随着大语言模型（LLM）的日益普及，开发者们越来越频繁地需要将它们集成到Web应用、聊天机器人等各种场景中。然而，不同的模型提供商（如DeepSeek、OpenAI、Anthropic、Google等）在API接口、请求方式和响应格式上存在显著差异。同时，不同的Web框架（如React/Next.js、Vue/Nuxt、Node.js等）也带来了额外的兼容性与工程复杂性挑战。

Vercel AI SDK应运而生，它通过 “统一API + 框架无关的UI组件 + 多模型适配器” 这一设计，将“调用LLM”与“构建交互式UI”的复杂性封装起来。开发者得以更专注于业务逻辑本身，而无需过多分心于底层模型和前端框架的差异。简而言之，Vercel AI SDK旨在为“将AI能力接入现代Web应用”这一过程，提供一套从原型到生产环境都适用的、标准且高效的开发工具。

当前，Vercel AI SDK的最新版本为 AI SDK 6（目前处于Beta阶段）。如果你倾向于使用稳定版本，可以继续采用 AI SDK 5。

Vercel AI SDK 官网：https://ai-sdk.dev
Vercel AI SDK 开源地址：https://github.com/vercel/ai

核心模块解析

AI SDK Core

这是SDK的核心，提供了一套统一的API，用于调用语言模型、生成文本、结构化对象/数组、执行工具调用以及处理流式响应等。其核心价值在于通过统一的接口屏蔽了不同模型提供商（Provider）的差异。SDK本身不绑定任何特定模型，而是通过Provider适配器机制来支持众多主流LLM服务商，如官方已支持的DeepSeek、OpenAI、Anthropic、Google、xAI Grok等，同时也支持自定义Provider。

AI SDK UI

这一部分为前端开发提供了与框架（如React、Vue、Svelte、Angular等）深度集成的hooks或组件（例如 useChat、useCompletion）。利用这些封装好的UI抽象，开发者可以轻松构建聊天界面、生成式UI、流式聊天界面以及Agent UI等，并且能够在多种前端架构中复用。

核心包功能详解与选型指南

ai — Core SDK

• 功能：核心包，提供框架无关的统一API，用于调用任何兼容Provider的LLM。
• 场景：适用于后端服务、API路由、CLI工具等需要调用LLM生成文本、结构化输出或执行工具调用（如查询数据库、调用外部API）的场景。当你想编写跨Provider（如DeepSeek、OpenAI）的通用逻辑时，它尤为有用。
• 安装：

  npm install ai

@ai-sdk/openai — OpenAI Provider 适配包

• 功能：模型Provider适配器。当你希望使用OpenAI（或兼容OpenAI API的模型，如Kimi）作为LLM提供商时，此包负责将其集成到Core中。
• 场景：计划使用OpenAI的模型（GPT-4o等）或任何兼容OpenAI API规范的模型。
• 安装：

  npm install @ai-sdk/openai

  （注意：需要同时安装 ai 核心包才能使用）

• 示例：

  
  import { generateText } from 'ai';
  import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
model: openai('gpt-4o'),
prompt: '介绍一下 Vercel AI SDK',
});

### `@ai-sdk/react` — React UI 层
- **功能**：为React应用（包括Next.js）提供UI层抽象（hooks/组件），便于在前端快速构建聊天、生成内容等交互界面。它封装了消息列表管理、用户输入、请求状态、UI更新以及与后端API交互的全流程，特别是在与 **[人工智能](https://yunpan.plus/f/29-1)** 技术结合构建交互应用时，能极大提升开发效率。
- **场景**：开发需要直接向用户展示交互界面（如聊天框）的React/Next.js前端项目，希望快速搭建UI而无需从头管理复杂状态。
- **安装**：
```bash
npm install @ai-sdk/react

快速实战：构建AI聊天应用

下面通过一个完整的示例，演示如何利用Vercel AI SDK快速构建一个简单的AI聊天应用。

第一步：创建 Next.js 项目

使用以下命令创建一个新的Next.js项目，并选择TypeScript、Tailwind CSS和App Router。

npx create-next-app@latest ai-chatbot
cd ai-chatbot

第二步：安装依赖

安装Vercel AI SDK的核心包、OpenAI Provider以及React UI包。

npm install ai @ai-sdk/openai @ai-sdk/react

第三步：配置环境变量

在项目根目录创建 .env.local 文件，填入你的API密钥。以下以兼容OpenAI API的Kimi为例：

# 使用兼容 OpenAI 的 Kimi API
OPENAI_API_KEY=your_kimi_api_key_here
OPENAI_BASE_URL=https://api.moonshot.cn/v1

第四步：创建后端API路由

创建文件 app/api/chat/route.ts，用于处理聊天请求并调用LLM。

import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai";

// 创建自定义的 Kimi (Moonshot AI) Provider
const kimi = createOpenAI({
  baseURL: "https://api.moonshot.cn/v1",
  apiKey: process.env.OPENAI_API_KEY,
});

// 设置流式响应最大时长
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  // 调用模型，生成流式响应
  const result = streamText({
    model: kimi.chat("moonshot-v1-8k"),
    messages,
  });

  // 返回流式响应
  return result.toTextStreamResponse();
}

第五步：创建前端聊天界面

修改 app/page.tsx，使用 @ai-sdk/react 提供的 useChat hook 构建交互界面。

"use client";
import { useState } from "react";
import { useChat } from "@ai-sdk/react";
import { TextStreamChatTransport } from "ai";

export default function ChatPage() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status, error } = useChat({
    transport: new TextStreamChatTransport({
      api: "/api/chat",
    }),
  });
  const isLoading = status === "streaming" || status === "submitted";

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-8">
      <div className="w-full max-w-2xl flex flex-col h-[80vh]">
        <h1 className="text-3xl font-bold mb-6 text-center">AI 聊天助手</h1>
        {/* 消息列表区域 */}
        <div className="flex-1 overflow-y-auto mb-4 space-y-4 p-4 bg-gray-50 rounded-lg">
          {messages.length === 0 && (
            <div className="text-center text-gray-500 mt-10">
              开始对话吧！向 AI 助手提问任何问题。
            </div>
          )}
          {messages.map((message) => {
            const textContent = message.parts
              ?.filter((part) => part.type === "text")
              .map((part) => part.text)
              .join("") || "";
            return (
              <div
                key={message.id}
                className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
              >
                <div
                  className={`max-w-[80%] rounded-lg px-4 py-2 ${message.role === "user"
                      ? "bg-blue-500 text-white"
                      : "bg-white text-gray-800 border border-gray-200"
                    }`}
                >
                  <div className="text-xs font-semibold mb-1 opacity-70">
                    {message.role === "user" ? "你" : "AI 助手"}
                  </div>
                  <div className="whitespace-pre-wrap">{textContent}</div>
                </div>
              </div>
            );
          })}
          {/* 加载状态指示器 */}
          {isLoading && (
            <div className="flex justify-start">
              <div className="bg-white text-gray-800 border border-gray-200 rounded-lg px-4 py-2">
                <div className="flex space-x-2">
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0.1s" }}></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0.2s" }}></div>
                </div>
              </div>
            </div>
          )}
          {/* 错误显示 */}
          {error && (
            <div className="text-center text-red-500 p-4 bg-red-50 rounded-lg">
              错误：{error.message}
            </div>
          )}
        </div>
        {/* 输入表单 */}
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (input.trim()) {
              sendMessage({ text: input });
              setInput("");
            }
          }}
          className="flex gap-2"
        >
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="输入消息..."
            disabled={isLoading}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
          />
          <button
            type="submit"
            disabled={isLoading || !input.trim()}
            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
          >
            {isLoading ? "发送中..." : "发送"}
          </button>
        </form>
      </div>
    </main>
  );
}

第六步：运行项目

启动开发服务器，即可体验完整的AI聊天功能。

npm run dev

访问 http://localhost:3000，你将看到一个功能完善的AI聊天界面。

总结

Vercel AI SDK 是目前 JavaScript/TypeScript 生态中，用于整合大语言模型与现代 Web开发 技术栈最全面、最便捷的开源工具之一。

• 快速启动：对于希望快速构建聊天机器人、生成式应用、RAG系统或进行原型的开发者，它能显著降低技术门槛和工程成本。
• 统一抽象：对于需要支持多模型提供商、跨前端框架或跨运行时（Server/Edge/Frontend）的项目，它提供了稳定、统一且可扩展的基础设施。
• 生产就绪：其设计考虑了从开发到生产的全流程，是构建 AI应用开发 的推荐起点和最佳实践之一。

当然，对于有极致的性能要求、特殊的模型或极其定制化场景的项目，可能仍需要更底层的方案。但对于绝大多数希望将AI能力融入Web应用的场景，Vercel AI SDK都是一个强大而高效的选择。