What Is WebMCP and Why Your Website Needs It

The way AI agents interact with websites is about to change. Right now, agents like ChatGPT, Claude, and Gemini resort to screen scraping, screenshot analysis, and brute-force form submissions. They're essentially mimicking malware behavior to interact with web content. Not great. WebMCP, a new W3C proposal backed by Google and Microsoft, tackles that problem. It gives websites a standard way to expose their functionality as structured tools that any AI agent can understand and invoke.

What Is WebMCP?

WebMCP (Web Model Context Protocol) is a JavaScript API proposed through the W3C Web Machine Learning Community Group. It enables web applications to expose their functionality as structured tools for AI agents. In practice, it turns every website into an MCP server running entirely client-side in the browser.

The spec was co-authored by people from Google and Microsoft, and Chrome 146 already includes an early implementation behind a feature flag. The idea is simple but powerful: instead of agents guessing how to interact with your website by parsing screenshots and DOM elements, you tell them exactly what actions are available, what parameters they need, and what to expect back.

Why WebMCP Matters

Right now, AI agents do things the hard way. A typical "browser use" session: the agent takes a screenshot, sends it to a vision model, identifies UI elements, clicks buttons, waits for page loads, and repeats. Often dozens of times for a single task. It's slow, expensive, unreliable, and nearly indistinguishable from bot abuse.

WebMCP replaces that entire circus with a single structured tool call. An e-commerce site that registers a searchProducts tool lets the agent make one function call and receive structured JSON back. No clicking through filter dropdowns, no scraping paginated results.

As Christian Heilmann put it: with WebMCP, "agents have become first-class citizens of the world wide web." Instead of fighting against web infrastructure, agents can work with it. And you as a website owner keep full control over what's exposed.

Two APIs: Declarative vs Imperative

WebMCP offers two ways to expose tools to AI agents. You can use one or both depending on what you need.

The Declarative API: HTML Attributes on Forms

The declarative approach is the easiest way to start. You slap a few attributes on your existing HTML forms, and the browser automatically translates them into structured tools that agents can discover and invoke. No JavaScript required.

<form
  id="search-flights"
  toolname="searchFlights"
  tooldescription="Search for available flights by origin, destination, and date"
  toolautosubmit="true"
>
  <label for="origin">From</label>
  <input
    type="text"
    id="origin"
    name="origin"
    required
    toolparamdescription="Departure airport code (e.g. AMS, JFK, LHR)"
  />

  <label for="destination">To</label>
  <input
    type="text"
    id="destination"
    name="destination"
    required
    toolparamdescription="Arrival airport code (e.g. CDG, SFO, NRT)"
  />

  <label for="date">Date</label>
  <input
    type="date"
    id="date"
    name="date"
    required
    toolparamdescription="Departure date in YYYY-MM-DD format"
  />

  <button type="submit">Search Flights</button>
</form>

The key attributes are:

• toolname - A unique identifier for the tool (e.g. searchFlights)
• tooldescription - A natural language explanation of what the tool does, helping agents decide when to use it
• toolparamdescription - Per-input descriptions so agents know exactly what value to provide
• toolautosubmit - Optional attribute that lets the agent automatically submit the form after filling it in

The browser converts this into a tool definition that any AI agent can invoke. The agent fills in the fields with the correct values and submits the form. No screenshot analysis, no DOM guessing.

The Imperative API: JavaScript Tool Registration

For more complex interactions that go beyond form submissions, the imperative API lets you register tools programmatically using JavaScript. You define a name, description, JSON input schema, and an execute callback.

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "searchProducts",
    description: "Search the product catalog by keyword, category, and price range",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "Search keywords"
        },
        category: {
          type: "string",
          description: "Product category filter",
          enum: ["electronics", "clothing", "home", "sports"]
        },
        maxPrice: {
          type: "number",
          description: "Maximum price in USD"
        }
      },
      required: ["query"]
    },
    execute: async ({ query, category, maxPrice }) => {
      const results = await fetchProducts({ query, category, maxPrice });
      return {
        content: [{
          type: "text",
          text: JSON.stringify(results)
        }]
      };
    }
  });
}

The imperative API exposes three methods on navigator.modelContext:

• provideContext(options) - Register multiple tools at once (replaces any existing tools)
• registerTool(tool) - Add a single tool (throws if the name already exists)
• unregisterTool(name) - Remove a tool by name

Which API Should You Use?

In practice, you'll probably use both: declarative for existing forms, imperative for richer functionality. Keep tool names distinct between the two, or you'll get naming conflicts.

User Interaction and Consent

The requestUserInteraction API adds an important safety layer. When a tool needs to perform a sensitive action, like making a purchase or deleting data, the execute callback can pause and ask the user for confirmation through the browser's native UI.

navigator.modelContext.registerTool({
  name: "purchaseItem",
  description: "Complete a purchase for the specified product",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "Product ID to purchase" },
      quantity: { type: "number", description: "Number of items" }
    },
    required: ["productId"]
  },
  annotations: {
    readOnlyHint: false  // Indicates this tool modifies state
  },
  execute: async ({ productId, quantity = 1 }, client) => {
    // Ask the user before proceeding
    const confirmed = await client.requestUserInteraction(async () => {
      return confirm(`Purchase ${quantity}x product ${productId}?`);
    });

    if (!confirmed) {
      return { content: [{ type: "text", text: "Purchase cancelled by user." }] };
    }

    const order = await completePurchase(productId, quantity);
    return {
      content: [{ type: "text", text: `Order ${order.id} confirmed.` }]
    };
  }
});

Users always remain in control. The browser mediates all tool calls, requires per-origin consent, and enforces origin-based permission policies. No agent can interact with your tools without the user explicitly granting permission.

Discovery: Page-Level and Site-Level

Before agents can use your tools, they need to find them. WebMCP supports two levels of discovery.

Page-Level Discovery

Tools registered via the declarative or imperative API are automatically discoverable when an agent has the page open in a browser tab. This is the primary discovery mechanism. Agents visiting your page immediately see all registered tools and their schemas.

Optionally, you can include a page-level manifest for additional context about the page's capabilities:

<script type="application/json" id="webmcp">
{
  "spec": "webmcp/0.1",
  "page": {
    "url": "/flights/search",
    "title": "Flight Search"
  },
  "context": {
    "purpose": "Search and book flights between airports worldwide",
    "entities": ["flight", "booking", "airport"],
    "auth": { "required": false }
  },
  "intents": [
    {
      "id": "searchFlights",
      "description": "Search for available flights",
      "inputs": [
        { "name": "origin", "type": "string", "required": true },
        { "name": "destination", "type": "string", "required": true },
        { "name": "date", "type": "date", "required": true }
      ],
      "policy": {
        "rateLimit": "10/min",
        "safety": ["read-only"]
      }
    }
  ]
}
</script>

Site-Level Discovery via .well-known/webmcp.json

The site-level manifest at /.well-known/webmcp.json enables pre-navigation discovery. Agents can find out what tools your site offers before they even open a page. Think of it as a sitemap, but for AI agent tools.

{
  "spec": "webmcp/0.1",
  "site": {
    "name": "Acme Travel",
    "version": "2026.03",
    "description": "Book flights, hotels, and rental cars worldwide"
  },
  "pages": [
    {
      "url": "/flights/search",
      "intents": ["searchFlights", "bookFlight"]
    },
    {
      "url": "/hotels/search",
      "intents": ["searchHotels", "bookHotel"]
    },
    {
      "url": "/account",
      "intents": ["viewBookings", "cancelBooking"]
    }
  ],
  "flows": [
    {
      "id": "book_trip",
      "description": "Search and book a complete trip with flights and hotel",
      "steps": [
        { "intent": "searchFlights", "page": "/flights/search" },
        { "intent": "bookFlight", "page": "/flights/search" },
        { "intent": "searchHotels", "page": "/hotels/search" },
        { "intent": "bookHotel", "page": "/hotels/search" }
      ]
    }
  ]
}

The interesting part of the site manifest is that it defines flows: multi-step processes that span multiple pages. An agent planning a trip can see the entire booking workflow upfront and navigate through it efficiently.

Current Status and Browser Support

WebMCP is currently being incubated by the W3C Web Machine Learning Community Group. It's a Draft Community Group Report, not yet a formal W3C Standard. Where things stand as of March 2026:

Want to test WebMCP today? You need Chrome 146 (Canary channel). Navigate to chrome://flags, search for "Experimental Web Platform Features", enable it, and relaunch. WebMCP requires HTTPS in production, but localhost works fine for local development.

Expected Timeline

Based on the current spec status and browser vendor engagement, a realistic timeline:

• Q1 2026 (now): Chrome DevTrial behind a flag. Early adopters experiment with the API.
• Mid 2026: Formal browser announcements expected at Google I/O and Google Cloud Next. Edge support likely to follow Chrome closely.
• Late 2026: Safari support expected. Chrome may enable WebMCP by default in stable releases.
• Early 2027: Firefox support. The spec may move from Community Group Report to a more formal W3C track.
• 2027–2028: Broad cross-browser availability. WebMCP becomes a standard part of the web platform.

How to Implement WebMCP Today

You don't have to wait for broad browser support. The declarative approach adds minimal overhead to your existing HTML, and the site manifest is a simple JSON file. Step by step:

Step 1: Annotate Your Existing Forms

Grab your most important forms (search, contact, booking, login) and add WebMCP attributes. Takes minutes per form:

<!-- Before: plain HTML form -->
<form id="site-search" action="/search">
  <input type="text" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

<!-- After: WebMCP-annotated form -->
<form
  id="site-search"
  action="/search"
  toolname="siteSearch"
  tooldescription="Search the website for products, articles, and help pages"
  toolautosubmit="true"
>
  <input
    type="text"
    name="q"
    placeholder="Search..."
    toolparamdescription="Search query - accepts keywords, product names, or questions"
  />
  <button type="submit">Search</button>
</form>

Step 2: Register JavaScript Tools for Complex Actions

For functionality that goes beyond form submission, like checking stock availability, comparing products, or calculating shipping, register imperative tools:

// Always check for browser support first
if ("modelContext" in navigator) {
  navigator.modelContext.provideContext({
    tools: [
      {
        name: "checkAvailability",
        description: "Check if a product is in stock at a specific location",
        inputSchema: {
          type: "object",
          properties: {
            productId: { type: "string", description: "Product SKU or ID" },
            zipCode: { type: "string", description: "ZIP/postal code for store lookup" }
          },
          required: ["productId"]
        },
        annotations: { readOnlyHint: true },
        execute: async ({ productId, zipCode }) => {
          const stock = await fetch(`/api/stock/${productId}?zip=${zipCode}`);
          const data = await stock.json();
          return {
            content: [{ type: "text", text: JSON.stringify(data) }]
          };
        }
      },
      {
        name: "calculateShipping",
        description: "Calculate shipping cost and delivery estimate",
        inputSchema: {
          type: "object",
          properties: {
            productId: { type: "string", description: "Product SKU or ID" },
            zipCode: { type: "string", description: "Delivery ZIP/postal code" },
            method: {
              type: "string",
              description: "Shipping method",
              enum: ["standard", "express", "overnight"]
            }
          },
          required: ["productId", "zipCode"]
        },
        annotations: { readOnlyHint: true },
        execute: async ({ productId, zipCode, method = "standard" }) => {
          const result = await fetch(
            `/api/shipping?product=${productId}&zip=${zipCode}&method=${method}`
          );
          const data = await result.json();
          return {
            content: [{ type: "text", text: JSON.stringify(data) }]
          };
        }
      }
    ]
  });
}

Step 3: Add a Site-Level Manifest

Create a /.well-known/webmcp.json file at your domain root that lists all pages with WebMCP tools and their multi-step flows. This lets agents plan their navigation before visiting individual pages.

Step 4: Handle Agent Submissions Differently

When agents submit forms, you probably want to skip CAPTCHA, return structured data instead of redirecting, or log the interaction separately. Use SubmitEvent.agentInvoked to detect agent submissions:

document.getElementById("search-form").addEventListener("submit", (event) => {
  event.preventDefault();

  if (event.agentInvoked) {
    // Agent submission: return structured data
    const formData = new FormData(event.target);
    const results = performSearch(formData.get("q"));

    event.respondWith(
      JSON.stringify({ results, total: results.length })
    );
    return;
  }

  // Human submission: normal form behavior
  event.target.submit();
});

Step 5: Test and Validate

The spec recommends fewer than 50 tools per page to avoid overwhelming agent discovery. Keep tool names descriptive, use verb-based naming (searchProducts not products), and return error messages that help agents self-correct.

• Test with Chrome 146 Canary and the Experimental Web Platform Features flag enabled
• Verify tools appear in Chrome DevTools (look for model context tooling)
• Test both declarative and imperative tools with different parameter combinations
• Ensure requestUserInteraction works for sensitive actions
• Validate your /.well-known/webmcp.json is accessible and correctly formatted

Expected Impact: What Implementing WebMCP Means

Implementing WebMCP positions your website for the shift that's coming: users finding and using web services through agents. What that concretely means:

The companies making their websites agent-ready now are building a serious head start. Mobile-responsive sites won the mobile era. I expect WebMCP-ready sites to do the same in the agent era.

Who Should Implement WebMCP?

Every website can benefit from WebMCP, but some industries stand to gain noticeably more:

• E-commerce: Product search, availability checks, price comparisons, and checkout flows. Agents can book purchases through structured tools instead of scraping product pages.
• Travel and hospitality: Flight search, hotel booking, car rentals. The multi-step flow definitions in WebMCP's site manifest are tailor-made for travel booking workflows.
• SaaS platforms: Account management, feature configuration, support ticket creation. Let agents perform administrative tasks through well-defined tools.
• Financial services: Account lookups, transaction history, loan calculators. The requestUserInteraction API is perfect for confirmation steps in sensitive financial operations.
• Healthcare: Appointment scheduling, provider search, prescription refill requests. Structured tools with clear input schemas reduce errors in critical workflows.
• Real estate: Property search, mortgage calculators, appointment booking. Agents can chain multiple tools to help users find and evaluate properties.
• Content publishers: Even read-only sites benefit from the declarative API on search forms and the site manifest for content discovery.

Security Model

The security model is designed so you as a website owner and your users stay in control:

• HTTPS required: WebMCP only works in secure contexts. No exceptions in production.
• Browser-mediated access: All tool calls go through the browser, which enforces permissions and origin policies.
• Per-origin consent: Users must grant permission for each website-agent pair. No blanket access.
• Human-in-the-loop: The requestUserInteraction API ensures users can approve sensitive actions.
• Tool annotations: The readOnlyHint annotation lets you signal whether a tool modifies state, helping agents and users understand the risk level.
• Sequential execution: Tool calls execute sequentially in JavaScript, preventing race conditions and ensuring UI consistency.

A big improvement over the current situation, where agents interact with websites through the same mechanisms as malicious bots. Websites can't tell the difference and can't control the interaction. WebMCP fixes that.

WebMCP vs Other Agent Protocols

WebMCP isn't the only agent protocol on the table. How it compares to the other approaches:

These protocols complement each other, they're not competing. WebMCP does client-side browser interactions, MCP does backend tool connections, A2A does agent-to-agent coordination, and OpenAPI documents your REST APIs. A well-prepared website implements several of them side by side.

Best Practices for WebMCP Implementation

• Use clear verb-based tool names: searchFlights, bookHotel, submitTicket - not flights or data
• Write descriptive tool descriptions: Agents use these to decide when to invoke a tool. Be specific about what it does and when it's useful.
• Accept raw user input: Don't require agents to transform data before calling your tool. Accept natural language dates, flexible formats, and common variations.
• Return descriptive errors: When a tool call fails, return a message that helps the agent self-correct (e.g. "Invalid airport code. Expected 3-letter IATA code like AMS or JFK").
• Keep tools under 50 per page: The spec recommends this limit to avoid overwhelming agent discovery.
• Separate declarative and imperative tool names: If you use both APIs on the same page, use distinct names to avoid DOMException conflicts.
• Use readOnlyHint annotations: Mark tools that only read data so agents can call them without requiring elevated consent.
• Return results after UI updates: Ensure the page reflects the action before the tool returns, so agents can verify the result visually if needed.

Getting Started

You don't need to do everything at once. Prioritized:

1. Add WebMCP attributes to your search form - the highest-impact, lowest-effort change
2. Annotate your contact and login forms - cover the most common agent interactions
3. Create a /.well-known/webmcp.json manifest - enable pre-navigation discovery
4. Register imperative tools for complex functionality - product comparison, availability checks, calculations
5. Add requestUserInteraction to sensitive tools - purchases, account changes, data deletion

The declarative API (step 1-2) requires no JavaScript and you can deploy it in an afternoon. The imperative API (step 4-5) takes more work but gives you the full range of WebMCP capabilities.

Sources

• WebMCP Specification - W3C Web Machine Learning Community Group Draft, February 2026
• WebMCP GitHub Repository - Official specification source and proposal documents
• WebMCP API Proposal - Detailed design rationale by Microsoft and Google authors
• WebMCP Early Preview - Chrome for Developers - Chrome's official WebMCP announcement and early preview program
• Google Chrome Ships WebMCP - VentureBeat - Industry coverage of WebMCP launch and adoption
• WebMCP - Christian Heilmann - Analysis of WebMCP's significance for the open web
• What Is WebMCP and How to Use It - Codely - Implementation guide with code examples
• WebMCP - DEJAN - Technical deep dive on declarative and imperative APIs
• WebMCP in Chrome 146 Guide - Bug0 - Chrome 146 implementation details and benchmarks
• Implementing WebMCP: Step-by-Step Guide - Halmob - Comprehensive implementation guide with React examples
• WebMCP: How the W3C Standard Revolutionizes AI Agents - innFactory - Enterprise perspective on WebMCP adoption