WebMCP: Eine Browser-Schnittstelle für KI-Agenten

Aktualisiert am 26.09.2026: Der Artikel beschreibt den Stand von Mai 2026. WebMCP hat sich seitdem geändert, die Codebeispiele entsprechen nicht mehr der aktuellen Spezifikation. Die Änderungen fasst der Nachtrag zusammen.

Derzeit entsteht mit dem Web Model Context Protocol (WebMCP) ein neuer Browser-Standard. Dessen Ziel ist es, Webseiten gezielt für KI-Agenten zugänglich zu machen. Bisher müssen KI-Agenten oft versuchen, die visuelle Struktur einer Webseite mühsam zu interpretieren, um an Informationen zu gelangen oder Aktionen auszuführen. Mit WebMCP ändert sich dieser Ansatz: Webseiten können dem Agenten nun direkt in strukturierter Form mitteilen, welche Funktionen und Inhalte zur Verfügung stehen.

Das ist wichtig, da KI-Agenten zunehmend Inhalte im Netz lesen und verarbeiten. Wenn eine Webseite dem Agenten eine Art maschinenlesbare „Gebrauchsanweisung“ mitgibt, kann dieser viel zielgerichteter und zuverlässiger agieren.

Integration auf Webseiten

Die Technik bietet im Wesentlichen zwei Wege, um solche Werkzeuge für Agenten bereitzustellen:

Einerseits lassen sich einfache HTML-Formulare mit speziellen Markierungen (Attributen) versehen. Ein kompatibler Browser übersetzt diese dann automatisch so, dass ein Agent sie verstehen und ausfüllen kann.

Andererseits können komplexere Funktionen über JavaScript direkt als Werkzeug registrieren werden. Dies bietet mehr Flexibilität für dynamische Aufgaben, wie etwa die Steuerung einer Suchfunktion.

Testimplementierung auf dieser Website

Um dies zu testen, habe ich WebMCP probeweise auf der Suchseite dieser Website integriert. Dabei kommen beide Ansätze zum Einsatz.

Das HTML-Suchformular wurde mit den entsprechenden Attributen markiert, um Agenten das Auffinden von Inhalten zu erleichtern:

<form id="search-form" action="suche.html" method="GET"
      toolname="search_blog_content"
      tooldescription="Suche in den Blogartikeln und Seiten nach Schlagworten..."
      toolautosubmit="true">
    <input type="search" name="query" id="search-input"
           toolparamtitle="Suchanfrage"
           toolparamdescription="Die Suchbegriffe für die Volltextsuche.">
</form>

Zusätzlich meldet ein Skript die Suchfunktion direkt an den Browser, falls dieser den neuen Standard bereits unterstützt. Ein vereinfachtes Beispiel aus meinem Code zeigt, wie diese Registrierung abläuft:

const modelContext = document.modelContext || navigator.modelContext;

if (modelContext && modelContext.registerTool) {
    modelContext.registerTool({
        name: "search_blog_content",
        description: "Volltextsuche in den Blogartikeln...",
        inputSchema: {
            type: "object",
            properties: {
                query: {
                    type: "string",
                    description: "Die Suchbegriffe für die Volltextsuche."
                }
            },
            required: ["query"]
        },
        execute: async (params) => {
            if (!params.query) return JSON.stringify({ error: "Fehlende Suchanfrage" });
            const results = performSearch(params.query);
            return JSON.stringify(results.slice(0, 10));
        }
    });
}

Frühe Phase und Ausblick

WebMCP befindet sich noch in einer sehr frühen und experimentellen Entwicklungsphase. Es ist ein Konzept, das sich fortlaufend ändern kann und noch nicht für den breiten produktiven Einsatz gedacht ist. In Google Chrome kann man die Funktion über eine spezielle Einstellung (chrome://flags/#enable-webmcp-testing) aktivieren.

Zudem gibt es im Chrome Web Store eine Erweiterung: Model Context Tool Inspector. Damit lassen sich die bereitgestellten Werkzeuge auf einer Webseite einsehen und direkt mit einem KI-Modell testen.

Die Spezifikationen und weitere Details zur Entwicklung können auf Chrome Developer sowie im offiziellen GitHub-Repository der Web Machine Learning Community Group verfolgt werden.

async function registerSearchTool() {
    if (!document.modelContext) return;
    try {
        await document.modelContext.registerTool({
            name: "search_blog_content",
            title: "Blogsuche",
            description: "Volltextsuche in den Blogartikeln...",
            inputSchema: {
                type: "object",
                properties: {
                    query: { type: "string", description: "Suchbegriffe für die Volltextsuche." }
                },
                required: ["query"]
            },
            annotations: { readOnlyHint: true },
            execute: async ({ query }) => {
                const results = performSearch(query);
                return { query, total: results.length, results: results.slice(0, 5) };
            }
        });
    } catch (error) {
        console.warn("WebMCP:", error);
    }
}