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. Tab MCP Server (标签页服务器):在网页的JavaScript沙箱中运行的轻量级服务器,负责暴露该网页的特定功能为“工具”。 -
2. MCP-B Extension (浏览器扩展):扮演核心中枢的角色。它自动发现所有支持MCP-B的标签页,并将这些页面的工具汇集起来,供AI客户端统一调用。 -
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调用) |
执行速度 |
|
毫秒级 |
执行成本 |
|
极低
|
可靠性 |
|
稳定
|
实现复杂度 |
|
简单
|
行业影响: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. 从Chrome Web Store安装 MCP-B扩展。 -
2. 访问 MCP-B官方网站,页面上有一个集成了MCP-B的Todo List Demo。 -
3. 打开扩展侧边栏,你就可以通过对话,直接命令AI操作这个Demo页面上的待办事项了。
推荐阅读:
-
• MCP-B GitHub仓库:https://github.com/MiguelsPizza/WebMCP
(文:子非AI)