通用 WebMCP 兼容页面

此页面实现了完整的 WebMCP 接口，兼容所有主流的 AI Agent 与网页通讯方案。

WebMCP 状态

运行时状态: 检测中...

已注册工具: 0 个

Relay 连接: 检测中...

支持的访问方式

方式 协议 特点 skill.md 文件
Local Relay WebSocket + stdio 自动转发工具，适合桌面客户端 local-relay.skill.md
DevTools MCP CDP + MCP 浏览器控制 + 工具发现 devtools-mcp.skill.md
Playwright CDP exposeFunction 双向通信 playwright.skill.md
Selenium HTTP REST W3C 标准，Safari 支持 selenium.skill.md
原生 CDP WebSocket 最底层控制 cdp.skill.md

已注册工具列表

加载中...

Agent→Page 调用测试

AI Agent 可以通过以下方式调用页面工具：

// Method 1: direct call (object format { name, arguments })
navigator.modelContext.callTool({ name: 'get_time', arguments: {} })

// Method 2: call with arguments
navigator.modelContext.callTool({ name: 'calculate', arguments: { a: 10, b: 5, operation: 'add' } })

// Method 3: via evaluate (Playwright/Selenium)
await page.evaluate(() => navigator.modelContext.callTool({ name: 'get_time', arguments: {} }))

Page→Agent 回调

页面支持通过回调函数向 Agent 发送消息：

// Check whether the agent registered a callback
if (typeof window.agentCallback === 'function') {
  await window.agentCallback({ event: 'progress', value: 50 });
}

// Check CDP binding
if (typeof window.agentBridge === 'function') {
  window.agentBridge(JSON.stringify({ event: 'ready' }));
}
开发者指南：
要让你的页面支持 AI Agent 通讯，只需：
  1. 引入 MCP-B 运行时：<script src="./mcp-b-global.js"></script>
  2. 使用 navigator.modelContext.registerTool() 注册工具
  3. （可选）引入 Local Relay embed.js 支持桌面客户端