Wie wir die Aidbox-Benutzeroberfläche mit WebMCP KI-Agenten-freundlich gemacht haben

KI-Agenten können verteilte Systeme von Grund auf schreiben und große Codebasen refaktorieren. Aber wenn man einen Agenten bittet, ein Formular in einer Webanwendung auszufüllen, macht er einen Screenshot, betrachtet ihn und beginnt zu raten, welches Rechteck ein Eingabefeld ist. Was wäre, wenn eine Webseite dem Agenten einfach mitteilen könnte, was sie tun kann? Das ist die Idee hinter WebMCP.

Was ist WebMCP?

WebMCP ist ein vorgeschlagener Webstandard, der es Websites ermöglicht, ihre Aktionen als MCP-Tools bereitzustellen, anstatt Agenten zu zwingen, die Oberfläche selbst zu analysieren. Die Website deklariert ihre Fähigkeiten, der Browser steuert den Zugriff, und der Agent ruft Tools direkt auf.

Wie WebMCP funktioniert

Der Standard fügt eine Browser-API navigator.modelContext mit zwei Methoden hinzu: registerTool() zur Registrierung eines Tools und unregisterTool() zum Entfernen eines Tools.

Wenn ein KI-Agent eine Verbindung zum Browser herstellt, erhält er die Liste der registrierten Tools, sieht deren Beschreibungen und Schemas und kann sie genau wie reguläre MCP-Tools aufrufen.

Der Browser sammelt alle registrierten Tools und stellt sie dem verbundenen KI-Agenten zur Verfügung. Der Agent erhält die Tool-Namen, Beschreibungen und Eingabe-Schemas. Wenn der Agent eine Aktion ausführen möchte, ruft er das entsprechende Tool auf, und die Seite führt die in execute definierte Funktion aus.

In der Praxis sieht der Lebenszyklus folgendermaßen aus:

1. Die Seite lädt und registriert Tools.
2. Der Browser stellt diese Tools dem KI-Agenten zur Verfügung.
3. Der Agent wählt ein Tool aus und sendet Eingabeparameter.
4. Die Seite führt das Tool aus und gibt das Ergebnis zurück.

Tools gibt es in zwei Typen:

• Global — immer verfügbar, unabhängig von der aktuellen Seite. Zum Beispiel die Navigation zwischen Anwendungsbereichen.
• Kontextuell — an eine bestimmte Seite gebunden und erscheinen, wenn der Benutzer zu ihr navigiert. Zum Beispiel die Patientensuche auf der Patientenseite.

Jedes Tool wird durch vier Felder beschrieben:

Das folgende Beispiel stellt ein Formularfeld als Tool bereit, damit ein Agent es programmatisch befüllen kann.

navigator.modelContext.registerTool({
  name: "fill_name",
  description: "Fill the name field on the form",
  inputSchema: {
    type: "object",
    properties: {
      value: { type: "string", description: "Name to fill in" }
    },
    required: ["value"]
  },
  execute: async (args) => {
    document.querySelector("#name-input").value = args.value;
    return {
      content: [{ type: "text", text: `Name set to: ${args.value}` }]
    };
  }
});

Demo: Aidbox-Benutzeroberfläche + KI-Agent

Wie wir WebMCP in die Aidbox-Benutzeroberfläche integriert haben

Polyfill

WebMCP ist ein junger Standard. Native Unterstützung ist nur in Chrome 146+ und nur hinter einem Flag verfügbar. Um diese Abhängigkeit zu vermeiden, verwenden wir @mcp-b/global — ein Polyfill, das navigator.modelContext in jedem Browser verfügbar macht.

Globaler Einstiegspunkt

Wenn die Anwendung lädt, registriert sie ein list_pages-Tool, das eine Übersicht aller Seiten mit Beschreibungen der auf jeder Seite verfügbaren Tools zurückgibt. Dies ist der Ausgangspunkt für den Agenten — er versteht, wohin er navigieren kann und was er dort tun kann.

const pages = [
  {
    name: "resources_list",
    description: "List of resources for a specific type",
    path: "/resource/{resourceType}",
    tools: [
      "instances_get_search() - Get current FHIR search query string",
      "instances_search(query) - Set FHIR search query and execute",
      "instances_get_results() - Get displayed table data with pagination",
      "instances_get_page() - Get current pagination state",
      "instances_get_selected() - Get IDs of selected resources",
      "instances_select(ids, selected?) - Select/deselect resources by ID",
      "instances_delete_selected() - Delete selected resources",
      "instances_export_selected() - Export selected as FHIR Bundle",
      "instances_change_page(page) - Navigate to a specific page",
      "instances_change_page_size(pageSize: 10|20|30|50|100) - Change page size",
      "instances_navigate_to_resource(id) - Navigate to edit a resource",
      "instances_open_create_page() - Navigate to create a new resource",
    ],
  },
  // ...
];

Seiten-Tools

Jede Seite registriert ihre eigenen Tools beim Einbinden und entfernt sie beim Ausblenden. Der Agent sieht immer nur die Aktionen, die gerade verfügbar sind.

navigator.modelContext.registerTool({
  name: "instances_search",
  description: "Set the FHIR search query and execute.",
  inputSchema: {
    type: "object",
    properties: {
      query: {
        type: "string",
        description: "FHIR search query params",
      },
    },
    required: ["query"],
  },
  execute: async (args) => {
    actionsRef.current.instancesSearch(args.query);
    return { content: [{ type: "text", text: `Search query set to: ${args.query}` }] };
  },
});

Aidbox UI ist Open Source. Sie können die WebMCP-Integration im Verzeichnis src/webmcp/ erkunden.

Zentrale Designentscheidung: UI-Aktionen statt API-Wrapper

Wir hätten WebMCP-Tools als Wrapper um die Aidbox-REST-API implementieren können. Der Agent sendet eine Anfrage, erhält JSON zurück und arbeitet damit. Wir haben jedoch einen anderen Weg gewählt.

Unsere Tools führen Aktionen in der Benutzeroberfläche aus. Wenn der Agent instances_search aufruft, erscheint die Suchanfrage in der Suchleiste, die Tabelle wird aktualisiert und die Paginierung neu berechnet. Der Benutzer sieht alles in Echtzeit.

Dies ist ein grundlegender Unterschied. Der Agent und der Benutzer arbeiten im selben Kontext. Der Benutzer kann die Aktionen des Agenten beobachten, jederzeit eingreifen und die Arbeit manuell fortsetzen. Es ist keine Black Box — es ist ein gemeinsamer Arbeitsbereich.

Probieren Sie es selbst aus

Sie können WebMCP in der Aidbox-Benutzeroberfläche jetzt ausprobieren.

1. Erstellen Sie eine kostenlose Sandbox unter aidbox.app
2. Installieren Sie chrome-devtools-mcp:

claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest

3. Öffnen Sie die Aidbox-Benutzeroberfläche (neue Version) in Chrome
4. Bitten Sie Claude, eine Seite zu öffnen und WebMCP zu verwenden

Wenn Sie mit WebMCP experimentieren oder KI-Agenten-Integrationen rund um Aidbox aufbauen, nehmen Sie an der Diskussion in unserer Community teil.

Siehe auch: Questionnaire Builder innerhalb eines Agenten.