# WebMCP: In-Browser Agent Experience (AX) Guide & Checklist > WebMCP transforms web pages from passive, visual click-targets into typed, deterministic tool servers for autonomous AI agents. Run agents directly inside the user's active browser session without fragile DOM scraping, breaking CSS selectors, or authentication friction. ## Why WebMCP? Traditional browser automation (Playwright, Puppeteer, or computer-use vision models) is fundamentally fragile for real-world agent workflows: - **Brittle Execution**: Minor CSS redesigns, responsive breakpoints, or Tailwind updates silently break DOM selectors. - **Token Bloat**: Sending megabytes of raw HTML or viewport screenshots to vision models inflates cost and adds seconds of latency. - **Authentication Walls**: Autonomous agents cannot safely manage CAPTCHAs, SMS OTPs, or Danish MitID challenges. WebMCP solves this by allowing web applications to declare and expose typed functions directly to the browser's agent runtime. ## The 3 Tiers of WebMCP 1. **Declarative HTML Actuation**: Forms are annotated with `toolname`, `tooldescription`, `toolparamdescription`, and `toolautosubmit`. Browsers automatically expose these forms as callable tools and dispatch `SubmitEvent.respondWith()`. 2. **Imperative Browser API (`document.modelContext`)**: Client JavaScript registers typed functions with JSON Schemas directly into the active browser session (W3C Draft / Chrome 146+). 3. **Same-Origin Server & Edge Bridge**: Cloudflare's `mcp-server-client` pack and a same-origin JSON-RPC 2.0 endpoint (`/mcp`) allow browser agents and AI frameworks to execute tools without CORS or cross-origin issues. ## UX vs. DX vs. AX Matrix | Dimension | UX (User Experience) | DX (Developer Experience) | AX (Agent Experience / WebMCP) | | :--- | :--- | :--- | :--- | | **Primary Consumer** | Human visual perception | Software engineer writing code | Autonomous AI agent | | **Interface** | HTML/CSS visual layout, buttons | REST/GraphQL API, typed SDK | In-browser typed tool server | | **Discovery** | Visual menus, sitemaps | OpenAPI spec, docs portal | RFC 8288 Link headers, MCP Server Card | | **Failure Mode** | Visual banner / modal | HTTP status codes / stack traces | Deterministic MCP CallToolResult errors | | **MitID / Auth** | Human app-swap verification | Often blocked or requires proxy | Human-in-the-Loop (HITL) pause in tab | ## Danish AX & MitID Human-in-the-Loop (HITL) In Denmark, AI agents cannot and must not bypass MitID citizen security. WebMCP is ideal for Danish services because it runs inside the user's authenticated browser tab. The agent performs research and pre-fills forms, but whenever a sensitive MitID challenge or contract signature occurs, the agent pauses at the tool boundary, prompts the human to approve in the tab, and immediately resumes once authenticated. ## WebMCP Agent Readiness Checklist (10 Points) - [ ] 1. **Same-Origin MCP Server**: Expose `/mcp` supporting JSON-RPC 2.0 (`initialize`, `tools/list`, `tools/call`). - [ ] 2. **HTTP Link Discovery**: Include `; rel="mcp"` in HTTP response `Link` headers. - [ ] 3. **Edge Bridge Binding**: Declare `data-mcp-url="/mcp"` and `data-packs="mcp-server-client"` on the root ``. - [ ] 4. **Declarative Forms**: Add `toolname`, `tooldescription`, and `toolparamdescription` to search and input forms. - [ ] 5. **Safe Autonomous Submission**: Use `toolautosubmit` only on idempotent, safe forms. - [ ] 6. **Deterministic Return Schemas**: Form submissions call `event.respondWith()` returning standard MCP `CallToolResult`. - [ ] 7. **Permissions-Policy**: Set `Permissions-Policy: tools=(self)` to prevent unauthorized iframe hijacking. - [ ] 8. **MCP Server Card**: Publish machine-readable metadata at `/.well-known/mcp/server-card.json`. - [ ] 9. **Agent Skills Index**: Expose step-by-step agent skills at `/.well-known/agent-skills/index.json`. - [ ] 10. **Markdown URL Fallback**: Guarantee that appending `/index.md` or sending `Accept: text/markdown` returns clean Markdown. --- Source: [AgentAccess WebMCP Hub](https://agentaccess.dk/webmcp)