WebMCP: So machen Sie Ihre Website AI-Agent-Ready (Praxis-Guide 2026)

Matthias Meyer

Google und Microsoft haben im Februar 2026 still und leise das Web veraendert. Der neue W3C-Standard WebMCP (Web Model Context Protocol) erlaubt es Websites, ihre Funktionen direkt als strukturierte Tools fuer KI-Agenten bereitzustellen. Kein Scraping, kein Screenshot-Raten, keine fragilen Browser-Automatisierungen. Stattdessen: Ein klares Menue, das Ihre Website jedem KI-Assistenten anbietet.

Dieser Artikel erklaert, was WebMCP ist, wie es sich vom Backend-MCP unterscheidet, und was Sie jetzt tun muessen, um Ihre Website fuer die Agentic-Web-Aera vorzubereiten.

Warum das wichtig ist

KI-Agenten sind die neuen Besucher. ChatGPT, Claude, Gemini, Perplexity und Browser-Assistenten durchsuchen bereits Websites -- aber bisher blind. Sie machen Screenshots, raten wo Buttons sind, und brechen ab wenn sich das Layout aendert.

WebMCP beendet das Raten. Ihre Website sagt dem Agenten direkt: "Hier sind meine Funktionen. Ruf sie so auf."

Die Zahlen

Chrome 146 hat WebMCP seit Februar 2026 als Preview (stable ab Maerz 2026)
Microsoft Edge folgt (Microsoft ist Co-Autor des Standards)
97,1% aller MCP-Tool-Beschreibungen haben laut einer aktuellen Studie mindestens einen Qualitaetsmangel -- wer es richtig macht, faellt auf
Weniger als 1% aller Websites haben agents.json implementiert -- massiver First-Mover-Vorteil

WebMCP vs. MCP: Zwei Standards, ein Ziel

Die Begriffe klingen aehnlich, sind aber unterschiedlich:

	MCP (Anthropic)	WebMCP (W3C)
Wo	Backend-Server	Browser (client-side)
Wie	JSON-RPC ueber HTTP/stdio	`navigator.modelContext` API
Wer nutzt es	Claude, ChatGPT, Cursor, VS Code	Browser-AI, Gemini, integrierte Assistenten
Fokus	Tool-Aufrufe an Server	Website-Funktionen im Browser

Beide sind komplementaer. Eine AI-Ready Website implementiert idealerweise beides:

Backend (MCP): agents.json + agent-card.json fuer Tool Discovery
Frontend (WebMCP): navigator.modelContext fuer Browser-native Interaktion

Die zwei APIs von WebMCP

1. Declarative API (HTML-Attribute)

Die einfachste Art, Formulare fuer KI-Agenten zugaenglich zu machen. Keine JavaScript-Kenntnisse noetig:

<form data-mcp-tool="make_reservation"
      data-mcp-description="Reserve a table at our restaurant">
  <input name="date" type="date" placeholder="Datum" />
  <input name="guests" type="number" placeholder="Personen" />
  <input name="name" type="text" placeholder="Ihr Name" />
  <button type="submit">Reservieren</button>
</form>

Der Browser erkennt automatisch die Formularfelder und stellt sie als Tool bereit. Ein KI-Agent kann dann sagen: "Reserviere einen Tisch fuer 4 Personen am Freitag" -- und das Formular wird strukturiert ausgefuellt.

2. Imperative API (JavaScript)

Fuer komplexere Tools mit Validierung, API-Aufrufen und dynamischem Verhalten:

navigator.modelContext.registerTool({
  name: "search_properties",
  description: "Search available properties by location, price and type",
  inputSchema: {
    type: "object",
    properties: {
      location: { type: "string", description: "City or district" },
      maxPrice: { type: "number", description: "Maximum price in EUR" },
      type: { type: "string", enum: ["apartment", "house", "commercial"] }
    }
  },
  annotations: {
    readOnlyHint: true,
    idempotentHint: true
  },
  handler: async (params) => {
    const res = await fetch(`/api/v1/listings?${new URLSearchParams(params)}`);
    return res.json();
  }
});

Annotations: Sicherheit eingebaut

Die annotations sagen dem KI-Agenten, wie er mit dem Tool umgehen soll:

readOnlyHint: "Dieses Tool liest nur Daten" -- Agent kann es ohne Rueckfrage ausfuehren
destructiveHint: "Dieses Tool loescht/aendert Daten" -- Agent soll den Nutzer fragen
requiresConfirmation: "Nutzer muss bestaetigen" -- fuer Buchungen, Bestellungen, Kontaktformulare

Die 3 Schichten einer AI-Ready Website

Schicht 1: Discovery (agents.json)

Eine JSON-Datei unter /.well-known/agents.json, die beschreibt was Ihre Website kann:

{
  "schema_version": "1.0",
  "name": "Mein Restaurant",
  "tools": [
    {
      "name": "get_menu",
      "description": "Browse the menu with categories and prices",
      "endpoint": "/api/v1/menu",
      "method": "GET"
    },
    {
      "name": "make_reservation",
      "description": "Reserve a table",
      "endpoint": "/api/v1/reservation",
      "method": "POST"
    }
  ]
}

KI-Agenten wie ChatGPT und Claude pruefen diese Datei automatisch. Wenn ein Nutzer fragt "Finde mir ein Restaurant mit veganen Optionen und reserviere fuer Samstag", kann der Agent Ihre Website finden UND direkt handeln.

Schicht 2: Agent-to-Agent (agent-card.json)

Das A2A-Protokoll (Agent-to-Agent) ermoeglicht die Kommunikation zwischen KI-Agenten:

{
  "name": "Mein Restaurant",
  "protocolVersion": "0.3.0",
  "skills": [
    {
      "id": "reservation",
      "name": "Table Reservation",
      "description": "Book a table for dining",
      "tags": ["booking", "restaurant", "reservation"]
    }
  ]
}

Schicht 3: Browser-native Tools (WebMCP)

Die navigator.modelContext API registriert Tools direkt im Browser. Funktioniert mit Browser-Assistenten, Google Gemini und zukuenftigen integrierten KI-Features.

Was Sie jetzt tun sollten

Sofort (Aufwand: 1-2 Stunden)

agents.json erstellen -- Beschreiben Sie 3-5 Kern-Aktionen Ihrer Website
agent-card.json erstellen -- A2A-Skills fuer die wichtigsten Funktionen
Beide unter /.well-known/ deployen mit CORS-Headern (Access-Control-Allow-Origin: *)

Diese Woche (Aufwand: halber Tag)

WebMCP Declarative API -- data-mcp-tool Attribute auf Ihre wichtigsten Formulare
Structured Data pruefen -- JSON-LD (Schema.org) ist die Grundlage fuer alles
AI-Ready Score pruefen -- studiomeyer.io/store bietet einen kostenlosen Check

Diesen Monat

WebMCP Imperative API -- JavaScript-Tools fuer komplexere Workflows
Tool-Beschreibungen optimieren -- Klar, praezise, mit Rueckgabewert-Beschreibung
Analytics einbauen -- Tracken Sie, welche Tools von Agenten genutzt werden

Branchenspezifische Beispiele

Restaurant

get_menu (Speisekarte mit Allergenen)
check_availability (Tischverfuegbarkeit pruefen)
make_reservation (Tisch reservieren)

Immobilien

search_listings (Objekte filtern nach Preis, Lage, Groesse)
get_property_details (Expose mit Bildern und Grundriss)
request_viewing (Besichtigung buchen)

Handwerk

get_services (Leistungen und Preise)
request_quote (Kostenvoranschlag anfragen)
check_availability (Naechster freier Termin)

Der AI-Ready Score

Wir haben den AI-Ready Score erweitert. Neben den klassischen SEO- und Performance-Checks gibt es jetzt einen Agent Discovery Bonus (bis zu 10 Extra-Punkte):

Check	Punkte
agents.json erreichbar + valide	5
agent-card.json mit A2A Skills	3
WebMCP Declarative Attribute	2
Maximum	110/110

Websites mit voller AI-Agent-Integration erhalten das Grade A++ -- weniger als 1% aller Websites erreichen dieses Niveau.

Kostenloser Check: Testen Sie Ihre Website unter studiomeyer.io mit unserem AI-Ready Tool.

Fazit

WebMCP ist fuer KI-Agenten, was responsive Design fuer Mobilgeraete war: Zuerst optional, dann erwartet, dann Pflicht. Die Websites, die jetzt ihre Tool-Interfaces aufbauen, werden die sein, die KI-Agenten bevorzugt nutzen.

Die gute Nachricht: Der Einstieg ist einfach. Eine agents.json, ein paar HTML-Attribute, und Ihre Website spricht die Sprache der KI.

StudioMeyer hilft Unternehmen, ihre Websites AI-Ready zu machen. Von der agents.json bis zur vollstaendigen WebMCP-Integration -- als Teil unserer Premium-Website-Pakete oder als einmaliges AI-Ready Upgrade fuer bestehende Websites.