Vercel AI SDK 使用介绍：功能、价格与上手指南

Vercel AI SDK 是一个专为 Web 开发者设计的开源工具包，用于在 React、Next.js、Svelte 等框架中快速集成大语言模型。本文介绍其核心功能、定价模式，并提供从安装到流式对话的完整上手指南。

什么是 Vercel AI SDK？

Vercel AI SDK 是 Vercel 推出的开源 TypeScript 工具包，旨在简化 AI 功能与 Web 应用的集成。它提供统一的 API 来调用 OpenAI、Anthropic、Google 等主流模型，并内置流式响应、工具调用和生成式 UI 等能力。

核心功能

  • 多模型支持：通过 @ai-sdk/openai、@ai-sdk/anthropic 等包切换模型，无需重写业务逻辑。
  • 流式响应：使用 streamText 和 useChat 实现打字机效果，提升用户体验。
  • 工具调用：定义 tools 让模型执行函数，如查询数据库或调用 API。
  • 生成式 UI：在 React Server Components 中直接渲染 AI 生成的结构化内容。
  • 框架无关：支持 Next.js、React、Svelte、Vue 和 Node.js。

价格方案

Vercel AI SDK 本身完全免费且开源（Apache 2.0 许可）。你只需支付底层模型提供商的 API 费用。Vercel 平台提供免费层用于部署，但 AI 调用成本取决于所选模型。

项目费用
AI SDK 库免费
模型 API按提供商计费（如 GPT-4o 约 $2.5/百万输入 token）
Vercel 部署免费层可用，Pro 版 $20/月

上手指南

1. 安装

在 Next.js 项目中运行：

npm install ai @ai-sdk/openai

2. 配置 API 密钥

在 .env.local 中添加：

OPENAI_API_KEY=sk-...

3. 创建 API 路由

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 = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toDataStreamResponse();
}

4. 前端调用

app/page.tsx：

'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} />
      </form>
    </div>
  );
}

5. 运行

npm run dev 后访问 http://localhost:3000 即可对话。

常见问题

Q：AI SDK 支持自托管模型吗？ A：支持，可通过 @ai-sdk/openai-compatible 连接兼容 OpenAI 接口的本地服务。

Q：如何切换模型？ A：只需替换 model 参数，如 anthropic('claude-3-5-sonnet')。

结论

Vercel AI SDK 是 Web 开发者集成 AI 的高效选择。它免费开源，功能强大，上手快速。建议从官方示例开始，逐步探索工具调用和生成式 UI。

返回 AI 教程列表