# WebMCP: In-Browser Agent Experience (AX) Guide & Tjekliste > WebMCP transformerer websider fra passive, visuelle klikflader til typede, deterministiske værktøjsservere for autonome AI-agenter. Kør agenter direkte i browserens aktive brugersession uden skrøbelig DOM-scraping eller tab af login-tilstand. ## Hvorfor WebMCP? Traditionel webautomatisering (Playwright, Puppeteer eller computer-use synsmodeller) er fundamentalt utilstrækkelig til pålidelige agentarbejdsgange: - **Skrøbeligt**: Ændringer i CSS-klasser, DOM-hierarkier eller knapstørrelser knækker agenten. - **Højt tokenforbrug**: At sende tusindvis af linjer rå HTML eller megabyte-tunge screenshots koster unødig tid og penge. - **Autentificeringsudfordringer**: Agenter kan ikke autonomt løse MitID, CAPTCHA eller to-faktor SMS-udfordringer. WebMCP løser dette ved at lade websiden selv erklære sine understøttede handlinger som standardiserede Model Context Protocol (MCP) værktøjer. ## De 3 lag i WebMCP 1. **Deklarativ HTML**: Formularer annoteres med `toolname`, `tooldescription`, `toolparamdescription` og `toolautosubmit`. Browseren opfanger automatisk formularen og svarer med `SubmitEvent.respondWith()`. 2. **Imperativ Browser API (`document.modelContext`)**: Klientside JavaScript registrerer typede funktioner med JSON-schema direkte i browserens session (W3C Draft / Chrome 146+). 3. **Edge & Same-Origin HTTP Bridge**: Cloudflares `mcp-server-client` pack og et same-origin JSON-RPC 2.0 endpoint (`/mcp`) sikrer, at agenter kan udføre værktøjer uden CORS-friktion. ## UX vs. DX vs. AX Matrix | Dimension | UX (Brugeroplevelse) | DX (Udvikleroplevelse) | AX (Agentoplevelse / WebMCP) | | :--- | :--- | :--- | :--- | | **Primær modtager** | Menneske | Softwareudvikler | Autonom AI-agent | | **Grænseflade** | Visuel layout, knapper, CSS | REST/GraphQL API, SDK | Typet in-browser værktøjsserver | | **Opdagelse** | Visuel scanning | API-dokumentation / OpenAPI | RFC 8288 Link headers, MCP Server Card | | **Fejlhåndtering** | Visuelle fejlbeskeder | HTTP statuskoder / stack traces | Strukturerede MCP CallToolResult payloads | | **MitID / Sikkerhed** | Direkte menneskelig godkendelse | Ofte blokeret for maskiner | Human-in-the-Loop (HITL) pause i fanebladet | ## Dansk AX & MitID Human-in-the-Loop (HITL) I Danmark kan en AI-agent ikke og må ikke gennemføre MitID-valideringer autonomt. WebMCP muliggør den perfekte Human-in-the-Loop arkitektur: Agenten udfører dataopslag og forbereder handlingen, og når et MitID-krav opstår, pauser agenten ved værktøjsgrænsen, lader mennesket godkende i den aktive fane, og genoptager derefter opgaven. ## WebMCP Agent Readiness Tjekliste (10 punkter) - [ ] 1. **Same-Origin MCP Server**: Udbyd `/mcp` med JSON-RPC 2.0 understøttelse (`initialize`, `tools/list`, `tools/call`). - [ ] 2. **HTTP Link Discovery**: Send `; rel="mcp"` i HTTP-svarets `Link`-headere. - [ ] 3. **Edge Bridge Binding**: Angiv `data-mcp-url="/mcp"` og `data-packs="mcp-server-client"` på rod-``. - [ ] 4. **Deklarative HTML-formularer**: Tildel `toolname`, `tooldescription` og parameterannoteringer på søge- og inputfelter. - [ ] 5. **Autonome Formularer**: Benyt `toolautosubmit` på formularer, der sikkert kan eksekveres uden menneskelig bekræftelse. - [ ] 6. **Deterministiske Svar**: Formularer kalder `event.respondWith()` og returnerer standard MCP `CallToolResult`. - [ ] 7. **Permissions-Policy**: Angiv `Permissions-Policy: tools=(self)` for at beskytte mod uautoriseret indlejring i iframes. - [ ] 8. **MCP Server Card**: Udgiv maskinlæsbar deklaration på `/.well-known/mcp/server-card.json`. - [ ] 9. **Agent Skills Indeks**: Udbyd trinvise instruktioner på `/.well-known/agent-skills/index.json`. - [ ] 10. **Markdown Fallback**: Sørg for at enhver side kan hentes som ren Markdown via `/index.md` eller `Accept: text/markdown`. --- Kilde: [AgentAccess WebMCP Hub](https://agentaccess.dk/da/webmcp)