WebMCP：在网页中运行MCP服务器的开源工具

WebMCP 是一个开源项目，旨在将 Model Context Protocol（MCP）服务器直接嵌入网页，让 AI 助手通过浏览器操作网页内容。它解决了传统 MCP 需要复杂配置（如 API 密钥或 OAuth 流程）的问题。WebMCP 利用浏览器现有的认证机制（如 cookie 或会话），让 AI 助手以用户权限直接访问网页数据。项目使用 TypeScript 开发，基于 Turborepo 和 PNPM 管理，遵循 MIT 许可证。开发者可以通过简单的安装和配置，在网页或浏览器扩展中运行 MCP 服务器。WebMCP 适合希望简化 AI 与网页交互的开发者，特别适用于需要跨网页协同的场景。

功能列表

• 在网页中运行 MCP 服务器，直接利用浏览器认证机制。
• 支持 AI 助手通过注册工具与网页数据交互，无需额外配置 API 密钥。
• 提供浏览器扩展，聚合多个网页的 MCP 工具，简化跨页面操作。
• 使用 TypeScript 开发，支持模块化开发和快速迭代。
• 通过 Turborepo 优化任务管理和 PNPM 管理依赖，提升开发效率。
• 自动重新加载扩展，开发者可实时预览代码更改效果。
• 提供简单命令行接口，快速启动开发环境或单独运行网页/扩展。

使用帮助

安装流程

要使用 WebMCP，需要安装 Node.js 和 PNPM 包管理工具。以下是详细的安装和配置步骤：

1. 克隆项目仓库
   打开终端，运行以下命令克隆 WebMCP 仓库：

   git clone https://github.com/MiguelsPizza/WebMCP.git
   

   克隆完成后，进入项目目录：

   cd MCP-B
   

2. 安装依赖
   使用 PNPM 安装项目所需依赖：

   pnpm install
   

   PNPM 会自动下载并配置项目所需的包，确保开发环境准备就绪。

3. 启动开发环境
   运行以下命令启动开发服务器：

   pnpm dev
   

   此命令同时启动网页应用和浏览器扩展的开发环境。如果只想单独启动某部分，可以使用：

   • 仅启动扩展：

     pnpm --filter extension dev
     

   • 仅启动网页应用：

     pnpm --filter web dev
     

4. 浏览器扩展设置
   WebMCP 提供浏览器扩展，需手动加载到浏览器（如 Chrome）。操作步骤如下：
   • 运行扩展开发命令（见上）。
   • 打开浏览器扩展管理页面（Chrome：chrome://extensions/）。
   • 启用“开发者模式”，点击“加载已解压的扩展”，选择项目目录中的 extension 文件夹。
   • 扩展加载后，会自动检测代码更改并重新加载。

功能操作流程

1. 运行 MCP 服务器

WebMCP 的核心功能是将 MCP 服务器嵌入网页。开发者可以在网页代码中引入 WebMCP 的 React 钩子来注册工具。例如，创建一个待办事项应用：

import { McpServerProvider, useMcpServer } from '@mcp-b/mcp-react-hooks';
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]);
return { content: [{ type: 'text', text: `Added: ${text}` }] };
});
return <div>{/* 网页组件 */}</div>;
}

• 操作说明：
  • 使用 <McpServerProvider> 包裹应用组件，确保 MCP 服务器初始化。
  • 通过 useMcpServer 钩子注册工具（如 addTodo），定义工具的输入格式和逻辑。
  • AI 助手可调用 addTodo 工具，通过浏览器直接添加待办事项。

2. 浏览器扩展使用

WebMCP 的浏览器扩展作为桥梁，连接网页中的 MCP 服务器和 AI 助手。安装扩展后：

• 打开任意支持 WebMCP 的网页，扩展会自动检测页面中的 MCP 工具。
• 扩展会显示所有打开网页的可用工具，AI 助手可通过扩展调用这些工具。
• 操作示例：在支持 WebMCP 的待办事项网页中，AI 助手可以通过扩展调用 addTodo 工具，添加任务并返回结果。

3. 认证与安全

WebMCP 利用浏览器现有的认证机制（如 cookie 或 OAuth 会话），无需额外配置 API 密钥。MCP 服务器运行在浏览器的安全沙箱中，确保：

• AI 助手仅以当前用户的权限操作。
• 数据交互通过浏览器认证，防止未授权访问。
• 开发者需确保网页的认证机制（如会话或 token）有效，以保证工具正常运行。

4. 调试与开发

• 实时调试：使用 pnpm dev 启动开发环境后，扩展会自动重新加载代码更改，开发者可通过浏览器开发者工具查看日志。
• 贡献代码：参考项目中的 CONTRIBUTING.md 文件，了解代码提交规范和优先开发领域。
• 问题反馈：如遇到问题，可在 GitHub 仓库提交 issue，说明问题细节。

注意事项

• 确保 Node.js 版本为最新稳定版，推荐使用 v18 或以上。
• PNPM 需安装全局，可运行 npm install -g pnpm。
• 开发过程中，保持网络连接以确保依赖下载和扩展加载正常。

应用场景

1. 网页开发者集成 AI 助手
   开发者希望在网页应用中嵌入 AI 助手，自动执行任务（如填写表单、提取数据）。WebMCP 提供简单接口，让 AI 直接操作网页内容，无需复杂配置。
2. 浏览器扩展开发者
   扩展开发者可使用 WebMCP 构建跨网页协同的工具。例如，聚合多个网页的待办事项数据，统一管理任务。
3. 企业内部工具优化
   企业内部网页应用可通过 WebMCP 集成 AI 助手，简化员工操作。例如，自动整理 CRM 系统中的客户数据。
4. 教育与研究
   研究人员可使用 WebMCP 测试 AI 与网页交互的场景，探索浏览器环境下的 AI 应用可能性。

QA

1. WebMCP 支持哪些浏览器？
   WebMCP 的扩展目前主要支持 Chrome 浏览器，未来可能扩展到 Firefox 等其他浏览器。
2. 需要额外配置服务器吗？
   不需要。WebMCP 将 MCP 服务器嵌入网页，利用浏览器认证，无需单独配置服务器。
3. 如何确保数据安全？
   WebMCP 运行在浏览器沙箱中，仅使用当前用户的认证权限。开发者需确保网页本身的认证机制安全。
4. 是否支持非技术用户？
   WebMCP 主要面向开发者。非技术用户需依赖支持 WebMCP 的网页或扩展，操作较为简单。