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/