WebMCP Next.js

Einen Workflow wählen

Next.js-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 Next.js-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 Next.js-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 Next.js werden Erklärung, Metadata und Formular serverseitig gerendert; die Registrierung liegt in einer Client Component. document.modelContext darf nicht während SSR aufgerufen werden. Testen Sie Hydration, Streaming, Route-Wechsel und Caching. Autorisierung, Preise und Secrets bleiben im Server-Teil.

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 nextjs.

Umsetzung verbinden

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

Details für den Betrieb

Trennen Sie in der Prüfung drei Ebenen: serverseitig gerenderte Erklärung, clientseitige Tool-Registrierung und serverseitige Autorisierung. Eine Seite kann lesbar und indexierbar bleiben, auch wenn die Browser-Funktion fehlt. Testen Sie Hard Reload, Hydration, Zurück/Vorwärts und eine fehlgeschlagene Serverantwort. Der Fallback muss denselben Workflow ermöglichen und darf kein totes WebMCP-Steuerelement zeigen. Legen Sie außerdem fest, ob die Seite statisch, dynamisch oder personalisiert ausgeliefert wird. Personalisierte Daten dürfen nicht in vorgerenderten Antworten oder öffentlichen Tool-Beschreibungen landen. Ein fehlendes Browser-Feature muss eine verständliche Alternative anbieten. Versionieren Sie Änderungen am Vertrag und testen Sie jede Route separat.