--- name: webmcp-demo description: "WebMCP universal compatibility demo - showcases all mainstream AI Agent to web page communication approaches." version: 1.0.0 author: WebMCP Team tags: [webmcp, demo, communication, ai-agent] --- # WebMCP Universal Compatibility Page ## Overview This page implements the full WebMCP interface and is compatible with all mainstream AI Agent to web page communication approaches. It provides unified tool registration and invocation, supporting both Page→Agent and Agent→Page two-way communication. **Demo URL**: https://game4ai.online/webmcp/universal-compatible.html ## When to Use - The user wants to learn about the WebMCP protocol - The user wants to test AI Agent ↔ web page communication - Developers want to learn how to integrate WebMCP - Verifying that a communication approach works ## Capabilities - Get the current time and timezone - Perform basic math operations - Echo messages to test communication - Get basic page information - Query page DOM elements - Send messages to the agent (Page→Agent) ## Quick Start **⚠️ IMPORTANT: all `navigator.modelContext.callTool()` calls are async — you MUST use `await`!** ```javascript // Get time (async, must await) const time = await navigator.modelContext.callTool({ name: 'get_time', arguments: {} }); // Calculate (async, must await) const result = await navigator.modelContext.callTool({ name: 'calculate', arguments: { a: 10, b: 5, operation: 'add' } }); // Echo test (async, must await) const echo = await navigator.modelContext.callTool({ name: 'echo', arguments: { message: 'Hello WebMCP!' } }); ``` **Wrong example**: ```javascript // ❌ WRONG: no await, result is a Promise object const result = navigator.modelContext.callTool({ name: 'calculate', arguments: { a: 1, b: 2, operation: 'add' } }); // result.value would be undefined! ``` ## Playing games: always use WebMCP tools **✅ Correct approach:** control games exclusively through the WebMCP tools listed on the page (call `navigator.modelContext.callTool({ name: '...', arguments: {...} })`). Read `skill.md` / the skill index linked in the page `` for the per-game tool and action formats. **❌ Anti-pattern — do NOT do this:** - Do NOT screenshot the page and pixel-analyze the canvas to compute click coordinates. - Do NOT hand-click canvas cells / drag pieces to reverse-engineer the game. - Do NOT guess action formats; the state tool returns the exact board/state structure. The page exposes an sr-only "WebMCP API docs" region (tools + usage) and a visible agent hint bar. If `arena_start_game`/game start returns an empty-looking envelope, the tools are registered **dynamically**: re-list tools (`navigator.modelContext.listTools()`) after starting. ## Tools **All tool calls return a `Promise` — you MUST use `await`!** | Tool | Description | Arguments | Return | |------|-------------|-----------|--------| | `get_time` | Get the current time | - | `Promise` | | `calculate` | Math operation | a, b, operation | `Promise` | | `echo` | Echo a message | message | `Promise` | | `get_page_info` | Get page information | - | `Promise` | | `query_dom` | Query DOM | selector, limit? | `Promise` | | `notify_agent` | Notify the agent | message, type? | `Promise` | ## Communication ### Agent→Page **⚠️ IMPORTANT: `callTool()` is async — you MUST use `await`!** AI agents call page tools through the `navigator.modelContext` interface: ```javascript // List tools (sync) navigator.modelContext.listTools(); // Call a tool (async, must await) const result = await navigator.modelContext.callTool({ name: 'tool_name', arguments: { ...args } }); ``` ### Page→Agent The page can send messages to the agent via these callbacks: | Callback | Protocol | Description | |----------|----------|-------------| | `window.agentCallback` | Playwright | exposeFunction | | `window.agentBridge` | CDP | Runtime.addBinding | | `window.callAgent` | Selenium | BiDi binding | ### Access Methods | Method | Protocol | skill.md | |--------|----------|----------| | Local Relay | WebSocket + stdio | local-relay.skill.md | | DevTools MCP | CDP + MCP | devtools-mcp.skill.md | | Playwright | CDP | playwright.skill.md | | Selenium | HTTP REST | selenium.skill.md | | CDP | WebSocket | cdp.skill.md | ## References - [WebMCP README](https://game4ai.online/webmcp/README.md) - [MCP Protocol](https://modelcontextprotocol.io/)