WebMCP Demystified: Making Your Website Agent-Ready for E-Commerce and CMS

AI agents are becoming a real part of how people interact with the web. They search for products, fill out forms, book appointments, and complete purchases, all by browsing websites on your behalf. But there's a fundamental problem: websites are built for humans, not machines.

An AI agent looking at your e-commerce site sees a jumble of divs, buttons, and forms. It has to guess what each element does, which leads to slow, error-prone interactions. WebMCP solves this by letting you tell agents exactly what your website can do, in a language they understand.

WebMCP is a new browser standard (currently in origin trial, Chrome 149+) that lets you expose your website's functionality as structured "tools" for AI agents. No backend changes, no separate APIs. Just your existing website, made agent-friendly.

In this article, we explain what WebMCP is, what it enables for e-commerce and CMS sites, and how you can start using it, whether you're a developer or a website owner.

What Is WebMCP?

WebMCP (Web Model Context Protocol) is a proposed W3C standard that provides two complementary APIs for registering tools on a web page:

• The Imperative API: JavaScript-based tool registration via document.modelContext.registerTool()
• The Declarative API: HTML attribute annotations on existing <form> elements (toolname, tooldescription, toolparamdescription)

Both APIs serve the same purpose: they make your website's capabilities discoverable and executable by AI agents running in the browser (Chrome's built-in agent, browser extensions, or other agent platforms).

How It Works

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

The key difference from traditional backend integrations (like MCP servers) is that WebMCP tools run inside the browser tab, on the page the user is already viewing. The agent acts on the live DOM, in the user's session, with full access to cookies, authentication state, and real-time data.

What WebMCP Enables for E-Commerce

Search and Product Discovery

Instead of an agent scrolling through hundreds of product pages trying to find what matches a user's request, a well-defined search_products tool lets the agent query your catalog directly:

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

A user can then say: "Find me organic baby food under €5 for my 1-year-old", and the agent calls your tool directly, returning structured results your UI already knows how to display.

Checkout and Purchase Flows

WebMCP tools can guide agents through complex checkout journeys:

This is especially valuable for repeat purchases. A user asking "Reorder the coffee beans I bought last month" can be handled by a get_order_history() tool that returns past orders, followed by add_to_cart() and submit_order().

Customer Support

Complex support flows (warranty claims, returns, exchanges) often require navigating multiple pages and forms. WebMCP tools can:

• Navigate to the correct support page (start_claim_process())
• Pre-fill known fields (populate_product_details())
• Submit the completed form (submit_claim())

The user sees the form being filled in real-time on their screen, maintaining trust and visibility.

What WebMCP Enables for CMS

Content Search and Retrieval

A CMS-powered site can expose search and filtering as tools:

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Form-Based Interactions

CMS sites often have contact forms, newsletter signups, event registrations, and booking systems. The Declarative API lets you turn these into WebMCP tools with just a few HTML attributes, no JavaScript required.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

  <button type="submit">Register</button>
</form>

When an agent invokes this tool, the browser focuses the form, populates the fields, and, with toolautosubmit, submits it automatically. The user sees everything happening on screen.

Content Filtering and Navigation

For sites with large content collections (news portals, catalogs, documentation), filtering tools let agents narrow results precisely:

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Declarative vs. Imperative: Which One to Use?

WebMCP offers two APIs. They're not competing; they're complementary. Here's how to choose.

The Declarative API

What it is: You add HTML attributes to existing <form> elements. That's it. No JavaScript.

Best for:

• Forms that already exist and work for human users
• Contact forms, registration, booking, search forms
• Sites built with CMS platforms that generate form HTML
• Quick wins: you can add WebMCP support to an existing site in minutes

Pros:

• Zero JavaScript required
• Works with any HTML form
• Easy to maintain alongside your existing markup
• Great for simple, structured data collection

Cons:

• Limited to form-based interactions
• Less control over execution logic
• Cannot dynamically register/unregister tools based on page state
• Schema generation is implicit (based on form structure)

Use when: Your primary need is making forms agent-accessible. If your site's key interactions are form submissions (contact, booking, search, registration), start here.

The Imperative API

What it is: You call document.modelContext.registerTool() from JavaScript, defining tools with names, descriptions, JSON schemas, and execute functions.

Best for:

• Complex interactions beyond forms (product search, cart management, filtering)
• Dynamic tool registration (tools that appear/disappear based on context)
• Tools that need to call APIs, transform data, or return structured results
• Sites that need fine-grained control over agent behavior

Pros:

• Full control over tool behavior and return values
• Dynamic registration and unregistration
• Can call backend APIs, transform data, return JSON
• Rich JSON Schema support (enums, types, validation)
• Cross-origin iframe support with exposedTo

Cons:

• Requires JavaScript implementation
• More development effort
• Must handle tool lifecycle management

Use when: Your interactions go beyond simple form submissions: e-commerce product catalogs, dynamic filtering, multi-step workflows, or any scenario where you need to return structured data from a tool execution.

Decision Matrix

Can You Use Both?

Absolutely. A well-designed site might use the Declarative API for static forms (contact, newsletter) and the Imperative API for dynamic interactions (product search, cart management). They coexist on the same page without conflict.

WebMCP vs. MCP: Not Competitors, Partners

It's important to understand that WebMCP is not a replacement for the Model Context Protocol (MCP). They solve different problems:

Think of it this way: MCP is your backend service layer: it handles core business logic, data retrieval, and background tasks. WebMCP is your frontend layer: it connects agents directly to the website the user is looking at, enabling contextual, in-browser interactions.

The most effective agentic applications use both: MCP for the heavy lifting (data, authentication, business logic) and WebMCP for the interactive experience (UI actuation, real-time feedback, human-in-the-loop workflows).

Getting Started

Availability

WebMCP is currently available in Chrome 149+ via an origin trial. To participate:

1. Register for the origin trial at Chrome's origin trial portal
2. Add the origin trial meta tag to your HTML
3. Implement your tools using either API

For local development, you can enable WebMCP via chrome://flags/#enable-webmcp-testing.

Security

WebMCP tools are gated by:

• Origin isolation — tools only work in origin-isolated documents
• Permissions Policy — the tools policy defaults to self, disabling tools in cross-origin iframes unless explicitly allowed with allow="tools"

Tools are ephemeral: they exist only while the page is open. Once the user navigates away or closes the tab, the agent loses access.

Best Practices

1. One tool, one job: each tool should do a single, well-defined task. Avoid overlapping tools.
2. Clear naming: use verbs that describe exactly what happens (create-event vs start-event-creation-process).
3. Positive descriptions: describe what a tool can do, not what it can't do.
4. Accept raw input: don't ask the agent to perform calculations or format strings. Let the tool handle that.
5. Validate strictly in code, loosely in schema: schema constraints help but aren't guaranteed.
6. Manage tool lifecycle: register tools when they're relevant, unregister when they're not.
7. Trust the agent: describe capabilities, don't prescribe exact flows.

Real-World Examples

Google has published several demos that showcase WebMCP in action:

• Pizza Maker (Imperative): ordering pizza with layered customization
• Flight Search (Imperative, React): searching flights with complex filters
• Le Petit Bistro (Declarative): restaurant reservation form with HTML annotations

These demos demonstrate the two APIs side by side and are a great starting point for experimentation.

What's Next?

WebMCP is still in active development. The specification is being refined on GitHub, and Chrome's implementation is subject to change. Angular also has experimental support for WebMCP tool registration.

For developers building e-commerce platforms, CMS solutions, or any web application where AI agents need to interact with user-facing pages, WebMCP represents a fundamental shift: instead of agents guessing how your site works, your site tells them exactly what it can do.

The result is faster, more reliable, and more transparent interactions — with the user always in control.

This article is based on official Chrome developer documentation, the W3C WebMCP specification, and Google's WebMCP demos. WebMCP is a proposed standard and subject to change.