Vercel AI SDK 中文介绍：快速上手指南

在人工智能浪潮席卷全球的当下，开发者们正积极探索如何将 AI 能力无缝集成到应用中。Vercel AI SDK 应运而生，它是一个由 Vercel 专门为构建 AI 驱动用户界面和应用程序而设计并维护的开源 TypeScript 工具包。本文将详细介绍 Vercel AI SDK 的核心特性，并提供一个快速上手的指南，帮助您轻松开启 AI 应用开发之旅。

什么是 Vercel AI SDK？

Vercel AI SDK 旨在极大地简化大型语言模型 (LLM) 的集成过程，特别是对于需要流式文本和聊天功能的“边缘就绪”AI 应用。无论您是想构建智能聊天机器人、内容生成工具，还是任何其他依赖 AI 驱动交互的应用程序，Vercel AI SDK 都能提供一个统一、高效且灵活的解决方案。

核心特性与优势

Vercel AI SDK 不仅仅是一个工具包，更是一个强大的生态系统，具备以下显著特点和优势：

1. 统一的 API 接口： AI SDK 最大的亮点之一是提供了一个统一的 API 接口，它抽象了不同 AI 模型提供商（如 OpenAI、Anthropic、Google Gemini 等）之间的差异。这意味着开发者无需为每个模型编写独立的集成代码，极大地减少了样板文件，提高了开发效率。
2. 多模型支持： 它支持市面上主流的 LLM 提供商，允许开发者根据项目需求和性能考量，灵活地选择和切换不同的 AI 模型。
3. 流式传输与响应缓存： 为了提供流畅且响应迅速的用户体验，Vercel AI SDK 对流式接口（如实时文本生成）和响应缓存提供了原生支持。这对于聊天机器人等需要实时交互的应用至关重要，用户无需等待完整的响应即可看到内容逐步生成。
4. 跨框架兼容性： AI SDK 具备出色的兼容性，能够与多种流行的前端和后端框架无缝集成，包括 Next.js、React、Vue、Svelte 以及 Node.js 等，确保您的 AI 应用能够融入现有的技术栈。
5. 生成结构化数据： 除了文本生成，AI SDK Core 还提供了 generateObject 和 streamObject 等高级函数，允许开发者生成符合特定 Schema 的结构化 JSON 数据。这在从文本中提取信息、生成合成数据或构建复杂 AI Agent 时非常有用。
6. 简化 AI 应用开发： 通过提供一系列工具和预构建组件，Vercel AI SDK 大幅简化了 AI 功能的开发流程，让开发者能够将更多精力集中在创新和用户体验上，而不是底层技术的实现细节。
7. AI SDK Core： 作为整个 SDK 的核心，它提供了一个强大的统一 API，充当了开发者与各大 LLM 供应商之间的“桥梁”，让调用任何 LLM 变得前所未有的简单。

快速上手指南

接下来，我们将通过一个简单的示例，教您如何使用 Vercel AI SDK 快速构建一个 AI 聊天应用。

环境准备

在开始之前，请确保您的开发环境满足以下条件：

• Node.js 18 或更高版本： 确保您的系统安装了最新版本的 Node.js。
• Next.js 基础知识： 如果您选择 Next.js 作为前端框架，建议您对其有基本的了解。
• AI 服务提供商 API 密钥： 您需要一个第三方 AI 服务提供商（例如 OpenAI 或 Google Gemini）的 API 密钥。

1. 创建 Next.js 项目并安装依赖

首先，创建一个新的 Next.js 项目，并安装 Vercel AI SDK 及其相关依赖。

“`bash

创建一个新的 Next.js 项目 (使用 TypeScript, App Router, src 目录等推荐配置)

npx create-next-app@latest my-ai-app –typescript –eslint –app –src-dir –import-alias “@/*”

进入项目目录

cd my-ai-app

安装 Vercel AI SDK 核心包、OpenAI 提供商包和 dotenv (用于加载环境变量)

npm install ai @ai-sdk/openai dotenv

或者使用 pnpm

pnpm add ai @ai-sdk/openai dotenv

或者使用 bun

bun add ai @ai-sdk/openai dotenv
``
这里的ai包包含了 AI SDK 的核心功能，@ai-sdk/openai提供了 OpenAI 模型的集成，而dotenv` 则用于方便地访问环境变量。

2. 配置 API 密钥

为了让您的应用能够与 AI 模型通信，您需要配置相应的 API 密钥。

• 获取 API 密钥： 访问您选择的 AI 服务提供商（如 OpenAI）的官方网站，获取您的 API 密钥。

• 创建 .env.local 文件： 在项目的根目录创建一个名为 .env.local 的文件，并将您的 API 密钥添加到其中。

  dotenv
OPENAI_API_KEY=YOUR_OPENAI_API_KEY_HERE
  注意： 将 YOUR_OPENAI_API_KEY_HERE 替换为您的实际 API 密钥。如果您使用 Vercel AI Gateway，则可能需要配置 AI_GATEWAY_API_KEY。

3. 创建后端 API 路由 (Next.js App Router)

接下来，我们将在 Next.js 的 App Router 中创建一个 API 路由，用于处理前端发送的聊天请求，并与 AI 模型进行交互。

在 src/app/api/chat/route.ts 路径下创建文件，并添加以下代码：

“`typescript
// src/app/api/chat/route.ts
import { streamText } from ‘ai’;
import { openai } from ‘@ai-sdk/openai’;
import ‘dotenv/config’; // 确保在文件顶部加载环境变量

// (可选) 设置运行时为 ‘edge’ 以获得更快的响应速度和更低的成本
export const runtime = ‘edge’;

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

// 使用 streamText 函数与 OpenAI 模型进行交互
const result = await streamText({
model: openai(‘gpt-4o-mini’), // 您可以选择其他 OpenAI 模型，例如 ‘gpt-4o’
messages, // 传递聊天消息历史
});

// 返回流式响应到客户端
return result.toAIStreamResponse();
}
``
这个路由会接收前端发送的消息，然后使用streamText函数调用 OpenAI 的gpt-4o-mini` 模型，并将 AI 生成的流式文本响应返回给客户端。

4. 创建前端聊天界面

现在，我们来创建前端的用户界面，用于显示聊天消息和发送用户输入。

修改 src/app/page.tsx 文件，内容如下：

“`typescript
// src/app/page.tsx
‘use client’; // 这是一个客户端组件

import { useChat } from ‘ai/react’; // 从 ai/react 导入 useChat 钩子

export default function Chat() {
// 使用 useChat 钩子管理聊天状态和交互逻辑
const { messages, input, handleInputChange, handleSubmit } = useChat();

return (

  {/* 聊天输入表单 */}
  <form onSubmit={handleSubmit}>
    <input
      className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
      value={input} // 绑定输入框的值
      placeholder="说点什么..." // 输入框提示文本
      onChange={handleInputChange} // 处理输入变化
    />
  </form>
</div>