vercel ai sdk使用指南（Nextjs版本）

快速开始

开始前请注意你的node环境是否符合Node.js 18+ 和 pnpm，没有pnpm，也可以用npm或者yarn安装也可以

1.首先创建一个空项目

bash 复制代码

pnpm create next-app@latest my-ai-app

cd到对应目录

bash 复制代码

cd my-ai-app

2.安装vercel的AI SDK包

安装AI 包和 AI SDK 的 React Hooks。AI SDK 的ai Vercel AI Gateway 提供程序包含在软件包中。您还需要安装schema validation 库，该库用于定义工具输入

bash 复制代码

pnpm add ai @ai-sdk/react zod

3.配置API Key(密钥)为环境变量

在项目根目录下创建一个文件.env.local，并添加你的API 密钥。

javascript 复制代码

AI_GATEWAY_API_KEY=xxxxxxxxx

xxxxxxxxx替换为你自己的密钥，密钥获取地址：Vercel AI Gateway

4.创建后端路由代码

创建一个路由处理程序，app/api/chat/route.ts并添加以下代码

javascript 复制代码

import { streamText, UIMessage, convertToModelMessages } from 'ai';

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

  const result = streamText({
    model: 'anthropic/claude-sonnet-4.5',
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

代码解释 ：

定义一个异步POST请求处理程序，并messages从请求体中提取信息。该messages变量包含您与聊天机器人之间的对话历史记录，并为聊天机器人提供生成下一代对话所需的上下文。这些messages信息属于 UIMessage 类型，专为应用程序 UI 使用而设计------它们包含完整的消息历史记录和相关的元数据，例如时间戳。

调用streamText从包中导入的函数ai。此函数接受一个包含model提供程序和messages（在步骤 1 中定义）的配置对象。您可以传递其他设置以进一步自定义模型的行为。messages需要一个ModelMessage[]数组。此类型与不同，UIMessage因为它不包含元数据，例如时间戳或发送者信息。要在这些类型之间进行转换，我们使用convertToModelMessages函数，该函数会剥离特定于 UI 的元数据并将UIMessage[]数组转换为ModelMessage[]模型所需的格式。

该streamText函数返回一个StreamTextResult结果对象。该结果对象包含将结果转换为流式响应对象的函数。 toUIMessageStreamResponse

最后，将结果返回给客户端以流式传输响应。

此路由处理程序在以下位置创建一个 POST 请求端点/api/chat

5.创建前端页面

javascript 复制代码

'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(message => (
        <div key={message.id} className="whitespace-pre-wrap">
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, i) => {
            switch (part.type) {
              case 'text':
                return <div key={`${message.id}-${i}`}>{part.text}</div>;
            }
          })}
        </div>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input
          className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={e => setInput(e.currentTarget.value)}
        />
      </form>
    </div>
  );
}

到这里你就成功完成一个简单的大模型调用啦，你也可以在第4步的model配置种配置不同的AI模型

模型列表可以访问连接查看：模型列表