一、边缘计算的最后一公里

在前面的章节中，我们讨论了 MCP 在云端、数据中心、边缘网关的部署。这些场景的共同特点是：Agent 运行在服务器端，用户通过 API 或聊天界面与 Agent 交互。但还有一种重要的场景被忽略了：在用户自己的设备上运行 Agent。

在浏览器中运行 Agent 有几个独特的优势。零延迟，Agent 直接在用户设备上运行，没有网络往返延迟。数据隐私，用户的敏感数据不需要离开设备，降低了隐私风险。离线可用，即使没有网络连接，Agent 仍然可以工作。降低服务器成本，计算任务从云端转移到客户端。

然而，在浏览器中运行 Agent 面临挑战。JavaScript 性能有限，大模型推理需要大量计算。浏览器沙箱限制了系统访问能力。MCP 协议原本是为服务器端设计的，需要适配浏览器环境。

WebAssembly 正是解决这些问题的技术。Wasm 提供了接近原生的性能，可以在浏览器中运行高性能代码。将MCP Agent 编译为 Wasm 模块，可以在浏览器中运行完整的 Agent 逻辑。本章将探讨 MCP 与 WebAssembly 的结合，包括将 MCP 协议编译为 Wasm 模块、在浏览器中本地运行的轻量级 Agent、安全沙箱与跨域调用，以及实战案例。

二、WebAssembly 简介

WebAssembly 是一种二进制指令格式，设计为在栈式虚拟机上运行。它的目标是让高性能代码在 Web 浏览器中运行，性能接近原生。

Wasm 的关键特性包括以下内容。高性能，Wasm 的执行速度接近原生代码，远远超过 JavaScript。语言无关，C、C++、Rust、Go、Python 等多种语言可以编译为 Wasm。安全沙箱，Wasm 在严格的内存沙箱中运行，无法直接访问宿主系统。可移植，Wasm 模块可以在任何支持 Wasm 的环境运行，包括浏览器、Node.js、边缘设备。体积小，Wasm 二进制格式紧凑，适合网络传输。

对于 MCP Agent，Wasm 提供了在浏览器中运行 Agent 的技术基础。Agent 的核心推理逻辑可以用高性能语言编写，编译为 Wasm，在浏览器中执行。

三、将 MCP Agent 编译为 Wasm

将 MCP Agent 编译为 Wasm 需要在架构上做调整。

Agent 核心的分离

典型的 MCP Agent 包含三个部分：推理引擎，调用大模型进行决策。Skill 调度器，根据决策调用 Skill。通信层，与 MCP 网关交互。在 Wasm 环境中，推理引擎需要适配浏览器环境。大模型可以通过浏览器原生的 Web API 调用，如 Chrome 的内置 AI。或者通过 WebSocket 代理到云端模型。Skill 调度器可以完整保留在 Wasm 中。通信层需要从 HTTP 改为 WebSocket 或直接函数调用。

Wasm 模块结构

Wasm Agent 模块可以设计为以下结构。入口函数，接收用户输入和当前 Context，返回 Agent 响应。内部包含模型调用逻辑和 Skill 调度。模型推理部分可以调用浏览器的 AI API 或通过 WebSocket 调用云端模型。Skill 调用部分可以通过 JavaScript 桥接调用浏览器的本地能力，或通过 WebSocket 调用远程 Skill。

内存管理

Wasm 模块的内存是线性内存，需要手动管理。对于 Agent 的对话历史、Context 等动态数据，需要仔细设计内存分配策略。可以使用 Wasm 的垃圾回收功能，但性能和复杂度需要权衡。

四、在浏览器中运行的轻量级 MCP Agent

一个完整的浏览器 MCP Agent 需要多个组件协同工作。

Wasm Agent 模块

Agent 核心逻辑编译为 Wasm。模块大小控制在几百 KB 到几 MB 之间。模块加载后，与 JavaScript 宿主通过函数调用和内存共享交互。

JavaScript 宿主

JavaScript 宿主负责加载 Wasm 模块，提供与浏览器的桥接。包括提供大模型调用接口，通过 WebSocket 连接到云端推理服务，或使用浏览器内置 AI API。提供 Skill 调用接口，将 Wasm 的 Skill 调用请求转发到对应的实现。提供存储接口，持久化 Agent 的配置和状态。

本地 Skill

部分 Skill 可以在浏览器本地实现。文件读写 Skill，通过浏览器的 File API 读取本地文件。通知 Skill，通过浏览器的 Notification API 发送通知。存储 Skill，通过浏览器的 IndexedDB 或 localStorage 存储数据。浏览器扩展Skill，通过浏览器扩展 API 访问更多系统能力。

远程 Skill

无法在本地实现的 Skill 可以通过 WebSocket 或 HTTP 调用远程 Skill。远程调用需要经过 MCP 网关，与标准MCP 体系一致。Peta 网关可以作为远程 Skill 的入口。

五、安全沙箱与权限控制

浏览器环境的安全模型对 Agent 的运行至关重要。

Wasm 沙箱隔离

Wasm 模块默认无法访问宿主系统的任何资源，包括文件系统、网络、系统 API。所有外部访问必须通过JavaScript 宿主提供的导入函数进行。这意味着 Agent 不能做任何未授权的事情。Peta 可以在导入函数层面实现权限控制。

浏览器权限模型

浏览器 Skill 需要请求用户权限才能访问敏感功能。地理位置 Skill 需要请求 geolocation 权限。摄像头 Skill 需要请求 camera 权限。剪贴板 Skill 需要请求 clipboard 权限。Agent 应该在需要时请求权限，并优雅处理拒绝情况。

内容安全策略

网站可以通过内容安全策略限制 Agent 的行为。限制 Wasm 模块的加载来源，只允许从可信域名加载。限制网络请求的目标，只允许向特定的 API 端点发送请求。限制本地存储访问。Peta 的控制台可以帮助生成推荐的内容安全策略配置。

六、跨域调用与网关集成

浏览器中的 Agent 调用远程 Skill 时，需要处理跨域问题。

CORS 配置

MCP 网关需要配置 CORS 头，允许来自浏览器 Agent 的跨域请求。配置 Access-Control-Allow-Origin，指定允许的域名。配置 Access-Control-Allow-Methods，允许的 HTTP 方法。配置 Access-Control-Allow-Headers，允许的请求头。Peta 网关支持可配置的 CORS 策略。

认证与令牌

浏览器 Agent 调用远程 Skill 时，需要向 Peta 网关提供认证凭证。短期令牌，从身份提供商获取短期令牌，通过 Authorization 头传递。凭证存储，令牌可以存储在浏览器的 sessionStorage 或 IndexedDB 中。令牌刷新，令牌过期时需要刷新，Agent 需要实现刷新逻辑。

WebSocket 连接

对于流式调用或需要长时间连接的场景，可以使用 WebSocket。WebSocket 连接可以携带认证令牌，不受CORS 限制。Peta 网关支持 WebSocket 连接。

七、Peta 的 Wasm 支持

Peta 提供了 WebAssembly 的支持工具链。

Wasm 开发模板

Peta 提供了 Agent Wasm 开发模板。模板包含 Rust 或 C 的 Wasm 项目脚手架。预配置了 MCP 协议的序列化和反序列化。预配置了与 Peta 网关的通信逻辑。开发者只需要实现业务逻辑。

Wasm 运行时集成

Peta 提供了 JavaScript SDK，用于在浏览器中加载和运行 Wasm Agent。SDK 包含 Wasm 模块加载器、内存管理、Skill 桥接、与 Peta 网关的通信。

调试工具

Peta 提供了 Wasm Agent 的调试工具。支持在浏览器开发者工具中调试 Wasm 模块。支持模拟 Peta 网关进行本地测试。支持性能分析。

八、典型实战案例：浏览器中的个人数据助手

系统背景

一位用户希望在浏览器中运行一个个人数据助手 Agent，帮助管理本地文件、日历、邮件。用户不希望将敏感数据上传到云端。

Skill 配置

本地 Skill 包括文件搜索 Skill，通过 File API 搜索本地文件。日历读取 Skill，通过浏览器扩展读取日历。邮件查询 Skill，通过 IMAP 或 Gmail API 查询邮件。文本摘要 Skill，通过本地小模型生成摘要。

运行方式

用户访问一个网页，加载 Wasm Agent 模块。Agent 请求必要的权限，如文件访问。用户用自然语言发出指令，如帮我找上周的会议记录。Agent 调用文件搜索 Skill 在本地搜索，调用文本摘要 Skill 生成摘要。所有处理在本地完成，数据不上传。

隐私保护

所有数据处理都在用户浏览器中完成。文件内容不会被上传到任何服务器。日历和邮件数据只通过本地 API 访问。用户可以随时关闭页面，所有状态消失。

九、小结

本章的核心结论可以总结为以下几点。

第一，在用户设备上运行 Agent 具有零延迟、数据隐私、离线可用、降低服务器成本等优势。

第二，WebAssembly 提供了在浏览器中运行高性能 Agent 的技术基础。Wasm 具有高性能、语言无关、安全沙箱、可移植等特点。

第三，将 MCP Agent 编译为 Wasm 需要分离推理引擎、Skill 调度器、通信层。Wasm 模块通过 JavaScript 宿主与浏览器交互。

第四，浏览器 Agent 可以同时使用本地 Skill 和远程 Skill。本地 Skill 通过浏览器 API 实现，远程 Skill 通过MCP 网关调用。

第五，安全沙箱和权限控制通过 Wasm 沙箱、浏览器权限模型、内容安全策略实现。

第六，跨域调用需要配置 CORS、使用短期令牌、支持 WebSocket 连接。

第七，Peta 提供了 Wasm 开发模板、运行时集成 SDK、调试工具，简化浏览器 Agent 开发。

第八，实战案例显示，浏览器中的个人数据助手可以保护用户隐私，所有数据在本地处理。

在下一章，我们将讨论 MCP 与图数据库的集成——知识图谱 Agent 的构建。