WebMCP
访问网站
扫码查看
复制链接

通过MCP服务能让AI助手直接与网页应用交互的工具。

标签：AI Agent , AI助手 , MCP , MCP-B , WebMCP , 人工智能体 , 模型上下文协议 , 浏览器扩展

WebMCP

AI专业工具 / 桌面自动化2 次浏览

综合介绍

WebMCP，全称“基于浏览器的模型上下文协议”（Browser-based Model Context Protocol），项目代号为MCP-B。它是一种能让AI助手直接与网页应用交互的工具。当前，多数白领工作都在浏览器中完成，但标准的AI助手协议（如MCP）却无法直接利用浏览器已经完成的身份验证。开发者如果想让AI助手操作自己的网站，通常需要搭建复杂的认证系统（例如OAuth）或者管理API密钥，这非常麻烦。WebMCP解决了这个难题。它的核心思路是，直接在网页内部运行一个微型服务器，利用浏览器本身已经保存的登录状态（如Cookies和会话）来进行授权。这样一来，AI助手就能像真人用户一样，通过一个Chrome浏览器扩展，直接调用网页的各项功能。这种方式比传统的屏幕抓取或模拟点击更精确、更稳定，为实现跨应用的自动化工作流提供了基础。

功能列表

  • 零配置认证: 直接使用浏览器中已经存在的用户登录会话和Cookies，AI助手无需用户提供任何API密钥或进行额外配置。
  • 精确的工具接口: AI助手通过结构化的JSON-RPC接口调用网页功能，取代了过去不稳定的DOM操作和屏幕截图分析，指令传递更精确。
  • 实时状态同步: 工具直接与Web应用的前端状态集成，可以实时反应和操作页面数据。
  • 框架无关: 无论网站是使用React、Vue等现代框架，还是使用原生JavaScript编写，WebMCP都能集成。
  • 实现简单: 开发者通常只需要不到50行代码，就能让自己的网页应用支持MCP协议。
  • 浏览器原生安全: 完全在浏览器的安全沙箱内运行，遵守同源策略和现有的权限模型，确保用户数据安全。

使用帮助

WebMCP的设计兼顾了普通用户和开发者。对用户而言，它是一个开箱即用的工具；对开发者而言，它是一个易于集成的程序库。

面向用户的使用说明

普通用户无需进行任何复杂配置，只需通过一个浏览器扩展，就能让AI助手（如Claude桌面版或Cursor）直接操作你已经登录的网站。

核心理念

想象一下，你正在使用一个在线记账网站，并且已经登录了你的账户。现在，你想让AI助手帮你创建一个新的账单。在没有WebMCP的情况下，AI无法访问你在该网站的登录会服，因此什么也做不了。

安装WebMCP扩展后，情况就不同了。这个扩展会充当一座桥梁，让你的AI助手能够“看到”并使用这个记账网站提供给登录用户的专属功能，例如“创建账单”、“查询余额”等。整个过程，AI助手使用的是你当前的登录身份，它拥有的权限和你完全一样，不多也不少。你不需要把账户密码告诉AI，也不需要生成任何API Key。

操作流程

  1. 安装扩展程序: 从Chrome网上应用店安装“MCP-B”扩展程序。
  2. 访问目标网站: 访问一个已经集成了WebMCP的网站（例如项目提供的演示应用）。确保你已经在该网站上登录。
  3. 打开AI助手: 打开你的AI助手客户端（如Claude Desktop）。
  4. 开始交互: 现在，你可以通过AI助手向网站下达指令了。例如，你可以让它“创建一个账单，客户邮箱是test@example.com，项目是网站设计，金额是500美元”。AI助手会通过WebMCP扩展调用网页内部的createInvoice功能来完成操作。

面向开发者的使用说明

开发者可以通过为自己的Web应用添加WebMCP支持，使其能够被AI助手发现和操作，从而极大地提升应用的功能和用户体验。

系统架构

WebMCP系统主要由三个部分构成：

  1. 标签页MCP服务器 (Tab MCP Servers): 运行在网页内部的JavaScript服务，它负责定义并暴露当前网页能够提供的工具（功能），例如createInvoice。这些工具能够直接调用网站已有的API，并利用浏览器的登录信息进行验证。
  2. MCP-B 扩展程序 (The MCP-B Extension): 作为核心的桥梁，它能发现所有打开的标签页中正在运行的MCP服务器，并将这些服务器提供的工具聚合起来。当AI助手发出请求时，扩展程序负责将请求精确地路由到对应的标签页服务器。
  3. 传输层 (Transport Layers): 负责在标签页、扩展程序和AI助手之间进行安全通信。

集成步骤

  1. 安装依赖包: 在你的项目目录下，使用npm或pnpm安装核心库。 
    npm install @mcp-b/transports @modelcontextprotocol/sdk
  2. 在应用中创建并连接MCP服务器: 在你的前端代码中，导入库并创建一个MCP服务器实例。然后，为你的应用定义工具。

    以下是一个基础示例，为一个在线发票系统添加“创建发票”的功能：

    import { TabServerTransport } from '@mcp-b/transports';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod'; // 用于定义输入参数的类型和规则
// 1. 创建一个MCP服务器实例
const server = new McpServer({
name: 'invoice-system', // 工具的命名空间
version: '1.0.0',
});
// 2. 定义一个工具
server.tool(
'createInvoice', // 工具名称
'创建一个新的发票', // 工具描述，供AI理解
{ // 定义输入参数的结构和类型
customerEmail: z.string().email(),
items: z.array(
z.object({
description: z.string(),
amount: z.number(),
})
),
},
async ({ customerEmail, items }) => { // 工具的具体执行逻辑
// 在这里，你可以直接调用应用已有的API
// fetch会自然地带上用户的Cookie，无需额外认证
const response = await fetch('/api/invoices', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ customerEmail, items }),
});
// 将API返回的结果包装后传回给AI
return {
content: [
{ type: 'text', text: JSON.stringify(await response.json()) },
],
};
}
);
// 3. 启动服务器并连接到浏览器扩展
const transport = new TabServerTransport();
await server.connect(transport);
  3. React集成 (可选): 如果你的应用使用React，可以使用官方提供的Hooks库来简化集成。 
    npm install @mcp-b/mcp-react-hooks

    在你的React组件中使用useMcpServer钩子来注册工具：

    import { useMcpServer } from '@mcp-b/mcp-react-hooks';
import { z } from 'zod';
import { useState } from 'react';
function TodoApp() {
const { registerTool } = useMcpServer();
const [todos, setTodos] = useState([]);
// 注册一个添加待办事项的工具
registerTool('addTodo', { text: z.string() }, async ({ text }) => {
const newTodo = { id: Date.now(), text, done: false };
setTodos((prev) => [...prev, newTodo]); // 直接更新React状态
return {
content: [{ type: 'text', text: `已添加: ${text}` }],
};
});
return <div>{/* 你现有的组件UI */}</div>;
}

应用场景

  1. 跨应用自动化工作流一个AI助手可以编排和执行跨越多个不同网站的复杂任务。例如，AI可以先访问你在Google Sheets中维护的客户列表，读取到新客户的信息后，自动切换到你的在线CRM网站，为这位新客户创建一个档案，最后再跳转到你的发票管理网站，为该客户生成一张初始服务费的发票。整个过程无缝衔接，AI利用的是你在各个网站上已经登录的会话，无需任何API密钥交换。
  2. 增强的浏览器内AI交互用户可以直接通过自然语言，让AI在当前网页上执行重复性或复杂的操作。例如，在一个项目管理工具（如Jira或Trello）的看板页面，用户可以说：“把所有在‘待处理’列表中的、标签为‘紧急’的卡片，移动到‘进行中’列表”。AI助手会调用页面提供的moveCard工具来逐一完成操作，这远比用户手动拖拽要高效。
  3. 智能数据填充与提交对于需要填写大量信息的复杂表单，用户可以简单地向AI提供核心信息，让AI自动完成格式化的填写和提交。例如，在申请一个复杂的线上服务时，用户只需告诉AI自己的基本信息和需求，AI就能调用网页提供的工具，将信息准确填写到对应的表单字段中，并完成提交。

QA

  1. WebMCP和传统的浏览器自动化工具（如Selenium或Puppeteer）有什么区别？传统的自动化工具主要通过模拟用户行为（如寻找DOM元素并点击、输入文字）来操作网页，这个过程非常脆弱。一旦网页的前端代码或UI布局发生改变，自动化脚本就可能失效，这就是所谓的“屏幕抓取”或“DOM操作”。而WebMCP提供的是一个稳定、结构化的API接口（JSON-RPC）。AI助手不是在模拟点击按钮，而是在直接调用一个名为createInvoice的函数。这种方式与网页的UI布局无关，只要函数的功能和参数不变，它就一直有效，因此更加稳定和可靠。
  2. 这对用户来说安全吗？我的登录信息会泄露吗？非常安全，这也是WebMCP的核心设计原则之一。它完全在浏览器自身的安全沙箱内工作。你的密码或登录凭证（如Cookie）永远不会离开你的浏览器，更不会被发送给AI助手或任何第三方服务器。WebMCP扩展只是充当一个请求的“信使”，将AI的指令（如“调用createInvoice功能”）传递给你正在浏览的网页。网页内的代码在执行这个指令时，使用的是你当前的登录会话，其权限与你手动操作完全一致。AI无法进行任何你本人没有权限的操作。
微信微博Email复制链接