AI
News
MCP
Web
Dev
ChatGPT
WebMCP

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026)

WebMCP or a ChatGPT plugin? Compare both, see what each takes to build, and ship a tested React + TypeScript shop where AI agents fill the cart.

TechChase Team

Sep 23, 202624 min read

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026)

Picture this: you ask an AI agent to "put two packs of Sichuan pepper and some udon in my cart". What happens today is painful to watch. The agent takes a screenshot, guesses which button is "Add to cart", clicks it, and takes another screenshot to see whether it worked. It is slow, it breaks whenever the layout changes, and it has no idea the garam masala is out of stock until the error toast appears.

Think of it like a shop with no staff. The agent wanders the aisles reading shelf labels. WebMCP opens a service counter instead: the website registers a small set of typed tools, such as search_products or add_to_cart, and the agent simply asks for what it needs. The tool runs inside the page, with your signed-in session, and the visible UI updates at the same time.

💬 Stop making agents guess your UI. Hand them the tools.

2026 is the year this became real. Google started an origin trial in Chrome, and OpenAI shipped WebMCP support in the ChatGPT desktop app, which now also contains Codex. In this post you get both launches, a clear answer to which "WebMCP" repository is the official one, a side-by-side of WebMCP vs. ChatGPT plugins (and what each takes to build), a sober look at whether OpenAI's Agentic Commerce Protocol (ACP) is dead, and a tested React + TypeScript example: a shop where an agent puts Sichuan pepper and udon noodles into the cart.

🧩 What WebMCP Is, and What It Is Not

WebMCP adds one browser API, document.modelContext. A page registers tools with it:

await document.modelContext?.

NEXT STAGE

Keep reading

More articles on AI, automation and software engineering from the TechChase team.

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026) | TechChase | TechChase

Back to all articles

AI
News
MCP
Web
Dev
ChatGPT
WebMCP

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026)

WebMCP or a ChatGPT plugin? Compare both, see what each takes to build, and ship a tested React + TypeScript shop where AI agents fill the cart.

TechChase Team

Sep 23, 202624 min read

💬 Stop making agents guess your UI. Hand them the tools.

🧩 What WebMCP Is, and What It Is Not

WebMCP adds one browser API, document.modelContext. A page registers tools with it:

await document.modelContext?.

NEXT STAGE

Keep reading

More articles on AI, automation and software engineering from the TechChase team.

	MCP	WebMCP
Who owns the tool	An MCP server	The open web page
Context	Server, API, data source	Current page state and the user's session
Lifetime	Independent of any tab	Only while the page is open
Auth	OAuth / server credentials	The session the user is already signed in with
Typical job	Headless integrations, background work	User-present tasks in the live UI
Maturity	Established protocol (now stateless)	Experimental Community Group draft

Project	Who is behind it	Status
webmachinelearning/webmcp	W3C Web Machine Learning Community Group. The explainer was written by engineers from Microsoft and Google, and the spec is now driven mainly by Dominic Farolino	The official proposal. Explainer, spec draft, implementation status. A Draft Community Group Report, not a W3C Standards Track document
webmachinelearning/webmcp-types	Same org	Official TypeScript types (`npm i -D webmcp-types`)
GoogleChromeLabs/use-webmcp-tool	Chrome team	React hook, "maintained by Chrome, and will be updated with any spec changes". Zero runtime dependencies
GoogleChromeLabs/webmcp-tools	Chrome team	Demos (pizza maker, React flight search, declarative bistro) and the inspector extension
agentcathq/webmcp-react	AgentCat (community, MIT)	Spec-aligned React hooks with Zod schemas, a polyfill, SSR/StrictMode safety and a bridge extension for Claude Code and Cursor. Good, but third-party
MCP-B (`@mcp-b/*`, `usewebmcp`, GitHub `WebMCP-org`)	Community project that grew out of Alex Nahas' original MiguelsPizza/WebMCP	Prior art that the official explainer credits. It adds MCP extras the spec does not have: prompts, resources, transports, desktop relays. Its own docs say its "strict core" is "not a second definition of the WebMCP proposal"
kn8.ai blog	A storefront-agent vendor	Solid articles (guide, WebMCP vs. MCP), not a repository. kn8 states that its own product is not built on WebMCP

// src/shop/types.ts
export type Category = "spice" | "noodle";

export interface Product {
  id: string;
  name: string;
  category: Category;
  priceCents: number;
  unit: string;
  inStock: number;
}

export interface CartLine {
  productId: string;
  name: string;
  quantity: number;
  lineTotalCents: number;
}

export interface Cart {
  lines: CartLine[];
  totalCents: number;
}

// src/shop/cartStore.ts
import { useSyncExternalStore } from "react";
import type { Cart } from "./types";

let cart: Cart = { lines: [], totalCents: 0 };
const listeners = new Set<() => void>();

export const cartStore = {
  get: (): Cart => cart,

  subscribe(listener: () => void): () => void {
    listeners.add(listener);
    return () => {
      listeners.delete(listener);
    };
  },

  async addItem(productId: string, quantity: number, signal?: AbortSignal): Promise<Cart> {
    const res = await fetch("/api/cart/items", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify({ productId, quantity }),
      signal,
    });
    if (!res.ok) {
      throw new Error((await res.text()) || `Cart API answered ${res.status}`);
    }
    cart = (await res.json()) as Cart;
    listeners.forEach((notify) => notify());
    return cart;
  },
};

export function useCart(): Cart {
  return useSyncExternalStore(cartStore.subscribe, cartStore.get);
}

tsx

// src/shop/ShopTools.tsx
import { 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;
}

tsx

// src/shop/ShopPage.tsx
import { ShopTools } from "./ShopTools";
import { cartStore, useCart } from "./cartStore";
import type { Product } from "./types";

export function ShopPage({ products }: { products: Product[] }) {
  const cart = useCart();
  const itemCount = cart.lines.reduce((n, l) => n + l.quantity, 0);

  return (
    <main>
      <ShopTools products={products} onCheckout={() => window.location.assign("/checkout")} />

      <header>🛒 {itemCount} items</header>

      <ul>
        {products.map((p) => (
          <li key={p.id}>
            {p.name} · {p.unit}
            <button onClick={() => cartStore.addItem(p.id, 1)} disabled={p.inStock === 0}>
              Add to cart
            </button>
          </li>
        ))}
      </ul>
    </main>
  );
}

Call	Result
`add_to_cart` Sichuan pepper × 2	✅ cart `12,98 €`
`add_to_cart` udon	✅ cart `16,47 €`, header shows "🛒 3 items"
`add_to_cart` with `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`

	ACP	WebMCP
Where it runs	Your backend: new HTTP endpoints	Your frontend: the page you already have
What you build	`POST /checkout_sessions`, `…/{id}`, `…/complete`, `…/cancel`, a product feed, plus delegated payment via your payment provider (`/agentic_commerce/delegate_payment`)	A few `registerTool` calls that reuse your existing JavaScript
Who renders the checkout	The agent (for example ChatGPT)	Your own UI, which the user watches live
Auth and session	Agent-to-merchant auth plus payment tokens	The session the user is already signed in with
Discovery	Product feed: agents find you without a visit	None: the user or agent has to open your page
Human present?	Not necessarily	Yes, by design
Governance	OpenAI + Stripe (+ Meta), beta	W3C Community Group draft, origin trials in Chrome and Edge

	WebMCP / site tools	ChatGPT plugin (2026)
What it is	A browser API (`document.modelContext`)	An installable package: `plugin.json` + `skills/` + optional `mcp.json`
Where the tools run	In your open page, in the user's tab	On your server, as a remote MCP endpoint (streamable HTTP)
Needs an open page?	Yes, tools vanish when the user navigates away	No
Auth	The session the user is already signed in with	OAuth 2.1, with authorization enforced in your server on every request
Discovery	None: the agent has to visit your page	The plugin directory shared by ChatGPT and Codex
Distribution	Nothing to publish	ZIP upload and review, or a local/repo marketplace, or a workspace-only publish
Workflow guidance for the model	Tool descriptions only	`SKILL.md` files: tool sequences, decision points, output format
Human present?	Yes, by design	Not necessarily
Where it works	Built-in browser of the ChatGPT desktop app, plus Chrome and Edge	ChatGPT and Codex (the MCP server also works with other MCP clients)
Main limits	Subset of the spec, GPT-5.6 Sol / GPT-6 Sol only, no iframes	One MCP server per plugin, review before tools go live

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026)

🧩 What WebMCP Is, and What It Is Not

Keep reading

WebMCP vs. ChatGPT Plugins: Build a React Shop AI Agents Can Use (2026)

🧩 What WebMCP Is, and What It Is Not

Keep reading

🏷️ Which WebMCP Repository Is Official?

🟢 Google: From Early Preview to Origin Trial

🤖 OpenAI: Site Tools in ChatGPT and Codex, Which Are Now One App

🍜 Example: A Spice and Noodle Shop in React + TypeScript

1. Types

2. One cart path for humans and agents

3. The WebMCP tools

4. The page

What the agent does

We ran it

🧪 Test It Yourself

✅ Checklist Before You Ship

⚖️ WebMCP vs. ACP: Is the Agentic Commerce Protocol Dead?

🔌 WebMCP vs. ChatGPT Plugins: Page Tools or Installable Integration?

🔧 What you need to build each

🧭 Which one do you pick?

🧭 The TechChase Take: WebMCP Is the On-Ramp, ACP Is the Toll Road

⚡ Knowledge Bytes

📚 Sources