So integrieren Sie WebMCP in Ihre Next.js-App

KI-Agenten haben oft Schwierigkeiten, Web-Apps zu verstehen. Sie scrapen das DOM und raten, was Buttons bewirken. Dies führt zu Fehlern und Halluzinationen.

WebMCP löst dieses Problem. Es ist ein W3C-Standard, der Browsern eine modelContext API hinzufügt. Anstatt zu raten, teilt Ihre Next.js-App dem Agenten genau mit, welche Funktionen er ausführen kann.

WebMCP vs. Anthropic MCP

Anthropic MCP läuft auf dem Server. Es nutzt JSON-RPC, um eine Verbindung zu Datenbanken oder APIs herzustellen. Es existiert außerhalb des Browsers.

WebMCP läuft im Browser-Tab. Es registriert Tools lokal. Es nutzt die bestehende Sitzung des Benutzers. Es ist keine zusätzliche Authentifizierung oder ein Backend erforderlich.

Sie arbeiten zusammen. Sie können MCP für Backend-Aufgaben und WebMCP für Frontend-Interaktionen verwenden.

Zwei Wege, um Tools bereitzustellen:

  • HTML-Formulare: Fügen Sie Ihren Formularen die Attribute toolname und tooldescription hinzu. Der Agent sieht das Tool und die Parameter ohne jegliches JavaScript. Verwenden Sie dies für Suchen und Filter.

  • JavaScript: Verwenden Sie die navigator.modelContext API für dynamische Logik. Dies eignet sich am besten für mehrstufige Abläufe.

Implementierung in Next.js

  1. Installieren Sie das Polyfill für die Browser-Unterstützung: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Erstellen Sie einen WebMCPProvider, um das Polyfill in Ihrem Layout zu initialisieren.

  3. Verwenden Sie den useWebMCP-Hook in Ihren Client-Komponenten. Dieser Hook übernimmt die Tool-Registrierung und das Cleanup automatisch.

Beispiel für ein Tool-Setup:

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

Best Practices

  • Verwenden Sie HTTPS. WebMCP erfordert in der Produktion eine sichere Verbindung.
  • Halten Sie die Anzahl der Tools gering. Zu viele Tools blähen den KI-Kontext auf und verlangsamen das Reasoning. Bleiben Sie unter 50 Tools pro Seite.
  • Bieten Sie aussagekräftige Beschreibungen. Agenten verlassen sich auf diese Strings, um zu verstehen, wann ein Tool verwendet werden soll.
  • Verwenden Sie eine Service-Schicht. Verlassen Sie sich nicht auf den React-State innerhalb der Tool-Handler. Verwenden Sie einfache Funktionen, um veraltete Daten (stale data) zu vermeiden.

Testen

Öffnen Sie Chrome 146 oder neuer. Aktivieren Sie das WebMCP-Flag unter chrome://flags. Verwenden Sie die "Model Context Tool Inspector"-Extension, um Ihre Tools ohne einen KI-Agenten zu testen.

WebMCP ist die Zukunft des agentischen Web-Browsings. Beginnen Sie jetzt mit der Implementierung, damit Sie bereit sind, wenn Browser es standardmäßig aktivieren.

Quelle: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp