WebMCP: In-Browser Agent Experience (AX)
WebMCP forvandler websider fra passive visuelle klikflader til typede, deterministiske værktøjsservere for AI-agenter. Afvikl agenter direkte i brugerens browser med delte sessionscookies, nul DOM-scraping og indbygget MitID Human-in-the-Loop sikkerhed.
Cloudflare WebMCP Edge Bridge & /mcp Server aktiv
Hvorfor traditionel webautomatisering fejler
Computer-use synsmodeller og Playwright-scripts er for langsomme og skrøbelige til produktionsagenter.
1. Skrøbelig DOM & CSS-afhængighed
Når en knaps klasse ændres fra Tailwind v3 til v4, eller et element flyttes i en responsiv visning, fejler agentens CSS-selector. Agenter sidder fast i dyre fejl-loops.
2. Ekstremt Token- og Tidsforbrug
At sende megabyte-tunge screenshots af en webside til en synsmodel koster 2–5 sekunder pr. tur og tusindvis af tokens blot for at finde et enkelt søgefelt.
3. MitID & Sessionsadskillelse
Headless cloud-browsere kan ikke omgå MitID, to-faktor SMS eller CAPTCHAs. At overlade rå brugernavne og koder til agenter er en alvorlig sikkerhedsrisiko.
De 3 lag i moderne WebMCP
WebMCP forener klientside HTML, browserens runtime og edge servere i en sammenhængende protokol for Agent Experience (AX).
Deklarativ HTML
Formularer annoteres med toolname, tooldescription og parameterforklaringer. Browseren eller bridgen udstiller automatisk formularen som et MCP-værktøj.
Imperativ modelContext
JavaScript på siden registrerer typede funktioner med JSON Schema direkte på document.modelContext i Chrome 146+ eller via WebMCP bridge.
Edge & /mcp Server
Cloudflares mcp-server-client pack forbinder browseren med et same-origin /mcp JSON-RPC 2.0 endpoint, så eksterne agenter kan kalde værktøjerne over HTTP.
Paradigmeskiftet: UX vs. DX vs. AX
Hvordan grænseflader udvikler sig fra mennesker til udviklere og nu til autonome agenter.
| Dimension | UX (Brugeroplevelse) | DX (Udvikleroplevelse) | AX (Agentoplevelse / WebMCP) |
|---|---|---|---|
| Primær forbruger | Menneskeligt sansesystem | Softwareingeniør | Autonom AI-agent |
| Interface | CSS, klik, berøring, farver | REST, GraphQL, SDKs, CLI | Typet in-browser værktøjsserver |
| Opdagelse | Visuel navigation, menuer | Dokumentationsportal, OpenAPI | Link-headere, MCP Server Cards |
| Fejlrespons | Popups, røde advarsler | Statuskoder, stack traces | MCP CallToolResult med retry-instruks |
| Dansk MitID Sikkerhed | Menneske godkender i MitID app | Ofte blokeret for automatisering | Human-in-the-Loop pause i samme fane |
MitID & NemLog-in: Den nødvendige HITL-grænse
I Danmark er borger-autentificering bygget til at forhindre uautoriseret maskinadgang. AI-agenter kan ikke og må ikke autonomt løse MitID app-swaps eller SMS-koder. WebMCP muliggør den mest elegante Human-in-the-Loop (HITL) arkitektur:
Agenten indhenter data fra CVR, DAWA eller interne systemer og udfylder formularen via WebMCP.
Værktøjet detekterer MitID-kravet og pauser sikkert. Mennesket godkender lynhurtigt i sit aktive faneblad.
Når godkendelsen er gennemført, opfanger WebMCP svaret og lader agenten fuldføre arbejdsgangen.
Implementeringseksempler
Sådan tilføjer du WebMCP til din webapplikation.
<!-- Declarative HTML Form WebMCP Integration -->
<form
action="/directory"
method="GET"
toolname="search_danish_directory"
tooldescription="Search Danish APIs, MCP servers, and public registers"
toolautosubmit="true"
onsubmit="handleAgentSubmit(event)"
>
<label for="q">Search Query</label>
<input
id="q"
name="q"
type="search"
toolparamdescription="Danish register or domain keyword (e.g. CVR, BBR, DAWA)"
placeholder="Search Danish infrastructure..."
/>
<button type="submit">Search</button>
</form>
<script>
function handleAgentSubmit(event) {
// If invoked autonomously by an in-browser AI agent:
if (event.agentInvoked && event.respondWith) {
event.preventDefault();
const query = new FormData(event.target).get('q');
// Return standard MCP CallToolResult payload:
event.respondWith({
content: [{
type: 'text',
text: JSON.stringify({ results: [{ name: 'CVR API', slug: 'cvr-api' }] })
}]
});
}
}
</script>WebMCP Agent Readiness Tjekliste
Brug denne tjekliste til at optimere dit websted til autonome agenter og Cloudflares isitagentready.com audit.
Same-Origin /mcp Endpoint
Udbyd et hurtigt JSON-RPC 2.0 endpoint på /mcp med metoderne initialize, ping, tools/list og tools/call.
RFC 8288 HTTP Link Header
Send </mcp>; rel="mcp" i HTTP-svarets Link-headers for øjeblikkelig maskinopdagelse.
Edge Bridge Data Attributter
Angiv data-mcp-url="/mcp" og data-packs="mcp-server-client" på <html> elementet.
Deklarative HTML-formularer
Annoter nøgleformularer med toolname, tooldescription og parameterbeskrivelser.
Sikker toolautosubmit
Aktivér toolautosubmit på søge- og læseformularer, der sikkert kan afvikles autonomt.
SubmitEvent.respondWith()
Formularen besvarer agentkald med strukturerede JSON-resultater i standard CallToolResult format.
Imperativ document.modelContext
Registrer dynamiske klientside-værktøjer med JSON Schema parametre i browserens session.
MitID Human-in-the-Loop Safeguard
Følsomme handlinger pauser ved værktøjsgrænsen for menneskelig MitID-godkendelse.
Permissions-Policy: tools=(self)
Begræns værktøjsudførelse til samme origin for at forhindre clickjacking og iframe-misbrug.
MCP Server Card & Agent Skills
Udgiv /.well-known/mcp/server-card.json og /.well-known/agent-skills/index.json.
Ofte stillede spørgsmål om WebMCP
Alt hvad du behøver at vide om in-browser agent-grænseflader og dansk digital adgang.
Q1.Hvad er WebMCP helt præcist?
WebMCP (Web Model Context Protocol) er en W3C-standardisering anført af Google Chrome og Cloudflare, der tillader websider at registrere typede værktøjer direkte i browserens agent-runtime via HTML-formularer (<form toolname="...">) eller JavaScript (document.modelContext.registerTool()). Det gør det muligt for AI-agenter at handle direkte i brugerens aktive session med deterministiske JSON-parametre uden at scrape DOM-træet eller simulere museklik.
Q2.Hvordan adskiller WebMCP sig fra traditionel Anthropic MCP?
Standard MCP forbinder sprogmodeller til backend-tjenester (databaser, filsystemer, CLI'er) over stdio eller HTTP JSON-RPC. WebMCP bringer samme protokol ind i klientside-browseren. Værktøjerne eksekveres inden for websidens eget sikkerhedssandbox og deler brugerens aktive autentificeringstilstand (f.eks. cookies og login-sessioner).
Q3.Hvorfor er WebMCP bedre end Playwright eller vision-modeller til browserautomatisering?
Visuel automatisering (screenshots og CSS-selectors) er langsom, ekstremt token-tung og knækker ved den mindste UI-ændring. WebMCP leverer nul-klik, nul-vision eksekvering: Agenten kalder en formel funktion med validerede parametre og modtager et struktureret JSON-svar direkte fra websidens applikationslogik.
Q4.Hvordan håndterer WebMCP MitID og NemLog-in i Danmark?
Autonome AI-agenter kan og må ikke omgå MitID-validering. WebMCP muliggør et rent Human-in-the-Loop (HITL) mønster: Agenten kører i samme browserfane som mennesket, forbereder formularen eller forespørgslen, og når et MitID-krav opstår, pauser agenten ved værktøjets grænseflade, lader borgeren godkende i MitID-appen, og genoptager automatisk, når sessionen er bekræftet.
Q5.Hvilke browsere understøtter WebMCP i dag?
Google Chrome tester WebMCP fra version 146+ via flaget chrome://flags/#enable-model-context-window-api. For eksisterende browsere og server-miljøer fungerer Cloudflares WebMCP edge bridge samt same-origin JSON-RPC 2.0 endpoints (som AgentAccess's /mcp) som et universelt bagudkompatibelt lag.
Q6.Hvad er Cloudflares WebMCP Edge Bridge?
Cloudflare WebMCP lader servere og edge-workers injecte en standardiseret client-side bridge script (mcp-server-client pack), der automatisk opdager same-origin /mcp server-endpoints og binder dem til browserens document.modelContext interface.
Q7.Er WebMCP sikkert mod ondsindede scripts og cross-site hijacking?
Ja. WebMCP overholder browserens Same-Origin Policy (SOP). Derudover anvender produktionsopsætninger HTTP Permissions-Policy: tools=(self), som forhindrer tredjeparts-iframes i at kalde eller overskrive webapplikationens registrerede værktøjer.
Klar til at afprøve WebMCP?
Udforsk kataloget over danske API'er og AI-byggesten, eller integrer AgentAccess's live WebMCP værktøjer i dit eget agent-setup.