WebMCP: Chrome Turns Every Website Into
an AI Agent Tool Server

What Is WebMCP?

WebMCP (Web Model Context Protocol) is a proposed web standard that lets websites expose structured tools to AI agents running in the browser. Think of it as the USB-C of AI-to-website communication — one standard interface that any agent can plug into.

Right now, AI agents that need to interact with websites rely on brittle hacks: screen scraping, CSS selectors, Puppeteer automation, or reverse-engineering APIs. When a site updates its layout, the whole thing breaks. WebMCP fixes this by giving websites a first-class way to declare what actions they support.

The protocol is co-authored by engineers at Google and Microsoft. It builds on Anthropic's Model Context Protocol (MCP) — the same standard already used by Claude, Cursor, and dozens of other AI tools for connecting to external data sources.

How WebMCP Works: Two APIs

WebMCP provides two complementary ways for websites to expose tools. You pick whichever fits your use case — or use both.

1. Imperative API (JavaScript)

Register tools via JavaScript for complex, dynamic interactions. The AI agent calls these like function calls — it passes parameters, gets back structured JSON.

navigator.modelContext.registerTool({
  name: "search_products",
  description: "Search for products by name or category",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search term" },
      maxPrice: { type: "number", description: "Max price filter" }
    },
    required: ["query"]
  },
  execute: async ({ query, maxPrice }) => {
    const results = await searchAPI(query, maxPrice);
    return {
      content: [{ type: "text", text: JSON.stringify(results) }]
    };
  }
});

The inputSchema uses JSON Schema v7 — the same format used by OpenAI function calling and MCP servers. If you have already built MCP tools for Claude or ChatGPT, you are 90% of the way there.

2. Declarative API (HTML Attributes)

For simpler interactions — especially forms — you can use HTML attributes. Zero JavaScript required.

<form toolname="checkout"
      tooldescription="Complete a purchase order">

  <input type="text" name="address" required
    toolparamdescription="Shipping address">

  <input type="text" name="card_number"
    toolparamdescription="Credit card number">

  <button type="submit">Place Order</button>
</form>

The agent sees this as a structured tool with typed parameters — not a blob of HTML to parse. Form validation, autofill, and browser security all work as normal.

What Can You Build With WebMCP?

Any website action that currently requires a human clicking buttons can become an AI-callable tool. Some concrete examples:

The webmcp-starter demo by Doriandarko shows a complete food delivery app with 9 tools — search restaurants, browse menus, manage cart, apply promo codes, and checkout — all in a single HTML file. An AI agent can handle the entire ordering flow from "I want Italian food" to a placed order.

WebMCP vs Traditional Browser Automation

This does not mean Puppeteer and Playwright are dead. They still work for testing, CI pipelines, and sites that have not adopted WebMCP yet. But for AI agent interactions with cooperating websites, WebMCP is a fundamentally better approach.

The Rise of AEO: AI Engine Optimization

Here is the part most people are sleeping on. WebMCP creates an entirely new discovery channel. When AI agents can directly query your website's tools, being the tool that the agent recommends becomes as valuable as ranking #1 on Google.

Industry observers are already calling this AEO (AI Engine Optimization) — the discipline of making your website discoverable and useful to AI agents. Early adopters who implement WebMCP support will likely get prioritized by AI assistants like Gemini, ChatGPT, and Claude when they need to recommend tools or complete tasks for users.

This is especially relevant for review sites, comparison tools, and SaaS products. If you run a tool directory, a deal aggregator, or a product comparison site — implementing WebMCP early is a competitive moat.

How to Try WebMCP Today

Browser Support Timeline

What This Means for AI Tools

The AI tools that will benefit most from WebMCP are the ones already building on MCP — Cursor, Claude, and ChatGPT already support MCP servers for connecting to external data. WebMCP extends this to the browser.

Imagine asking Claude or ChatGPT to "compare flight prices on 3 airline websites" — instead of screenshotting each site and guessing at prices, the agent calls each site's search_flights tool and gets back structured JSON with exact prices, dates, and seat availability.

For developers building with AI coding assistants, WebMCP also means better tool integrations. Your AI coding tools will eventually be able to interact with documentation sites, package registries, and deployment dashboards through structured APIs instead of DOM scraping.

Frequently Asked Questions