WebMCP vs. ChatGPT Plugins: React-Shop, den KI-Agents bedienen (2026)
WebMCP oder ChatGPT-Plugin? Wir vergleichen beide, zeigen den Bauaufwand und bauen einen getesteten React-Shop, in dem KI-Agents den Warenkorb füllen.
TechChase Team
23 Min. Lesezeit
Teilen
Stell dir vor, du bittest einen KI-Agent: „Leg mir zwei Packungen Sichuan-Pfeffer und Udon in den Warenkorb.“ Was dann passiert, ist heute noch schmerzhaft anzusehen. Der Agent macht einen Screenshot, rät, welcher Button „In den Warenkorb“ ist, klickt und prüft mit dem nächsten Screenshot, ob es geklappt hat. Das ist langsam, es bricht bei jeder Layoutänderung, und dass das Garam Masala ausverkauft ist, merkt der Agent erst am Fehler-Toast.
Stell es dir wie einen Laden ohne Personal vor. Der Agent läuft durch die Regale und liest Etiketten. WebMCP macht stattdessen eine Servicetheke auf: Die Website registriert eine kleine Zahl typisierter Tools wie search_products oder add_to_cart, und der Agent fragt einfach nach dem, was er braucht. Das Tool läuft in der Seite, mit deiner angemeldeten Session, und die sichtbare Oberfläche aktualisiert sich gleichzeitig.
💬 Lass Agents nicht dein UI erraten. Gib ihnen die Tools.
2026 ist das Jahr, in dem das Realität wurde. Google hat einen Origin Trial in Chrome gestartet, und OpenAI hat WebMCP in die ChatGPT-Desktop-App gebracht, in der inzwischen auch Codex steckt. In diesem Beitrag bekommst du beide Launches eingeordnet, eine klare Antwort darauf, welches „WebMCP“-Repository das offizielle ist, einen Vergleich WebMCP vs. ChatGPT-Plugins (und was beide im Bau kosten), einen nüchternen Blick auf die Frage, ob OpenAIs Agentic Commerce Protocol (ACP) tot ist, und ein getestetes Beispiel in React und TypeScript: einen Shop, in dem ein Agent Sichuan-Pfeffer und Udon-Nudeln in den Warenkorb legt.
🧩 Was WebMCP ist und was nicht
WebMCP bringt genau eine Browser-API mit: document.modelContext. Eine Seite registriert darüber Tools:
ts
NEXT STAGE
Weiterlesen
Weitere Beiträge zu KI, Automatisierung und Software-Engineering vom TechChase-Team.
await document.modelContext?.registerTool({
name: "get_page_title",
description: "Read the title of the current page.",
Das ist schon die ganze Idee: ein Name, eine Beschreibung in natürlicher Sprache, ein JSON-Schema für die Eingabe und ein execute-Callback, der Code wiederverwendet, den deine Seite ohnehin hat. Abmelden kannst du ein Tool, indem du das AbortSignal abbrichst, das du bei der Registrierung übergeben hast.
Trotz des Namens ist WebMCP kein MCP-Server im Browser. Es übernimmt das Vokabular von MCP (Tools, Schemas, Ergebnisse), aber der Explainer stellt klar, dass es sich um eine web-native API mit Origins, Permissions Policy und einem an das Dokument gebundenen Lebenszyklus handelt. Es ist nicht das Backend-Protokoll.
MCP
WebMCP
Wem das Tool gehört
Einem MCP-Server
Der geöffneten Webseite
Kontext
Server, API, Datenquelle
Aktueller Seitenzustand und Session des Nutzers
Lebensdauer
Unabhängig von jedem Tab
Nur solange die Seite offen ist
Auth
OAuth bzw. Server-Credentials
Die Session, mit der der Nutzer ohnehin angemeldet ist
Eine Website kann beides anbieten: einen MCP-Server für die Integration „alle Bestellungen exportieren“ und WebMCP-Tools für „leg das in den Warenkorb, den ich gerade sehe“.
🧠 Mythos-Check.„WebMCP ist einfach MCP im Browser.“ Nicht ganz: Es teilt das Vokabular von MCP, ist aber eine eigene Web-API mit eigenem Sicherheitsmodell und ersetzt deinen MCP-Server nicht.
🧠 Mythos-Check.„Das heißt navigator.modelContext.“ So hieß es in einem frühen Entwurf. Der aktuelle Entwurf und alle ausgelieferten Implementierungen verwenden document.modelContext. Tutorials, die noch navigator nutzen, sind veraltet.
🏷️ Welches WebMCP-Repository ist offiziell?
Wenn du nach „WebMCP“ suchst, findest du ein halbes Dutzend Projekte mit fast identischen Namen. Die Organisation hinter dem Model Context Protocol veröffentlicht keines davon, und das ist folgerichtig: WebMCP ist kein MCP-Projekt. Die einzige Erwähnung in der GitHub-Organisation modelcontextprotocol steht im Entwurf zu MCP Apps. Dort heißt es, das Feature sei „inspired by WebMCP (W3C incubation)“, und es wird sogar noch der alte Name navigator.modelContext verwendet.
W3C Web Machine Learning Community Group. Den Explainer haben Engineers von Microsoft und Google geschrieben, die Spezifikation treibt inzwischen vor allem Dominic Farolino voran
Der offizielle Vorschlag. Explainer, Spec-Entwurf, Implementierungsstand. Ein Draft Community Group Report, kein Dokument im W3C Standards Track
Spec-konforme React-Hooks mit Zod-Schemas, Polyfill, SSR- und StrictMode-Sicherheit sowie einer Bridge-Extension für Claude Code und Cursor. Gut gemacht, aber ein Drittanbieter-Projekt
Community-Projekt, entstanden aus Alex Nahas' ursprünglichem MiguelsPizza/WebMCP
Prior Art, auf die sich der offizielle Explainer ausdrücklich bezieht. Es ergänzt MCP-Features, die die Spec nicht hat: Prompts, Resources, Transports, Desktop-Relays. Die eigene Doku betont, der „strict core“ sei „not a second definition of the WebMCP proposal“
Solide Artikel (Guide, WebMCP vs. MCP), aber kein Repository. kn8 schreibt selbst, dass das eigene Produkt nicht auf WebMCP basiert
Kurz gesagt: Der Standard lebt in webmachinelearning/webmcp. Alles andere sind Helfer drumherum. Für React kommt Chromes use-webmcp-tool einem „offiziellen“ Hook am nächsten. Chromes eigene Doku nennt außerdem MCP-Bs usewebmcp als React-Option, keine der beiden Community-Bibliotheken ist also eine falsche Wahl. Du solltest nur wissen, dass MCP-B über die Spec hinausgeht und beide Community-Bibliotheken Polyfills mitbringen. Ein Polyfill sorgt dafür, dass document.modelContext existiert, aber das heißt nicht, dass ein Browser-Agent die Tools auch sieht.
🟢 Google: Vom Early Preview zum Origin Trial
13. August 2025. Der WebMCP-Explainer erscheint zum ersten Mal, verfasst von Engineers bei Microsoft und Google.
10. Februar 2026. Chrome startet ein Early Preview mit zwei APIs: imperativ (JavaScript-Tools) und deklarativ (annotierte HTML-Formulare).
19. Mai 2026, Google I/O. WebMCP ist Punkt 1 in Chromes I/O-Rückblick. Google kündigt an: „Gemini in Chrome will soon support WebMCP APIs“, und zeigt Logos von Marken, die bereits experimentieren, darunter Expedia, Booking.com, Shopify, Etsy, Instacart und Target.
9. Juni 2026. Der Origin Trial startet in Chrome 149. Für die lokale Entwicklung aktivierst du chrome://flags/#enable-webmcp-testing.
Seitdem entwickelt Chrome die API schnell weiter. Tools bekommen ein Abbruch-signal (Chrome 153), executeTool nimmt Objekte statt JSON-Strings entgegen (Chrome 155), und es gibt neue Annotations: consequentialHint für irreversible Aktionen und debugging für reine Entwickler-Tools (Chrome 156). Microsoft betreibt einen Origin Trial in Edge 150, und Brave unterstützt WebMCP experimentell in Leo. Für Firefox und Safari gibt es bisher nur offene Anfragen nach einer Standards-Position.
WebMCP funktioniert in Chrome nur in origin-isolierten Dokumenten und wird über die Permissions Policy tools gesteuert. Aktiv ist es für die Top-Level-Seite und Same-Origin-Frames, ein Cross-Origin-iframe braucht allow="tools".
🤖 OpenAI: Site Tools in ChatGPT und Codex, die jetzt eine App sind
Sind ChatGPT und Codex jetzt dieselbe App? Auf dem Desktop ja. Am 9. Juli 2026 hat OpenAI die Codex-App in die neue ChatGPT-Desktop-App integriert, für macOS und Windows. Sie hat drei Modi (Chat, Work und Codex) und einen eingebauten Browser. Codex hat weiterhin einen eigenen Bereich, und Entwickler können ihn als Startansicht festlegen. Die alte Desktop-App heißt jetzt „ChatGPT Classic“, und der eigenständige Atlas-Browser wird eingestellt.
Am 25. August 2026 hat OpenAI WebMCP in diesen eingebauten Browser (und in ChatGPT Sites) gebracht, unter dem Namen Site Tools. Registriert eine Seite Tools, erscheint ein Pfeil in der Adressleiste, und ChatGPT Work und Codex finden und nutzen die Tools selbstständig. OpenAIs Hilfe-Center nennt „einen Warenkorb aktualisieren“ ausdrücklich als Anwendungsfall.
Das Kleingedruckte ist wichtig, wenn du dich darauf verlassen willst:
Site Tools funktionieren nur im eingebauten Browser der ChatGPT-Desktop-App, nicht in Chrome über die ChatGPT-Extension.
Du brauchst GPT-5.6 Sol oder GPT-6 Sol. Für GPT-5.6 Luna ist WebMCP deaktiviert.
In Enterprise-Workspaces muss ein Admin Site Tools per Workspace-Richtlinie erlauben, in Edu-Workspaces sind Site Tools nicht verfügbar.
Unterstützt wird nur ein Teil der Spec: keine deklarativen (Formular-)Tools und keine Tools in iframes. Tools müssen per JavaScript in der Top-Level-Seite registriert werden.
Jeder Aufruf durchläuft vorher eine Sicherheitsprüfung. Käufe, Löschungen, das Senden von Nachrichten und das Teilen persönlicher Daten erfordern immer eine Bestätigung durch den Nutzer, und eine Tool-Beschreibung kann diese Rechte nicht verleihen.
Für einen Shop ist das eine gute Nachricht: Der Agent darf den Warenkorb füllen, und bezahlt wird vom Menschen.
🍜 Beispiel: Ein Gewürz- und Nudel-Shop in React und TypeScript
Das Ziel: Ein Nutzer sagt „Leg mir zwei Packungen Sichuan-Pfeffer und Udon in den Warenkorb“, und der Agent erledigt das über Tools statt über Klicks. Wir verwenden Chromes Hook use-webmcp-tool zusammen mit den offiziellen Typen:
Das ist die wichtigste Designentscheidung. Der Button „In den Warenkorb“ und das Agent-Tool rufen dieselbe Funktion auf. Der Server bleibt die Quelle der Wahrheit für Preis, Bestand und Session, und useSyncExternalStore hält das UI synchron, egal wer den Artikel hinzugefügt hat.
Vier Tools mit je einer Aufgabe: suchen (nur lesend), hinzufügen (verändert Zustand, validiert und verifiziert), Warenkorb lesen (nur lesend) und den Checkout öffnen (nur Navigation, keine Zahlung).
tsx
// src/shop/ShopTools.tsximport { useWebMCP } from "use-webmcp-tool";import { cartStore } from "./cartStore";import type { Cart, Category, Product } from "./types";const eur = (cents: number) => (cents / 100).toLocaleString("de-DE", { style: "currency", currency: "EUR" });const summarize = (cart: Cart) => ({ items: cart.lines.map((l) => `${l.quantity} × ${l.name} (${eur(l.lineTotalCents)})`), total: eur(cart.totalCents),});// Stable module-level schemas: the hook re-registers when the schema changes.const searchSchema = { type: "object", properties: { query: { type: "string", description: "Free text such as 'smoked paprika' or 'udon'. Empty lists everything.", }, category: { type: "string", enum: ["spice", "noodle"], description: "Optional filter: 'spice' or 'noodle'.", }, }, additionalProperties: false,} as const;const addToCartSchema = { type: "object", properties: { productId: { type: "string", description: "Product id from search_products, e.g. 'spice-sichuan-pepper'.", }, quantity: { type: "integer", minimum: 1, maximum: 20, description: "Number of packs to add. Defaults to 1.", }, }, required: ["productId"], additionalProperties: false,} as const;const emptySchema = { type: "object", properties: {}, additionalProperties: false } as const;type SearchArgs = { query?: string; category?: Category };type AddToCartArgs = { productId: string; quantity?: number };export function ShopTools({ products, onCheckout,}: { products: Product[]; onCheckout: () => void;}) { // 1) Read-only: lets the agent map "Sichuan pepper" to a real product id. useWebMCP<SearchArgs>({ name: "search_products", description: "Search the spice and noodle catalog shown on this page. " + "Returns id, name, price, pack size and stock for each match.", inputSchema: searchSchema, annotations: { readOnlyHint: true }, execute: ({ query = "", category }) => { const q = query.trim().toLowerCase(); return products .filter((p) => !category || p.category === category) .filter((p) => !q || p.name.toLowerCase().includes(q)) .map((p) => ({ id: p.id, name: p.name, price: eur(p.priceCents), unit: p.unit, inStock: p.inStock, })); }, }); // 2) State-changing: same code path as the button, validated and verified. useWebMCP<AddToCartArgs>({ name: "add_to_cart", description: "Add a product from this shop to the signed-in user's cart. " + "Does not place an order. Returns the updated cart.", inputSchema: addToCartSchema, annotations: { readOnlyHint: false }, enabled: products.length > 0, // Chrome < 153 calls execute(args) without the options object. execute: async ({ productId, quantity = 1 }, options) => { // Validate strictly in code, loosely in the schema. const product = products.find((p) => p.id === productId); if (!product) { throw new Error(`Unknown productId "${productId}". Call search_products and use an id from its result.`); } if (!Number.isInteger(quantity) || quantity < 1 || quantity > 20) { throw new Error("quantity must be a whole number between 1 and 20."); } if (quantity > product.inStock) { throw new Error(`Only ${product.inStock} × ${product.name} in stock. Ask the user how to proceed.`); } const qtyOf = (cart: Cart) => cart.lines.find((l) => l.productId === productId)?.quantity ?? 0; const before = qtyOf(cartStore.get()); const cart = await cartStore.addItem(productId, quantity, options?.signal); // Post-action check: never report success the cart does not show. if (qtyOf(cart) !== before + quantity) { throw new Error(`Cart shows ${qtyOf(cart)} × ${product.name}, expected ${before + quantity}.`); } return { added: `${quantity} × ${product.name}`, cart: summarize(cart) }; }, }); // 3) Read-only: lets the agent confirm the result with the user. useWebMCP({ name: "get_cart", description: "Return the items and total of the user's current cart.", inputSchema: emptySchema, annotations: { readOnlyHint: true }, execute: () => summarize(cartStore.get()), }); // 4) Hand-off: navigates to checkout. Paying stays with the human. useWebMCP({ name: "go_to_checkout", description: "Open the checkout page so the user can review and pay. " + "Does not submit payment or place the order.", inputSchema: emptySchema, execute: () => { onCheckout(); return "Checkout opened. The user reviews and pays there."; }, }); return null;}
Ein paar Details sind bewusst so gewählt:
Fehlermeldungen sagen dem Agent, was er als Nächstes tun soll. Mit Unknown productId ... Call search_products kann sich das Modell selbst korrigieren, statt hängen zu bleiben. Der Hook macht aus jedem geworfenen Fehler ein isError-Ergebnis, ein Fehler sieht also nie wie ein Erfolg aus.
Das Tool liest den Warenkorb nach der Änderung erneut. Zeigt der Server eine andere Menge als erwartet, schlägt das Tool fehl, statt Erfolg zu melden.
Es gibt kein place_order-Tool. Falls du eines anbietest, markiere es mit consequentialHint: true, damit Chrome und ChatGPT eine Bestätigung verlangen können. Die Übergabe an die Checkout-Seite ist der bessere Standard.
Die Tools folgen dem Lebenszyklus der Komponente. Sie werden beim Mount registriert und beim Unmount abgemeldet. enabled hält add_to_cart verborgen, bis die Produkte geladen sind, sodass der Agent nur sieht, was die Seite gerade wirklich kann.
„Erledigt: 2 × Sichuan-Pfeffer und 1 × Udon-Nudeln, zusammen 16,47 €. Soll ich den Checkout öffnen?“
Wir haben es ausgeführt
Wir haben den Code nicht nur geschrieben, sondern auch ausgeführt. Das Beispiel besteht tsc --strict und einen Vite-Build. Danach haben wir es in einem Chromium-150-Build geladen, der document.modelContext nativ bereitstellt, und die Tools über die echte executeTool-API aufgerufen, mit einem gemockten Warenkorb-Endpoint:
Aufruf
Ergebnis
add_to_cart Sichuan-Pfeffer × 2
✅ Warenkorb 12,98 €
add_to_cart Udon
✅ Warenkorb 16,47 €, Header zeigt „🛒 3 items“
add_to_cart mit productId: "sichuan"
❌ Unknown productId … Call search_products
add_to_cart Garam Masala
❌ Only 0 × Garam Masala in stock
add_to_cart Soba × 50
❌ quantity must be a whole number between 1 and 20
Dabei sind drei Stolperfallen aufgefallen, die in den meisten Tutorials fehlen:
Chrome vor Version 153 ruft execute(args) ohne zweites Argument auf. Wenn du async (args, { signal }) schreibst, bekommst du dort den Absturz „Cannot destructure property 'signal' of undefined“. Nutze deshalb options?.signal.
Chrome vor Version 155 erwartet die Eingabe für executeTool als JSON-String, ein Objekt scheitert mit „Failed to parse input arguments“. Das ist relevant, wenn du einen eigenen Agent oder eigene Tests schreibst.
Chrome setzt das Input-Schema nicht durch. Der Aufruf mit quantity: 50 kam in unserem Handler an, obwohl das Schema maximum: 20 vorgibt. Das Schema ist nur ein Hinweis an das Modell, die eigentliche Validierung gehört in execute.
🧪 Selbst ausprobieren
Chrome:chrome://flags/#enable-webmcp-testing aktivieren und den Model Context Tool Inspector installieren. Er listet die registrierten Tools, ruft sie manuell auf und lässt einen Agent (Gemini) mit ihnen arbeiten.
ChatGPT und Codex: Die Seite im eingebauten Browser der ChatGPT-Desktop-App öffnen, den Site-Tools-Pfeil in der Adressleiste prüfen und Codex oder Work bitten, den Warenkorb zu füllen.
Claude Code, Cursor und andere MCP-Clients: Diese Clients können document.modelContext nicht direkt lesen. Die WebMCP-Bridge-Extension von webmcp-react stellt ihnen die Tools der Seite als MCP-Server bereit.
✅ Checkliste vor dem Livegang
Wenige Tools anbieten. Jedes Tool verbraucht Kontext des Modells, und überlappende Tools verwirren es. Tools nur dort registrieren, wo die Seite sie auch unterstützt.
Ehrliche Annotations setzen.readOnlyHint für lesende Tools, consequentialHint für alles Irreversible und untrustedContentHint, wenn nutzergenerierte Inhalte wie Bewertungen zurückkommen.
Serverseitige Autorisierung beibehalten. WebMCP läuft mit der Session des Nutzers, kann also genau das, was der Nutzer kann, und nicht mehr.
Einen gemeinsamen Code-Pfad nutzen. Tool und Button rufen dieselbe Funktion auf, und das UI aktualisiert sich sichtbar.
Tool-Ausgaben als nicht vertrauenswürdig behandeln. OpenAI und Chrome warnen beide vor Prompt Injection über Tool-Beschreibungen und Ergebnisse. Ein Tool darf den Agent nie zu etwas anweisen, das über seine Aufgabe hinausgeht.
Als Progressive Enhancement bauen. Ohne WebMCP muss der Shop genauso funktionieren wie vorher, der Hook registriert dann einfach nichts.
⚖️ WebMCP vs. ACP: Ist das Agentic Commerce Protocol tot?
Wenn du im E-Commerce arbeitest, kennst du wahrscheinlich das andere Kürzel: ACP, das Agentic Commerce Protocol, das OpenAI und Stripe am 29. September 2025 zusammen mit Instant Checkout in ChatGPT gestartet haben. Ist WebMCP also sein Nachfolger? Und lebt ACP überhaupt noch?
Kurze Antwort: ACP ist nicht tot, aber sein Vorzeige-Feature schon. Das ist passiert:
März 2026. OpenAI hat sich von Instant Checkout verabschiedet. Laut OpenAI bot die erste Version „nicht die Flexibilität, die wir anstreben“, deshalb dürfen Händler nun ihren eigenen Checkout nutzen, während sich OpenAI auf die Produktsuche konzentriert. Analysten nannten die Gründe: Onboarding der Händler, veraltete Produktdaten, Warenkörbe mit mehreren Artikeln und Treueprogramme. Laut Shopifys Präsident waren nur rund ein Dutzend Shopify-Händler überhaupt live gegangen.
17. April 2026. ACP hat trotzdem sein bisher größtes Spec-Release veröffentlicht: Warenkorb, Produkt-Feed, Bestellungen, Authentifizierung und ein MCP-Binding.
24. April 2026. Stripe, Amazon, Meta, Microsoft und Salesforce sind dem Tech Council des konkurrierenden Universal Commerce Protocol (UCP) von Google und Shopify beigetreten. Stripe hat ACP nicht verlassen, sitzt jetzt aber an beiden Tischen.
Heute. Das ACP-Repository steht weiterhin auf Beta und wird von OpenAI und Stripe gepflegt. Meta ist dem Steering Committee beigetreten, und Fixes kamen noch im September 2026 dazu. Die letzte gemergte Protokolländerung (ein SEP) stammt aber aus dem Juli, und seit April gab es keine neue Spec-Version. ACP lebt, nur langsamer und schmaler. Es treibt heute vor allem Produkt-Feeds und Händler-Apps in ChatGPT an, keinen universellen „Kauf alles“-Button.
Der wichtigere Punkt: WebMCP und ACP konkurrieren nicht um dieselbe Schicht.
ACP
WebMCP
Wo es läuft
In deinem Backend: neue HTTP-Endpoints
In deinem Frontend: die Seite, die du schon hast
Was du baust
POST /checkout_sessions, …/{id}, …/complete, …/cancel, einen Produkt-Feed plus Delegated Payment über deinen Payment-Provider (/agentic_commerce/delegate_payment)
Ein paar registerTool-Aufrufe, die dein vorhandenes JavaScript wiederverwenden
Wer den Checkout rendert
Der Agent (zum Beispiel ChatGPT)
Dein eigenes UI, das der Nutzer live sieht
Auth und Session
Agent-zu-Händler-Auth plus Payment-Tokens
Die Session, mit der der Nutzer ohnehin angemeldet ist
Auffindbarkeit
Produkt-Feed: Agents finden dich ohne Besuch
Keine: Nutzer oder Agent muss deine Seite öffnen
Mensch dabei?
Nicht zwingend
Ja, per Design
Governance
OpenAI + Stripe (+ Meta), Beta
Entwurf einer W3C Community Group, Origin Trials in Chrome und Edge
ACP beantwortet die Frage „Wie kauft ein Agent bei mir, ohne je meine Seite zu öffnen?“ WebMCP beantwortet „Wie nutzt ein Agent meine Seite richtig, wenn er schon da ist?“ Der Kurswechsel im März sagt viel: Der Markt ist zurück zu „Der Händler besitzt den Checkout“ gegangen, und genau von diesem Modell geht WebMCP von Anfang an aus.
🔌 WebMCP vs. ChatGPT-Plugins: Seiten-Tools oder installierbare Integration?
Die nächste Frage, die wir hören: „ChatGPT hat doch schon Plugins. Wozu WebMCP?“ Weil sie unterschiedliche Probleme lösen, und OpenAIs eigene Doku sagt das auch: Ein Plugin mit MCP-Server „can provide an integration that works independently of an open page. A website can support both.“
Die Analogie: WebMCP ist der Servicetresen in deinem Laden, für Kundschaft, die schon drinsteht. Ein ChatGPT-Plugin ist die Lieferhotline: Jeder in ChatGPT oder Codex kann dort anrufen, ohne je deinen Laden zu betreten.
🧠 Mythos-Check.„ChatGPT-Plugins sind das Ding von 2023 mit ai-plugin.json und OpenAPI.“ Dieses System wurde im April 2024 eingestellt. Die heutigen Plugins sind ein neues, anderes Format: ein Paket mit plugin.json-Manifest, optionalen Skills und einem optionalen Remote-MCP-Server, das ChatGPT und Codex gemeinsam nutzen.
WebMCP / Site Tools
ChatGPT-Plugin (2026)
Was es ist
Eine Browser-API (document.modelContext)
Ein installierbares Paket: plugin.json + skills/ + optional mcp.json
Wo die Tools laufen
In deiner offenen Seite, im Tab des Nutzers
Auf deinem Server, als Remote-MCP-Endpoint (Streamable HTTP)
Offene Seite nötig?
Ja, die Tools verschwinden beim Wegnavigieren
Nein
Auth
Die Session, mit der der Nutzer schon angemeldet ist
OAuth 2.1, Autorisierung bei jeder Anfrage in deinem Server
Auffindbarkeit
Keine: Der Agent muss deine Seite besuchen
Das Plugin-Verzeichnis, das ChatGPT und Codex teilen
Distribution
Nichts zu veröffentlichen
ZIP-Upload und Review, oder lokaler/Repo-Marketplace, oder nur im Workspace veröffentlichen
Ein MCP-Server mit dem TypeScript-SDK (@modelcontextprotocol/sdk) oder dem Python-Paket mcp, mit Schemas und ehrlichen Annotations (readOnlyHint, destructiveHint, openWorldHint).
Ein öffentlicher HTTPS-Endpoint, typischerweise /mcp, mit Logs, Rate Limits und einem Verfügbarkeitskonzept.
OAuth 2.1 und serverseitige Autorisierung für alles, was private Daten berührt.
Domain-Verifizierung: ein Token, das unter /.well-known/openai-apps-challenge ausgeliefert wird.
Eine plugin.json mit Name, Version, Icons, Datenschutz- und AGB-URLs und einer Kategorie. Skills sind optional, aber so bringst du dem Modell deinen Workflow bei.
Eine verifizierte Entwickleridentität auf der OpenAI-Plattform.
Review-Material: 5 positive und 3 negative Testfälle, ein Video-Walkthrough, ein Reviewer-Testaccount ohne MFA und Release Notes.
Für unseren Gewürzshop heißt das: eine nutzerbezogene Warenkorb-API hinter OAuth, damit das Plugin Sichuan-Pfeffer ohne Browser-Tab hinzufügen kann. Bei WebMCP existiert die Warenkorb-Funktion schon, und die angemeldete Session reicht. Das ist der ganze Unterschied im Aufwand.
Ein paar Plugin-Details gehen leicht unter:
Nach der Veröffentlichung scannt OpenAI deinen gehosteten MCP-Server täglich neu. Geänderte Tools können zurückgehalten werden, und neue Tools bleiben bis zur Freigabe nicht verfügbar.
Aus MCP importierte Skills sind Snapshots. Eine Änderung bedeutet eine neue Einreichung.
Plugin-ZIPs mit apps/.app.json oder Lifecycle-Hooks lassen sich öffentlich noch nicht einreichen.
Den Store kannst du auch umgehen. Ein Repo-Marketplace (.agents/plugins/marketplace.json) oder eine Veröffentlichung nur im Workspace bringt ein Plugin ohne öffentliches Review zu deinem Team.
🧭 Welches nimmst du?
WebMCP, wenn der Nutzer auf deiner Seite ist und der Agent in derselben Live-Oberfläche arbeiten soll: Warenkörbe, Editoren, Dashboards, Reiseplaner.
Ein Plugin, wenn die Aufgabe ohne offenen Tab funktionieren muss („alle Bestellungen exportieren“, „Bestand prüfen“, „Ticket anlegen“) oder wenn du in ChatGPT und Codex gefunden werden willst.
Beides, wenn du ein echtes Produkt betreibst. Tools, die die Live-Oberfläche brauchen, kommen in WebMCP, die Headless-Tools in einen MCP-Server, den du in ein Plugin packst.
🧭 Die TechChase-Einschätzung: WebMCP ist die Auffahrt, ACP die Mautstraße
Unser persönlicher Kommentar: „Wir finden, WebMCP ist der einfachste Einstieg in Agentic Commerce, den ein Shop je hatte.“ Du brauchst kein neues Backend, keine Feed-Pipeline, keine Payment-Provider-Integration und kein Partnerschaftsmeeting mit einem KI-Labor. Du brauchst einen Nachmittag und die Warenkorb-Funktion, die du schon hast. Unser Shop-Beispiel besteht aus vier Tools, und keines davon hat einen einzigen neuen Server-Endpoint gebraucht.
Deshalb erwarten wir auch, dass sich WebMCP schneller durchsetzt als ACP:
Der Aufwand ist winzig. Mit ACP baust und betreibst du einen zweiten Checkout-Pfad neben deinem bestehenden. Mit WebMCP ist dein bestehender Checkout der Pfad.
Nichts Neues wird exponiert. Jedes Tool läuft mit der Session und den Rechten des Nutzers. Es gibt keine neuen API-Credentials, die du ausgeben, rotieren oder verlieren kannst.
Es scheitert sicher. Unterstützt ein Browser kein WebMCP, funktioniert dein Shop einfach wie vorher. Fällt ACP aus, ist ein Verkaufskanal dunkel.
Vertrauen bleibt sichtbar. Die Kundschaft sieht, wie sich der Warenkorb in deinem UI füllt, mit deiner Marke, deinen Preisen und Upsells. Genau das hat Walmart gefehlt, als der In-Chat-Checkout laut Walmart nur ein Drittel der Conversion der Weiterleitung auf die eigene Website erreichte.
Wo ACP (oder UCP) weiterhin gewinnt: Auffindbarkeit und vollständig delegierte Käufe. WebMCP-Tools existieren nur, solange deine Seite in einem Browser offen ist. Ein Agent findet sie nicht, ohne deine URL zu kennen, und ein Terminal-Agent wie Claude Code sieht sie überhaupt nicht, solange ihm nicht etwas die Seite öffnet (eine Bridge-Extension oder ein Browser, den er steuert). Technisch könnte ein Agent mit einem Headless-Browser und einer angemeldeten Session zwar um 3 Uhr nachts Kaffee über deine Tools nachbestellen. Das bleibt aber Browser-Automatisierung, nur mit besseren Griffen: keine Payment-Tokens, keine Ausgabelimits und für dich als Händler keine Möglichkeit, einen autorisierten Agent von einem Skript zu unterscheiden. Genau dafür ist das Delegated Payment von ACP gebaut.
Unsere Empfehlung für die meisten Shops: Starte jetzt mit WebMCP auf Produkt- und Warenkorbseiten, und ergänze einen Produkt-Feed (ACP oder UCP), sobald Agent-Traffic tatsächlich in deinen Analytics auftaucht. Protokolle kommen und gehen, aber vier gut gebaute Tools auf deiner eigenen Warenkorb-Logik überleben jedes Commerce-Protokoll, das am Ende gewinnt.
Wenn ChatGPT und Codex deinen Shop ohne offenen Tab erreichen sollen, setz ein Plugin obendrauf. Verpack einen nutzerbezogenen MCP-Server in ein Plugin, sobald Agent-Traffic den Aufwand für OAuth, Review und Hosting rechtfertigt. Deine WebMCP-Tools und deine MCP-Tools können darunter dieselbe Warenkorb-Funktion aufrufen.
⚡ Knowledge Bytes
🧩 Mit WebMCP registriert eine Seite typisierte Tools auf document.modelContext, sodass Agents Funktionen aufrufen statt durchs UI zu klicken.
🏷️ Der offizielle Vorschlag liegt in webmachinelearning/webmcp; für React kommen Chromes use-webmcp-tool und die offiziellen webmcp-types einem offiziellen Setup am nächsten.
🟢 Chrome 149 und Edge 150 haben WebMCP-Origin-Trials, und Gemini in Chrome soll WebMCP bald unterstützen.
🤖 ChatGPT und Codex teilen sich jetzt eine Desktop-App, deren eingebauter Browser WebMCP „Site Tools“ nennt.
🛡️ Das Input-Schema ist nur ein Hinweis: Validiere in execute, prüfe das Ergebnis nach der Aktion und überlass die Zahlung dem Menschen.
⚖️ ACP lebt, ist nach dem Aus für Instant Checkout aber schmaler; es deckt Auffindbarkeit und Backend-Checkout ab, WebMCP die Live-Seite.
🔌 Ein ChatGPT-Plugin ist ein serverseitiges Paket (Skills plus Remote-MCP-Server, OAuth, Review); WebMCP ist seitenseitiger Code, der die Session des Nutzers wiederverwendet. Nimm WebMCP für die Live-Oberfläche, ein Plugin für Headless-Reichweite oder beides.
🚀 WebMCP ist der günstigste Einstieg in Agentic Commerce: vier Tools auf der Warenkorb-Funktion, die du schon hast.
