15分钟搭建多模型切换AI聊天应用

15分钟搭建多模型切换AI聊天应用

上周和做电商的朋友交流，他想给后台接入AI客服，但团队对AI接口集成不熟悉，折腾两天还在调试 OpenAI API。推荐 Vercel AI SDK 后，他很快跑通了基础功能。处理流式响应、错误重试、适配多模型格式等底层工作，该SDK已全部封装。开发者只需专注业务逻辑。本文将带你从零搭建支持 OpenAI、Anthropic、Google 动态切换的流式聊天应用，代码可直接复用于生产环境。

前置准备

确保运行环境满足以下基础条件：

• Node.js 22 或更高版本（执行 node -v 验证，低版本可能因语法不兼容导致构建失败）
• 任意主流 AI 模型 API Key（OpenAI、Anthropic、Google 等均可）
• 掌握 TypeScript 与 Next.js App Router 基础概念
• 初始化 Next.js 项目：npx create-next-app@latest

推荐使用 Vercel AI Gateway 作为统一入口，无需安装各模型专属 SDK。一个 ai 核心包即可调用所有主流模型，大幅降低新手入门与后期维护成本。

第一步：安装与基础配置

核心依赖仅需安装主包：

npm install ai

该包内置流式输出管理、消息拼装与错误处理逻辑。安装完成后，配置应用与模型的连接方式。

AI SDK 提供统一网关入口：Vercel AI Gateway。调用模型时只需传入标准字符串，例如 openai/gpt-4o、anthropic/claude-sonnet-4-20250514。网关会自动处理鉴权、路由分发与限流策略。采用统一网关后，切换模型如同修改路由参数，避免多 SDK 混用带来的版本冲突与维护负担。实际项目中测试不同模型效果时，统一入口能保持代码简洁，提升迭代效率。

第二步：实现后端 API 路由

在项目 app/api/chat/route.ts 创建路由文件：

import { streamText, Message } from 'ai';

export async function POST(req: Request) {
  const { messages, model = 'openai/gpt-4o' } = await req.json();

  const result = streamText({
    model: model, // 支持动态传参：openai/gpt-4o / anthropic/claude-sonnet-4 / google/gemini-2.5-pro
    system: '你是一个专业的技术助手，回答简洁明了。',
    messages,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

路由逻辑拆解：

1. 参数解析：提取前端传递的消息历史与模型标识。前端动态提交模型名称，后端直接复用该值发起调用，实现多模型切换核心机制。
2. 流式调用：streamText 为高频 API，启用流式输出后，服务端会按 Token 逐步生成内容，通过 HTTP 分块传输协议推回客户端。用户可实时逐字接收生成结果，体验显著优于等待完整响应。
3. 标准响应：toDataStreamResponse() 将数据流序列化为 AI SDK 标准格式，前端 useChat Hook 可直接消费该流，自动处理分包与重组。

第三步：前端聊天界面

安装 React 适配层：

npm install @ai-sdk/react

页面组件完整实现：

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

export default function ChatPage() {
  const [model, setModel] = useState('openai/gpt-4o');

  const { messages, input, handleInputChange, handleSubmit, status } =
    useChat({
      body: { model }, // 透传模型参数至后端
      api: '/api/chat',
    });

  return (
    <div className="max-w-2xl mx-auto p-4">
      <select
        value={model}
        onChange={e => setModel(e.target.value)}
        className="border rounded px-2 py-1 mb-4"
        disabled={status !== 'ready'}
      >
        <option value="openai/gpt-4o">GPT-4o</option>
        <option value="anthropic/claude-sonnet-4-20250514">Claude Sonnet 4</option>
        <option value="google/gemini-2.5-pro">Gemini 2.5 Pro</option>
      </select>

      <div className="space-y-3 mb-4">
        {messages.map(m => (
          <div key={m.id}>
            <strong>{m.role}:</strong>
            {m.parts.map((p, i) => p.type === 'text' && <p key={i}>{p.text}</p>)}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="输入你的问题..."
          disabled={status !== 'ready'}
          className="w-full border rounded px-3 py-2"
        />
      </form>
    </div>
  );
}

useChat Hook 自动接管状态管理、API 请求与流数据消费。开发者仅需关注 UI 渲染。body: { model } 将下拉框选中的模型标识透传至后端，配合第二步的 req.json() 解构，形成完整的前后端联动链路。status 字段实时监控连接状态（ready/submitted/streaming），用于合理控制输入框与下拉框的禁用逻辑，避免并发请求冲突。消息数组 messages 已按角色分类拼接，直接遍历渲染即可呈现完整对话历史。

第四步：运行与验证

启动开发服务：

npm run dev

访问 http://localhost:3000，界面已包含聊天区域与模型切换组件。尝试切换至 Claude 或 Gemini 发送测试消息，观察响应速度与语气差异。模型切换全程无需重启服务或修改代码，验证了网关路由的热替换能力。

常见问题排查

Q1：调用报 model not found？
核对模型标识格式。Vercel Gateway 要求严格遵循 provider/model-name 规范。若使用官方直连 SDK，需改用 openai('gpt-4o') 等函数构造器形式。

Q2：流式输出卡顿或中断？
确认后端返回值为 result.toDataStreamResponse()。误用普通 JSON 响应会阻塞流式传输。同步检查前端 api 路径是否与后端路由文件匹配，网络拦截器未错误中断请求。

Q3：环境变量如何配置？
在项目根目录 .env.local 填写对应 Provider Key，如 OPENAI_API_KEY。SDK 启动时自动读取，无需在代码中手动注入。部署至生产环境时，请通过云平台密钥管理面板注入，避免硬编码泄露。

Q4：非 Next.js 框架是否支持？
核心包 ai 为框架无关设计。Express 或纯 Node 环境可直接调用 generateText。UI 层交互需替换为对应框架适配包（@ai-sdk/vue、@ai-sdk/svelte 等），底层流处理逻辑保持一致。

进阶方向

当前代码已具备生产可用的多模型流式聊天基础。后续可深入两项核心能力：

• 结构化输出：结合 Output.object 与 Zod Schema，约束 AI 返回标准 JSON，适用于订单解析、数据提取等场景。
• Agent 工具调用：引入 ToolLoopAgent 赋予模型执行外部操作的能力，如调用 API、操作数据库或生成多媒体文件。

掌握流式交互与状态透传后，扩展上述功能将十分顺畅。开发过程中如遇环境配置或渲染异常，欢迎在评论区交流。

_项目仓库：https://github.com/vercel/ai | 官方文档：https://ai-sdk.dev/docs_