WebMCP React

Einen Workflow wählen

React-Teams beginnen mit einem Workflow, der für Menschen bereits funktioniert: Produktsuche, Support-Suche, Angebotsvorbereitung oder Terminverfügbarkeit. Ein WebMCP-Tool beschreibt eine enge Fähigkeit mit klarem Ergebnis und nicht jeden visuellen Button. Definieren Sie Ziel, Eingaben, Ergebnis und Fehlerzustände vor dem Registrierungscode.

Aktuelle Browser-Oberfläche nutzen

Die aktuelle dokumentierte imperative Oberfläche ist document.modelContext. Prüfen Sie die Fähigkeit im Browser und registrieren Sie Name, Beschreibung, inputSchema und execute. Die normale React-Oberfläche bleibt ohne API nutzbar. navigator.modelContext ist nur ein Legacy-Signal; statischer Code ist keine Runtime-Unterstützung.

Eingaben als Vertrag gestalten

Verwenden Sie explizite JSON-Schema-Eigenschaften, Typen, Formate, Beschreibungen und Pflichtfelder. Agenten-Input bleibt nicht vertrauenswürdig. Leiten Sie ihn in dieselbe validierte Anwendungsaktion wie bei einem Menschen und verwenden Sie clientseitige Sichtbarkeit niemals als Autorisierung.

Vorbereitung und Commit trennen

Suche und Lookup sind oft read-only. Warenkorb- oder Angebotsvorbereitung kann reversibel sein. Buchung, Checkout, Bestellung, Kontenänderung und Identitäts-Workflows können Verpflichtungen erzeugen oder sensible Daten betreffen. Zeigen Sie die Konsequenz, verlangen Sie eine ausdrückliche Bestätigung und erzwingen Sie Autorisierung serverseitig.

Lifecycle und Fehler testen

Eine echte React-Integration muss Navigation, Hydration, Re-Renders, doppelte Mounts, Netzwerkfehler, Validierungsfehler und Abbruch überstehen. Räumen Sie Registrierungen beim Routenwechsel auf und testen Sie Tastaturbedienung, Labels, Lade-, Fehler- und Erfolgszustände.

Von Anleitung zu Verifizierung

Nutzen Sie den Generator für ein Schema, den Validator für statische Checks und den Simulator für Aufgaben-Mapping. Vor „Verifiziert“ ist ein kontrollierter Browser-Test nötig. Bei Daten, Geld oder Identität hilft der Implementierungsservice.

Hinweise zur konkreten Plattform

In React sollten Schema und Registrierungsregeln außerhalb flüchtigen Component-States stabil bleiben. Registrieren Sie im Client-Lifecycle, vermeiden Sie doppelte Namen nach Navigation und nutzen Sie dieselbe validierte Aktion wie das Formular. Ladezustand und Abbruch bleiben für Menschen sichtbar; Cleanup verhindert alte Handler nach dem Unmount.

Praktischer Testfall

Definieren Sie einen reproduzierbaren Test: Ein Nutzer verlangt ein Read-only-Ergebnis, der Agent sendet gültige und ungültige Eingaben, die Seite zeigt Ladezustand, der Server autorisiert und Menschen können ohne WebMCP fortfahren. Wiederholen Sie den Test mit einer Folgen-Aktion und prüfen Sie, dass der Commit bis zur Bestätigung blockiert bleibt. Dokumentieren Sie Ergebnis, Fehlertext und Cleanup für react.

Umsetzung verbinden

Nutzen Sie Autopilot zur Priorisierung sowie Generator, Validator und Simulator. Der Implementierungsservice prüft die Produktionsgrenze.

Details für den Betrieb

Halten Sie die WebMCP-Registrierung nahe an der zuständigen Funktion, aber die Geschäftsregeln im bestehenden Service-Layer. Ein guter React-Test umfasst frisches Mounting, Routenwechsel, ein zweites Mounting im Development und Unmount während einer offenen Anfrage. Prüfen Sie, dass das Tool beim Verlassen der Seite verschwindet oder ersetzt wird und das sichtbare Formular für Menschen maßgeblich bleibt. Prüfen Sie außerdem, ob der Handler bei einem abgebrochenen Request keine veralteten Daten in den State schreibt. Schema-Version, Tool-Name und UI-Feldnamen sollten gemeinsam dokumentiert und bei Änderungen als Regressionstest abgedeckt werden.