一、面试题目
纯浏览器端 AI Agent（无后端/纯前端） ：如何实现记忆、工具调用、RAG、流式输出、安全隔离？技术栈、原理、方案、限制。
二、知识储备
核心定义
纯浏览器 Agent = 完全运行在浏览器里的 AI 智能体
- 无服务器
- 无后端API
- 模型运行在浏览器（WebLLM / Transformers.js / Ollama WASM）
- 所有能力：记忆、工具、RAG、流式、安全 100% 前端实现
1. 记忆（Memory）如何实现？
纯前端记忆 = 内存记忆 + 持久化存储
实现方案
- 短期记忆
-
- 变量 /
Ref/Store保存当前对话上下文 - 窗口刷新即消失
- 变量 /
- 长期记忆
-
localStorage/sessionStorage/IndexedDB- 持久化对话历史、偏好、用户信息
- 向量记忆（RAG 记忆）
-
- 浏览器端向量库：Vite + Chroma WASM / FAISS WASM / JS 向量库
- 本地向量化、本地检索
- 记忆总结
-
- 浏览器内小模型总结长对话，压缩上下文
技术栈
localStorage、IndexedDB、JS Vector DB- 浏览器端 Embedding 模型
2. 工具调用（Tool Calling / Skill）如何实现？
纯前端无后端，工具必须全部是浏览器原生能力
可实现工具
- 读取本地文件（File API）
- 搜索浏览器内数据
- 操作 DOM
- 调用浏览器 API（日历、通知、剪贴板）
- 发送 fetch（跨域限制）
- 调用本地模型（WASM）
实现流程
- 前端模型判断是否需要调用工具
- 直接调用浏览器原生 API / 本地函数
- 结果返回给模型
- 模型生成回答
关键点
- 无后端 = 无云服务调用
- 工具都是本地函数
- 安全沙箱限制
3. 纯前端 RAG 如何实现？
完全在浏览器里跑 RAG 全流程：
完整流程
- 文件上传（PDF/Word/TXT）→ 前端解析（pdf.js）
- 文本切块（前端 JS 切块）
- 前端 Embedding（Transformers.js / WebLLM）
- 向量存储（IndexedDB + JS 向量库）
- 用户问题检索（前端相似度检索）
- 送入本地模型生成答案
技术栈
pdf.js、mammothtransformers.jslocalForage/IndexedDB- 浏览器向量库
特点
- 数据不上云
- 完全隐私计算
- 速度取决于设备性能
4. 流式输出（Streaming）如何实现？
纯前端无 SSE / WebSocket，流式来自模型推理
实现方案
- 浏览器模型支持 Token 流式输出
- 每生成一个 Token，立即推送到界面
- 前端打字机效果渲染
核心代码思路
// 浏览器模型流式生成
const stream = await model.generateStream(prompt);
for await (const token of stream) {
renderToUI(token); // 打字机
}技术
- Generator 函数
- Async Iterator
- 前端流式渲染
5. 安全（Security）如何实现？
纯浏览器 Agent 安全 = 浏览器原生沙箱
安全机制
- 同源策略（CORS）
-
- 不能跨域请求
- 不能读取本地文件除非用户上传
- 沙箱隔离
-
- 代码运行在浏览器沙箱
- 无法访问操作系统
- 权限最小化
-
- 不申请多余权限
- 数据不上传
-
- 隐私数据完全本地
- IndexedDB 加密存储
- XSS 防护
-
- 前端渲染转义
- 不执行动态代码
结论
纯浏览器 Agent 天然比云端 Agent 更安全
三、整体技术架构（纯前端 Agent）
浏览器环境
├── 本地模型（WASM/WebLLM/Transformers.js）
├── 记忆模块（IndexedDB/localStorage）
├── RAG 模块（pdf.js + 前端Embedding + 向量库）
├── 工具模块（浏览器原生API/本地函数）
├── 流式渲染（打字机/多模态）
└── 安全沙箱（浏览器天然隔离）四、破局之道（面试升华）
纯浏览器 AI Agent 是未来重要方向，核心价值是隐私、离线、实时、无服务、无成本 。
它通过：
- IndexedDB/内存实现记忆
- 浏览器 API 实现工具调用
- 前端 Embedding + 本地向量库实现 RAG
- 模型流式输出实现打字机
- 浏览器沙箱实现安全隔离
所有能力完全在前端实现，不依赖后端、不上传数据、隐私优先。
30 秒口述精简版
纯浏览器 AI Agent 完全运行在前端：
记忆用 IndexedDB + 内存存储 ；
工具调用 浏览器原生 API ；
RAG 用 pdf.js + 前端Embedding + 本地向量库 ；
流式输出来自 浏览器模型流式推理 ；
安全依靠 浏览器沙箱、同源策略、数据本地化 。
整体无后端、不上云、隐私安全。