前端进阶 · 第 5 章前后端 × AI 协同：接大模型

智

第 5 章　前后端 × AI 协同：接大模型

Vercel AI SDK, Streaming, Function Calling

2024 年以后，前端的新标配是接大模型。聊天界面、AI 搜索、文档总结、代码助手——本质都是调 AI API + 流式输出 + 工具调用。这一章讲怎么在 React 里把这事做好。

流式输出：大模型逐字蹦字

大模型不是一次吐完答案，是一个 token 一个 token 往外蹦。前端要做"打字机效果"，就得用 SSE（Server-Sent Events）+ ReadableStream 一边收一边显示。

Vercel AI SDK：把流式聊天封装成 React Hook

import { useChat } from "ai/react";

function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: "/api/chat",   // 你后端代理 OpenAI 的接口
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role === "user" ? "我" : "AI"}：</b>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button disabled={isLoading}>发送</button>
      </form>
    </div>
  );
}

API Key 绝不能放前端

前端代码用户按 F12 全看得见。OpenAI / Anthropic 的 API Key 必须放在你自己的后端环境变量里，前端只调你自己的 /api/chat。把 Key 写死在前端，等于把银行卡密码贴门上。

同时要做：输入长度限制、速率限制、输出内容审核，防止有人拿你的后端跑别人的账单。

Function Calling：让 AI 会用工具

AI 本身只会说话，但可以"调用工具"：你在请求里告诉 AI 有哪些工具（函数名、参数 schema），AI 判断需要时会返回"我要调用 getWeather(city="南京")"，你的代码真去调天气 API，把结果再喂回给 AI，AI 接着生成自然语言回答。这就是 Agent 的基础。

其他 AI 前端能力

多模态：图片上传、语音输入（Web Speech API）、语音合成（SpeechSynthesis）。
RAG 前端：文档上传 → 切片 → 向量化 → 检索 → 生成，前端负责展示引用来源。
流式 UI：打字机、思考过程展示、工具调用动画。
本地 AI：WebLLM / Transformers.js 在浏览器里跑小模型，数据不出用户电脑，隐私好。

Vercel AI SDK 4.x：AI 应用标准工具包

2024 后接大模型别自己裸写 fetch + SSE 解析了。Vercel AI SDK 把流式输出、工具调用、结构化输出全封装好，React/Vue/Svelte/Solid 都能用。

// 后端 route.ts：streamText 把模型流转成 SSE
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai("gpt-4o"),
    messages,
    tools: {                       // 工具调用：让 AI 查天气
      getWeather: {
        description: "查天气",
        parameters: z.object({ city: z.string() }),
        execute: async ({ city }) => (await fetch(`/api/weather?city=${city}`)).json(),
      },
    },
  });
  return result.toDataStreamResponse();
}

// 前端 useChat：messages/input/handleSubmit/isLoading/stop 全给你
const { messages, input, handleInputChange, handleSubmit, isLoading, stop } =
  useChat({ api: "/api/chat" });
// generateText/streamText 非流式；streamObject 流式拿结构化 JSON；useObject 渲染结构化输出

前端 AI 应用的几种范式

聊天界面：消息列表 + 输入框 + 流式打字 + Markdown 渲染（marked）+ 代码高亮（highlight.js/prism.js）+ 停止/重新生成按钮。
RAG 前端：文档上传进度条、引用来源列表、相关文档展示。
Agent 前端：思维链卡片展示"正在调用工具"、步骤可视化、进度条。
多模态：图片上传预览、语音输入（Web Speech API）、语音输出（SpeechSynthesis）。

AI 辅助开发工具链

工具	定位
GitHub Copilot	IDE 内代码补全 + Chat + CLI。
Cursor	AI 代码编辑器，Composer 多文件编辑、Agent 模式。
Windsurf	Codeium 出品，Cascade Agent。
Claude Code	终端里的 AI 编程助手。
v0	Vercel 的 AI UI 生成器，出 React+Tailwind+shadcn 组件。
bolt.new	StackBlitz 的 AI 全栈应用生成，浏览器里直接跑。

本章面试题

Q1. 为什么 AI 输出要流式？前端怎么实现打字机效果？

看答案

大模型逐 token 生成，流式（SSE/ReadableStream）能边收边显示，首字延迟低、体感快。前端读 response.body.getReader() 逐块 decode 拼到当前消息末尾。

Q2. Function Calling 是什么？和 Agent 什么关系？

看答案

在请求里告诉模型有哪些工具（函数名+参数 schema），模型判断需要时返回要调哪个函数、参数是什么，你的代码真去执行再把结果喂回，模型继续生成。多轮工具调用循环就是 Agent。

Q3. API Key 为什么不能放前端？

看答案

前端代码 F12 全可见，Key 被拿走就被刷账单。必须放后端环境变量，前端只调自己后端的 /api/chat，并加鉴权和限流。

← 上一节：第 4 章 Electron：老牌桌面方案前端进阶 · 总览下一节：第 6 章性能优化：让页面快到飞起 →