Gå til hovedindhold
W3C Draft · Chrome 146+ · Cloudflare Edge Bridge

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.

Din Browser Status

Cloudflare WebMCP Edge Bridge & /mcp Server aktiv

Standard endpoints: /mcp · /.webmcp/bridge.js

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.

Løsningen

De 3 lag i moderne WebMCP

WebMCP forener klientside HTML, browserens runtime og edge servere i en sammenhængende protokol for Agent Experience (AX).

Lag 1

Deklarativ HTML

Formularer annoteres med toolname, tooldescription og parameterforklaringer. Browseren eller bridgen udstiller automatisk formularen som et MCP-værktøj.

<form toolname="search">
Lag 2

Imperativ modelContext

JavaScript på siden registrerer typede funktioner med JSON Schema direkte på document.modelContext i Chrome 146+ eller via WebMCP bridge.

document.modelContext.registerTool()
Lag 3

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.

POST /mcp {"method":"tools/call"}

Paradigmeskiftet: UX vs. DX vs. AX

Hvordan grænseflader udvikler sig fra mennesker til udviklere og nu til autonome agenter.

DimensionUX (Brugeroplevelse)DX (Udvikleroplevelse)AX (Agentoplevelse / WebMCP)
Primær forbrugerMenneskeligt sansesystemSoftwareingeniørAutonom AI-agent
InterfaceCSS, klik, berøring, farverREST, GraphQL, SDKs, CLITypet in-browser værktøjsserver
OpdagelseVisuel navigation, menuerDokumentationsportal, OpenAPILink-headere, MCP Server Cards
FejlresponsPopups, røde advarslerStatuskoder, stack tracesMCP CallToolResult med retry-instruks
Dansk MitID SikkerhedMenneske godkender i MitID appOfte blokeret for automatiseringHuman-in-the-Loop pause i samme fane
Dansk Cyber-Sikkerhed

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:

Trin 1: Agentforberedelse

Agenten indhenter data fra CVR, DAWA eller interne systemer og udfylder formularen via WebMCP.

Trin 2: MitID HITL Pause

Værktøjet detekterer MitID-kravet og pauser sikkert. Mennesket godkender lynhurtigt i sit aktive faneblad.

Trin 3: Autonom Genoptagelse

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>
100% Agent Readiness

WebMCP Agent Readiness Tjekliste

Brug denne tjekliste til at optimere dit websted til autonome agenter og Cloudflares isitagentready.com audit.

1

Same-Origin /mcp Endpoint

Udbyd et hurtigt JSON-RPC 2.0 endpoint på /mcp med metoderne initialize, ping, tools/list og tools/call.

2

RFC 8288 HTTP Link Header

Send </mcp>; rel="mcp" i HTTP-svarets Link-headers for øjeblikkelig maskinopdagelse.

3

Edge Bridge Data Attributter

Angiv data-mcp-url="/mcp" og data-packs="mcp-server-client" på <html> elementet.

4

Deklarative HTML-formularer

Annoter nøgleformularer med toolname, tooldescription og parameterbeskrivelser.

5

Sikker toolautosubmit

Aktivér toolautosubmit på søge- og læseformularer, der sikkert kan afvikles autonomt.

6

SubmitEvent.respondWith()

Formularen besvarer agentkald med strukturerede JSON-resultater i standard CallToolResult format.

7

Imperativ document.modelContext

Registrer dynamiske klientside-værktøjer med JSON Schema parametre i browserens session.

8

MitID Human-in-the-Loop Safeguard

Følsomme handlinger pauser ved værktøjsgrænsen for menneskelig MitID-godkendelse.

9

Permissions-Policy: tools=(self)

Begræns værktøjsudførelse til samme origin for at forhindre clickjacking og iframe-misbrug.

10

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.