端侧 AI 与前端架构未来：Web LLM / Chrome AI / CopilotKit

前言

做前端架构的人要不要懂 AI？我的回答是 要——不是去训练 LLM，而是建立”AI 时代前端架构的新打法”的工程判断。原因有三：

1. 简历里”AI 技术下前端的新打法”是真实机会。Web LLM 跑在浏览器、Chrome 内置 AI API、CopilotKit 嵌入式 Copilot —— 这些是 2024-2025 真实可用的端侧 AI 技术。
2. AI 时代前端架构正在重新定义。从”前端只渲染 UI”到”前端是 AI 应用的载体”——架构师必须有”AI 嵌入 UI”的思维。
3. LLM API 之外的新机会。WebGPU + WebLLM 让浏览器跑 LLM,Chrome 内置 Gemini Nano,前端不再只是 AI 应用的”调用方”。

这一篇是『前端架构修仙路』的第 28 篇。我跳过具体 LLM 训练（不讲 transformer 原理），用架构图 + 真实项目 + 决策表，把 Web LLM / Chrome AI / CopilotKit / 新前端打法讲透。下一篇深度聊从高级到架构师的角色转变。

一、AI 时代前端架构的三个层级

三个层级：

1. 云端 LLM（OpenAI / Anthropic / Gemini）—— API 调用 + 流式响应
2. 端侧 LLM（Web LLM / Chrome 内置 AI）—— 浏览器内运行,零后端
3. Edge LLM（Cloudflare Workers AI / Vercel AI Edge）—— 边缘节点运行,低延迟

架构师心法：选哪一层 = 隐私 vs 成本 vs 延迟的权衡。敏感数据用端侧,通用任务用云端,延迟敏感用 Edge。

二、Web LLM：浏览器内跑大模型

// transformers.js (Hugging Face)
import { pipeline } from '@xenova/transformers';

const classifier = await pipeline('sentiment-analysis');
const result = await classifier('I love transformers.js!');
// { label: 'POSITIVE', score: 0.9998 }

优势：

• 零后端 — 全部在浏览器跑
• 隐私保护 — 数据不出用户设备
• 离线可用 — 没有网络也能跑

生产案例：某 ToB SaaS 端侧敏感数据脱敏,用 transformers.js 跑 NER 实体识别,数据不出浏览器——满足 GDPR / HIPAA 合规。

三、Chrome 内置 AI：Gemini Nano

// Chrome Built-in AI API
const session = await LanguageModel.create({
  systemPrompt: '你是一个 helpful assistant',
});

const stream = session.promptStreaming('写一首关于秋天的诗');
for await (const chunk of stream) {
  console.log(chunk);
}

核心优势：

• 零网络 — 浏览器自带,离线可用
• 零成本 — 不用付 API 调用费
• 零隐私问题 — 数据不出设备
• 快速响应 — 不走网络,延迟 < 100ms

生产案例：Chrome 内置 AI 用于内容审核 / 翻译 / 摘要——用户每次操作零成本,后台不烧钱。

四、CopilotKit：嵌入式 AI Copilot

import { CopilotKit } from '@copilotkit/react-core';
import { CopilotChat } from '@copilotkit/react-ui';

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <Dashboard />
      <CopilotChat
        instructions="你是 FinUI ERP 的助手,帮用户查询订单 / 客户 / 报表"
      />
    </CopilotKit>
  );
}

CopilotKit 三件套：

• CopilotChat — 浮窗 AI 聊天 UI
• CopilotTextarea — 文本输入框 AI 补全
• CopilotActions — 业务 AI 动作(createOrder / analyzeData)

生产案例：某 ERP 接入 CopilotKit,用户说”查询上个月华东区订单” → 后端 LLM 调用 + 返回结果 + 渲染到表格 —— 业务方零开发。

五、Speculative Decoding：AI 流式响应优化

// 普通 LLM 调用
const response = await fetch('/api/llm', {
  method: 'POST',
  body: JSON.stringify({ prompt: '...' }),
});
// 用户等 3 秒看全部响应

// Speculative Decoding: 边生成边渲染
const stream = await fetch('/api/llm/stream', { ... });
const reader = stream.body.getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // 每收到一个 chunk 立即渲染
  const partial = new TextDecoder().decode(value);
  appendToUI(partial);  // 立即追加到 UI
}

优化效果：

• TTFT（Time To First Token）从 3s → 200ms
• 用户感知速度 提升 10 倍
• 逐字显示 —— 像是真人在打字

六、新前端打法：AI 嵌入的 UI 模式

6.1 智能补全

// CopilotKit 智能补全
import { CopilotTextarea } from '@copilotkit/react-ui';

function CommentEditor() {
  return (
    <CopilotTextarea
      placeholder="写评论..."
      autosuggestionsConfig={{
        textareaPurpose: "评论产品",
        chatApiConfigs: {},
      }}
    />
  );
}

6.2 AI 智能操作

// AI 帮用户操作
function OrderList() {
  const { addAction } = useCopilotAction({
    name: "filterOrders",
    description: "按状态过滤订单",
    parameters: [
      { name: "status", type: "string", enum: ["pending", "paid", "shipped"] }
    ],
    render: ({ args }) => <OrderList status={args.status} />,
  });
  
  return <Table dataSource={orders} />;
}

架构师心法：AI 时代的 UI = 命令式操作——用户说”过滤已支付的订单”,AI 直接调用 render 函数,无需业务方实现交互。

七、AI 前端架构决策表

场景	推荐方案	理由
通用聊天 / 总结	云端 LLM API	模型能力强,成本可控
敏感数据 / 离线	端侧 LLM (WebLLM / Chrome AI)	隐私保护,零后端
实时翻译 / 审核	端侧 LLM (transformers.js)	浏览器内运行,零延迟
嵌入式 Copilot	CopilotKit + 云端 LLM	快速集成,UI 现成
延迟敏感 (聊天流式)	Edge LLM (Cloudflare AI)	边缘节点 5ms 延迟
AI 补全 / 智能操作	CopilotKit + Actions	业务方零开发

八、踩坑提醒（资深架构师请重点看）

1. 不要把所有 AI 任务都上云。敏感数据用端侧 LLM,GDPR / HIPAA 合规需求必用。
2. 不要让用户等 LLM 响应。Speculative Decoding + 流式渲染,TTFT 200ms 才是合格。
3. 不要让 AI 输出不可信。幻觉 是 LLM 天性——业务关键决策不依赖 LLM,AI 只做建议 / 草稿。
4. 不要忽视成本。GPT-4 级别模型 1 万次调用 ≈ $50,Chrome 内置 AI 零成本——量级差异巨大。
5. 不要让 AI 完全替代人类交互。AI 嵌入 UI 是辅助,不是替代——用户永远需要”取消 / 跳过 AI”的选项。

总结

这一篇用 6 个关键事实把 AI 时代前端架构串起来：

• 三层 LLM 架构:云端 / 端侧 / Edge,选哪层 = 隐私 / 成本 / 延迟的权衡。
• Web LLM (transformers.js) — 浏览器内跑 LLM,零后端,GDPR / HIPAA 合规。
• Chrome 内置 AI (Gemini Nano) — 浏览器自带,零成本,离线可用。
• CopilotKit — 嵌入式 Copilot 快速集成,UI 现成,业务方零开发。
• Speculative Decoding — 流式响应 + 立即渲染,TTFT 从 3s 降到 200ms。
• AI 嵌入 UI — CopilotTextarea 智能补全 + CopilotActions 智能操作,用户用自然语言操作 UI。

下一篇:从高级到架构师——3-5 人团队管理、评审机制、技术决策的”道与术”。

5 道重点面试题方向

Q1(答案):AI 时代前端架构的三个层级是什么?为什么不能「所有 AI 任务都上云」?

A:三个层级:① 云端 LLM(OpenAI / Anthropic / Gemini) — 模型最强,成本按量;② 端侧 LLM(Web LLM / Chrome 内置 AI) — 浏览器内运行,零后端,隐私保护;③ Edge LLM(Cloudflare Workers AI / Vercel AI Edge) — 边缘节点,低延迟。为什么不能全上云:① 隐私 — 敏感数据（医疗 / 金融）用云端违法;② 成本 — GPT-4 1 万次 ≈ $50,Chrome AI 零成本;③ 延迟 — 云端 500ms+ 往返,端侧 < 100ms;④ 离线 — 飞机 / 地铁 / 海外场景需要。

Q2(思考):Web LLM 和 Chrome 内置 AI 怎么选?什么时候用哪个?

A:Web LLM (transformers.js):① 可换模型 — 任何 Hugging Face 上的模型都支持;② 跨浏览器 — 所有现代浏览器;③ bundle size 较大（模型 100MB+)。Chrome 内置 AI (Gemini Nano):① 零成本 — 浏览器自带,零下载;② 零延迟 — 不用下载模型,本地推理;③ 只在 Chrome — Safari / Firefox 不支持。选型:多模型 + 跨浏览器 用 transformers.js;只 Chrome + 性能敏感 用 Built-in AI;Safari / 移动端 必须用 Web LLM。

Q3(思考):Speculative Decoding 的工作原理是什么?TTFT 为什么能优化 10 倍?

A:Speculative Decoding:服务器先猜几个 token 一起返回,客户端立即显示;如果猜对 = 速度提升 3-5 倍;如果猜错 = 回退。TTFT (Time To First Token) 从”等模型生成第一个 token”(几百 ms) 降到”立刻显示”(几十 ms)。前端实现:fetch + ReadableStream + 逐 chunk 渲染,用户感觉像是真人在打字。生产案例:AI 编程助手 Copilot 用此技术,输入框实时补全像 VSCode IntelliSense 一样快。

Q4(思考):CopilotKit 是什么?怎么用它快速集成 AI Copilot?

A:CopilotKit 是开源的 AI Copilot 框架,3 个核心组件:① CopilotChat — 浮窗 AI 聊天 UI,10 行代码集成;② CopilotTextarea — 文本框 AI 补全（类似 GitHub Copilot);③ CopilotActions — 业务 AI 动作,LLM 调函数渲染 UI。集成 3 步:① 装 @copilotkit/react-core + @copilotkit/react-ui;② <CopilotKit runtimeUrl="/api/copilotkit"> 包裹应用;③ 加 <CopilotChat> UI 组件 + 注册 actions。生产案例:ERP 接入 CopilotKit,用户说”查询上个月订单” → 后端 LLM 调 queryOrders 函数 → 返回数据 + 渲染到表格 —— 业务方零开发。

Q5(思考):你作为前端架构师,是怎么判断一个 AI 任务该上云、端侧、还是 Edge?举一个真实案例?

A:决策框架:① 敏感数据 → 端侧 (GDPR / HIPAA);② 延迟敏感 → Edge;③ 通用任务 + 大模型 → 云端;④ 离线 → 端侧。真实案例:顺丰 ERP AI 助手:① 通用查询（订单 / 客户)— 云端 GPT-4o(mini 版控制成本);② 财务报表分析（敏感)— 端侧 LLM(数据不出公司);③ AI 补全输入框（低延迟)— Edge (Cloudflare AI,5ms);④ 翻译文档（离线)— 端侧 transformers.js。结果:成本降低 60%(端侧分担 30% 任务),合规性满足（敏感数据不出域),延迟 < 100ms(Edge 主导)。

💡 每道题后面都有 AI 助手按钮,一键拿到详细答案。

参考资料

• transformers.js (GitHub) — Hugging Face 浏览器端 LLM
• Chrome Built-in AI (Google) — Chrome 内置 AI 官方指南
• Web LLM (GitHub) — Web LLM 浏览器跑 LLM
• CopilotKit Documentation — CopilotKit 官方文档
• Vercel AI SDK (Vercel) — Vercel AI 集成 SDK
• Cloudflare Workers AI (Cloudflare) — Cloudflare Edge AI