WebMCP 是一個基于瀏覽器的 MCP 實現(xiàn)方案，可以讓 ai 助手通過標(biāo)準(zhǔn)化工具與 Web 應(yīng)用交互。它將 MCP 服務(wù)器嵌入網(wǎng)頁，與Web應(yīng)用直接集成，不需要API密鑰或OAuth配置，直接瀏覽器訪問實時同步，與Web應(yīng)用狀態(tài)直接集成支持跨應(yīng)用工作流，讓Ai助手在多個不同網(wǎng)頁應(yīng)用間自動完成任務(wù)，解決了現(xiàn)有 MCP 方案繞開瀏覽器的問題，同時利用了瀏覽器的身份驗證和安全模型。

主要功能：

?使用瀏覽器會話和 Cookie 進(jìn)行認(rèn)證。

?通過 JSON-RPC 接口操作，避免 DOM 操作。

?與 Web 應(yīng)用狀態(tài)實時同步。

?適用于任何 JavaScript 框架或純 JavaScript。

?實現(xiàn)代碼通常少于 50 行。

?遵循瀏覽器的同源策略和權(quán)限。

項目特點：

?借助瀏覽器的認(rèn)證機制，無需復(fù)雜配置和 API 密鑰管理。

?AI 助手直接訪問結(jié)構(gòu)化數(shù)據(jù)，提升交互效率。

?支持跨應(yīng)用工作流，各應(yīng)用保持獨立認(rèn)證和訪問控制。

?在瀏覽器安全模型內(nèi)運行，保障數(shù)據(jù)安全。

項目架構(gòu)：

• Tab MCP Servers：在網(wǎng)頁內(nèi)運行，與認(rèn)證 API 交互。

• MCP-B Extension：連接標(biāo)簽服務(wù)器和 AI 助手，聚合工具并路由請求。

• Transport Layers：通過瀏覽器消息傳遞 API 實現(xiàn)安全通信。

技術(shù)棧：

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

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

• 數(shù)據(jù)同步：通過 ElectricSQL 實現(xiàn)實時同步。

使用方法：

?高級用戶：

• 安裝依賴：pnpm install

• 啟動開發(fā)服務(wù)器：pnpm dev

• 構(gòu)建項目：pnpm build

?普通用戶：

從 Chrome Web Store 安裝瀏覽器插件擴展，不需要配置 API 密鑰，AI 助手就可通過現(xiàn)有會話與網(wǎng)站交互。

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

官網(wǎng)地址：https://mcp-b.ai/