WebMCP: Wenn Websites lernen, mit KI zu sprechen

Wer schon mal versucht hat, einen KI-Agenten mit einer Website arbeiten zu lassen, kennt das Problem: Der Agent klickt blind auf Buttons, parst HTML-Strukturen, die sich beim nächsten Update ändern, oder macht Screenshots und hofft, dass er das Richtige erkennt. Das funktioniert – bis es nicht mehr funktioniert.

WebMCP dreht den Spieß um. Statt den Agenten raten zu lassen, was er auf einer Seite tun kann, sagt die Website es ihm einfach direkt. Und zwar über das Model Context Protocol (MCP).

Was steckt dahinter?

WebMCP ist eine kleine JavaScript-Bibliothek. Sie bindet ein Widget ein – dezent, unten rechts – über das sich MCP-Clients verbinden können. Das kann eine Browser-Erweiterung sein, Claude Desktop oder ein anderer Agent.

Sobald die Verbindung steht, weiß der Agent genau, was er darf:

• Tools aufrufen: JavaScript-Funktionen ausführen, die du definiert hast
• Prompts nutzen: Vorgefertigte Anweisungen für wiederkehrende Aufgaben abrufen
• Ressourcen lesen: Seiteninhalte oder bestimmte DOM-Elemente als Kontext holen

Die Website wird damit zu einer Art MCP-Server im Browser. Der Agent arbeitet mit dem Frontend, nicht gegen es – und Authentifizierung sowie Session-Handling laufen weiter wie gewohnt über den Browser des Nutzers.

Das Problem mit der klassischen Automatisierung

WebMCP kehrt die Logik um: Nicht der Agent muss dein Interface verstehen – du sagst ihm, was er tun kann. Das bringt ein paar handfeste Vorteile:

• Verlässlich: Der Agent ruft definierte Funktionen auf, statt im DOM herumzustochern
• Schnell: JavaScript im Browser schlägt jede API-Roundtrip
• Kontrolliert: Du legst fest, was geht – nicht mehr, nicht weniger
• Vorbereitet: Sobald Browser MCP nativ unterstützen (Stichwort navigator.modelContext), bist du schon dabei

Los geht's

Ein Script-Tag, mehr braucht es nicht:

<script src="https://webmcp.dev/webmcp.min.js"></script>

Das Widget taucht auf, und du kannst anfangen, Funktionen zu registrieren.

Tools: Was der Agent tun darf

Ein Tool ist im Grunde eine JavaScript-Funktion mit Dokumentation. Name, Beschreibung, Parameter, Handler – fertig:

mcp.registerTool(
  'searchProducts',
  'Durchsucht den Produktkatalog',
  {
    query: { type: "string", description: "Suchbegriff" },
    category: { type: "string", description: "Kategorie (optional)" }
  },
  async (args) => {
    const results = await searchAPI(args.query, args.category);
    return {
      content: [{
        type: "text",
        text: JSON.stringify(results, null, 2)
      }]
    };
  }
);

Die Parameter folgen JSON-Schema – der Agent versteht also sofort, was er übergeben kann.

Prompts: Vorlagen für wiederkehrende Aufgaben

Wenn ein Agent immer wieder ähnliche Dinge tun soll, lohnen sich Prompt-Vorlagen:

mcp.registerPrompt(
  'summarize-page',
  'Fasst den Seiteninhalt zusammen',
  [],
  () => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Fasse diesen Inhalt zusammen:\n\n${document.body.innerText.slice(0, 5000)}`
      }
    }]
  })
);

Ressourcen: Kontext für den Agenten

Mit Ressourcen gibst du dem Agenten Zugriff auf Inhalte – sei es die ganze Seite oder ein bestimmtes Element:

// Die ganze Seite
mcp.registerResource(
  'page://current',
  'Aktueller Seiteninhalt',
  'text/plain',
  () => document.body.innerText
);

// Nur der Warenkorb
mcp.registerResource(
  'element://shopping-cart',
  'Warenkorbinhalt',
  'application/json',
  () => JSON.stringify(getCartContents())
);

Das Widget anpassen

Position, Farbe, Größe – alles konfigurierbar:

mcp.configure({
  position: 'bottom-right',  // oder bottom-left, top-right, top-left
  color: '#0066cc',
  size: 'medium'             // small, medium, large
});

Wo das Sinn macht

SaaS-Produkte: Ein Agent kann Nutzern durch komplexe Workflows helfen, Formulare vorausfüllen oder Daten exportieren – ohne dass du für jede KI-Integration eine eigene API bauen musst.

Online-Shops: Produktsuche, Preisvergleich, Warenkorb befüllen, Bestellstatus prüfen. Alles über saubere Schnittstellen statt wackeliges Scraping.

Dokumentation: Der Agent durchsucht deine Docs und gibt Antworten, die auf dem basieren, was tatsächlich dort steht.

Dashboards: Daten abfragen, Reports bauen, Metriken erklären – mit der Logik, die im Frontend sowieso schon läuft.

Interne Tools: KI-Assistenten bekommen strukturierten Zugang, ohne dass du deine Authentifizierung aufweichen musst.

Der Mensch bleibt im Spiel

WebMCP läuft im Browser des Nutzers, nicht irgendwo auf einem Server. Der Nutzer sieht, was passiert. Er kann eingreifen, wenn etwas nicht stimmt.

Das ist ein grundlegender Unterschied zu Headless-Automatisierung, wo Agenten unsichtbar werkeln:

• Nutzer können Aktionen freigeben oder blockieren
• Alles passiert sichtbar im Browser
• Die Session-Authentifizierung greift wie gewohnt
• Bei kritischen Operationen ist explizite Bestätigung möglich

Was die Browser vorhaben

Chrome experimentiert bereits mit nativer MCP-Unterstützung. Die W3C Web Machine Learning Community Group arbeitet an einer Spezifikation für navigator.modelContext.

Wenn das kommt, sind Seiten mit WebMCP vorbereitet:

// Zukunft: Browser bringt es mit
if (navigator.modelContext) {
  // Native API nutzen
} else {
  // WebMCP als Fallback
}

Sicherheit nicht vergessen

Du gibst einer KI Zugriff auf Funktionen. Das sollte man durchdenken:

• Nur das Nötige: Nicht alles exponieren, was technisch geht
• Eingaben prüfen: Parameter validieren, bevor sie ausgeführt werden
• Rate Limiting: Gegen Missbrauch absichern
• Logging: Nachvollziehbar machen, was passiert ist
• Bestätigung bei heiklen Sachen: Destruktive Aktionen nicht einfach durchwinken

WebMCP liefert die Hooks dafür. Das Sicherheitskonzept musst du selbst bauen.

Wie schlägt sich WebMCP?

Ausprobieren

1. webmcp.dev hat Doku und Beispiele
2. Script einbinden
3. Erstes Tool registrieren
4. Mit einem MCP-Client verbinden und testen

Das Ganze ist Open Source auf GitHub. Die Spezifikation entwickelt sich in den W3C Incubation Repositories weiter.

Unterm Strich

WebMCP ändert, wie KI und Web zusammenarbeiten. Statt Agenten, die sich mühsam durch Interfaces kämpfen, gibt es eine gemeinsame Sprache. Die Website sagt, was geht – der Agent nutzt es.

Wer heute damit anfängt, baut auf einem Standard, der sich gerade etabliert. Keine schlechte Position, wenn Browser das Ganze bald nativ unterstützen.

Links

• WebMCP
• GitHub Repository
• Model Context Protocol
• W3C Web Machine Learning Community Group
• Claude Desktop MCP Dokumentation

Unterstützung gebraucht?

Du willst WebMCP in deine Anwendung integrieren oder MCP generell in deine Infrastruktur bringen? Melde dich – wir machen das.