WebMCP：可让网站支持MCP，让AI助手与Web应用进行交互

WebMCP 是一个基于浏览器的 MCP 实现方案，可以让 ai 助手通过标准化工具与 Web 应用交互。它将 MCP 服务器嵌入网页，与Web应用直接集成，不需要API密钥或OAuth配置，直接浏览器访问实时同步，与Web应用状态直接集成支持跨应用工作流，让Ai助手在多个不同网页应用间自动完成任务，解决了现有 MCP 方案绕开浏览器的问题，同时利用了浏览器的身份验证和安全模型。

主要功能：

✅使用浏览器会话和 Cookie 进行认证。

✅通过 JSON-RPC 接口操作，避免 DOM 操作。

✅与 Web 应用状态实时同步。

✅适用于任何 JavaScript 框架或纯 JavaScript。

✅实现代码通常少于 50 行。

✅遵循浏览器的同源策略和权限。

项目特点：

✅借助浏览器的认证机制，无需复杂配置和 API 密钥管理。

✅AI 助手直接访问结构化数据，提升交互效率。

✅支持跨应用工作流，各应用保持独立认证和访问控制。

✅在浏览器安全模型内运行，保障数据安全。

项目架构：

• Tab MCP Servers：在网页内运行，与认证 API 交互。

• MCP-B Extension：连接标签服务器和 AI 助手，聚合工具并路由请求。

• Transport Layers：通过浏览器消息传递 API 实现安全通信。

技术栈：

• 前端：React + TanStack Query + Shadcn UI。

• 后端：Cloudflare Workers + Hono.js + PostgreSQL + Drizzle ORM。

• 数据同步：通过 ElectricSQL 实现实时同步。

使用方法：

✅高级用户：

• 安装依赖：pnpm install

• 启动开发服务器：pnpm dev

• 构建项目：pnpm build

✅普通用户：

从 Chrome Web Store 安装浏览器插件扩展，不需要配置 API 密钥，AI 助手就可通过现有会话与网站交互。

项目地址：https://github.com/MiguelsPizza/WebMCP

官网地址：https://mcp-b.ai/