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

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 für 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 müssen, um Ihre Website für 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 ähnlich, sind aber unterschiedlich:

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

1. Backend (MCP): agents.json + agent-card.json für Tool Discovery
2. Frontend (WebMCP): navigator.modelContext für Browser-native Interaktion

Die zwei APIs von WebMCP

1. Declarative API (HTML-Attribute)

Die einfachste Art, Formulare für KI-Agenten zugaenglich zu machen. Keine JavaScript-Kenntnisse nötig:

<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 für 4 Personen am Freitag" -- und das Formular wird strukturiert ausgefuellt.

2. Imperative API (JavaScript)

Für 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 ausführen
• destructiveHint: "Dieses Tool loescht/aendert Daten" -- Agent soll den Nutzer fragen
• requiresConfirmation: "Nutzer muss bestaetigen" -- für 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 prüfen diese Datei automatisch. Wenn ein Nutzer fragt "Finde mir ein Restaurant mit veganen Optionen und reserviere für 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)

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

Diese Woche (Aufwand: halber Tag)

1. WebMCP Declarative API -- data-mcp-tool Attribute auf Ihre wichtigsten Formulare
2. Structured Data prüfen -- JSON-LD (Schema.org) ist die Grundlage für alles
3. AI-Ready Score prüfen -- studiomeyer.io/store bietet einen kostenlosen Check

Diesen Monat

1. WebMCP Imperative API -- JavaScript-Tools für komplexere Workflows
2. Tool-Beschreibungen optimieren -- Klar, praezise, mit Rueckgabewert-Beschreibung
3. Analytics einbauen -- Tracken Sie, welche Tools von Agenten genutzt werden

Branchenspezifische Beispiele

Restaurant

• get_menu (Speisekarte mit Allergenen)
• check_availability (Tischverfuegbarkeit prüfen)
• make_reservation (Tisch reservieren)

Immobilien

• search_listings (Objekte filtern nach Preis, Lage, Größe)
• 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):

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 für KI-Agenten, was responsive Design für 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 für bestehende Websites.