MCP-B：网页秒变AI原生应用，只需50行代码，告别传统浏览器自动化

作者

 

MCP-B是一项创新的开源技术，它允许AI助手通过一个浏览器扩展，直接、安全地调用任何网页的功能，无需复杂的API集成或脆弱的屏幕抓取。它通过在网页中嵌入一个微型服务器，利用用户现有的登录状态进行 “零配置”认证，实现了毫秒级的任务执行速度，比传统方式快近10000倍。开发者仅需约50行代码即可集成，这为AI与Web应用的无缝协作开辟了新的路径。


想象一下让AI助手帮你整理报销的常见场景：AI启动浏览器，像一个“数字木偶”般在屏幕上寻找登录按钮、输入框，然后试图从一堆HTML元素中识别出相关链接。这个过程不仅缓慢，而且任何微小的UI更新都可能导致整个流程失败。

这就是当前AI自动化普遍面临的挑战：要么依赖缓慢、脆弱且昂贵的屏幕抓取，要么需要开发者投入大量精力进行复杂的API集成和认证管理。

面对这个难题，一个名为MCP-B (Model Context Protocol for the Browser) 的开源项目，提供了一个非常巧妙的解决方案：

✨ 将AI工具的服务器直接植入网页本身，让AI能够像用户一样，安全地复用浏览器已有的权限和会话。

这个设计不仅可行，而且异常高效。它使得任何网站，仅需添加约50行代码，就能在几分钟内具备被AI原生调用的能力，其执行效率远超传统方法。


图注：MCP-B完整架构，连接AI客户端、浏览器扩展和网页内的MCP服务器，形成一个高效的通信网络。

技术解析：MCP-B如何巧妙地解决问题？

传统的MCP（模型上下文协议）绕过了浏览器，这迫使开发者必须为AI重新构建一套身份验证系统。


图注：传统MCP架构，AI需要通过API密钥连接到本地或远程服务器，配置复杂。

MCP-B则回归问题的本源：既然工作流发生在浏览器中，那么AI能力的接入点也应该在浏览器中。


图注：MCP-B新架构，服务器直接在网页中运行，天然利用了浏览器的身份验证。

其架构由三大协同工作的组件构成：

  1. 1. Tab MCP Server (标签页服务器)：在网页的JavaScript沙箱中运行的轻量级服务器，负责暴露该网页的特定功能为“工具”。
  2. 2. MCP-B Extension (浏览器扩展)：扮演核心中枢的角色。它自动发现所有支持MCP-B的标签页，并将这些页面的工具汇集起来，供AI客户端统一调用。
  3. 3. MCP Clients (AI客户端)：任何AI助手应用（如桌面程序、IDE插件等），通过连接到MCP-B扩展，即可访问所有已发现的网页工具。

这个架构带来了两个显著的优势：

核心优势一：原生且“零配置”的身份验证

这是MCP-B设计中最精妙的一点。它完全无需开发者处理OAuth 2.1或管理API密钥。当AI助手需要操作某个网站时，请求会通过扩展路由至对应的标签页。页面内的MCP服务器在执行操作（如fetch请求）时，浏览器会自动附带用户当前的Cookie或JWT。

这意味着AI在执行操作时，其身份和权限与当前登录的用户完全一致。 这个过程对用户和AI应用都是透明的，实现了真正的“零配置”。

核心优势二：从像素到API的效率飞跃

传统自动化工具需要AI“看”屏幕，而MCP-B让AI直接“调用”功能。

对比维度
传统浏览器自动化 (屏幕抓取)
 MCP-B (直接API调用)
执行速度
10 – 20 秒 / 动作
 毫秒级
执行成本
较高 (多次LLM调用解析UI)
 极低

 (一次工具调用决策)
可靠性
脆弱，与UI强耦合
 稳定

，与UI解耦
实现复杂度
复杂，需维护CSS选择器和等待逻辑
 简单

，定义清晰的工具接口

行业影响：MCP-B正在如何重塑AI与Web的交互模式？

MCP-B的出现，为AI与Web的集成带来了两种根本性的改变。

一个重要的变革：从“模拟用户”到“赋予AI用户身份”

现有的AI自动化工具，本质上是在模拟用户的视觉和点击行为。而MCP-B让AI在执行任务的瞬间，能够安全地代表用户的真实身份进行操作。AI不再是外部的模拟器，而是成为了用户意志在浏览器内的直接、高效延伸。这种模式在安全性、可靠性和效率上都具有明显优势。

未来的基石：成为“个人AI操作系统”的中间件

如果我们将AI Agent视为未来的个人操作系统，那么海量的Web应用就是其上的“APP”。这个“OS”需要一套标准接口来与“APP”交互。MCP-B恰好提供了这样一套标准化的“系统调用”接口。它的扩展中枢汇集了所有网页工具，形成了一个动态的“个人能力API”，为构建能跨平台调度资源的“超级助理”奠定了基础。

实用指南：立即上手MCP-B

深度剖析：从MCP.ts看真实世界的集成实践

让我们通过分析官方示例中的MCP.ts文件，来理解MCP-B在真实项目中的应用方式。这不仅是代码，更体现了一套完整的设计理念。

设计理念一：为AI编写可执行的“API文档”

const server = new McpServer(
  { name: 'TODO-APP', version: '1.0.0' },
  { instructions: '你是一个乐于助人的助手，可以为当前用户创建、更新和删除待办事项。' }
);
  • • 服务器级指令 (instructions): 这段话是给LLM的“系统提示”，为AI的行为设定了总体角色和能力边界。
  • • 工具级描述 (description): 在定义每个工具时（如'Creates a new todo item...'），这是在告诉LLM该工具的具体用途。

这里的关键在于，开发者不仅是在定义函数，更是在为AI编写清晰、准确的自然语言说明，这是引导AI正确使用工具的前提。

设计理念二：构建对AI友好的高功能工具

以getTodos这个多功能工具为例：

server.tool(
  'getTodos',
  '根据筛选、排序和分页选项，检索当前用户的待办事项列表',
  {
    completed: z.boolean().optional().default(false).describe('按完成状态筛选'),
    sortBy: z.enum([...]).optional().default('text').describe('用于排序的字段'),
    limit: z.number().optional().default(50).describe('返回的最大数量'),
    search: z.string().optional().default('').describe('在待办事项文本中搜索'),
  },
  async (args) => { /* ... */ }
);
  • • 丰富的参数: 提供了筛选、排序、分页和搜索等完整功能。
  • • Zod的精巧运用:
    • • z.optional()和z.default()让工具更具容错性。
    • • z.describe()用自然语言向AI解释每个参数的含义，使AI能根据用户模糊的指令（如“给我看看最近的5个任务”）匹配到正确的参数（limit: 5）。

设计理念三：安全与现有架构的无缝集成

在每个工具的执行函数中，都体现了严谨的工程实践：

async (args) => {
  // 1. 权限检查: 必须先确认用户身份
  if (!userId) { /* ...返回错误... */ }

  try {
    // 2. 调用业务逻辑层: 复用现有代码，保持解耦
    const todos = await todoApi.getForUser(userId, queryParams);
    return { content: [{ type: 'text', text: JSON.stringify(todos) }] };
  } catch (error) {
    // 3. 错误处理: 向AI返回清晰的错误信息
    /* ...返回格式化的错误... */
  }
}
  • • 权限前置: 每个工具都先检查userId，确保所有操作都在当前用户的权限范围内。
  • • 逻辑复用: 工具本身不处理复杂业务，而是调用已有的todoApi，这使得集成工作非常轻量，且不侵入现有应用架构。
  • • 健壮性: 完善的try...catch机制确保了即使API调用失败，AI也能收到明确的反馈。

总结而言，MCP.ts展示了集成MCP-B的最佳实践：通过精心设计，将应用的业务能力安全、健壮、且对AI友好地“翻译”成一个结构化的工具集。

面向最终用户：体验未来，现在

  1. 1. 从Chrome Web Store安装 MCP-B扩展。
  2. 2. 访问 MCP-B官方网站，页面上有一个集成了MCP-B的Todo List Demo。
  3. 3. 打开扩展侧边栏，你就可以通过对话，直接命令AI操作这个Demo页面上的待办事项了。

推荐阅读:


  • • MCP-B GitHub仓库：https://github.com/MiguelsPizza/WebMCP

 


（文：子非AI）

发表评论