What Is WebMCP?

WebMCP is a W3C standard, shipped in Chrome 146 and Edge as of February 2026, that lets websites expose specific functionality as structured tools that AI agents can call directly.

Specific functionality means things like: a product search form, a pricing calculator, a booking flow, a demo request form, an availability checker, a checkout process. Any interactive element on your site that takes an input and returns an output.

"Call directly" means the agent doesn't screenshot your page, run a vision model to identify where the search bar is, simulate a mouse click, wait for the page to load, then screenshot again. Instead, it reads a machine-readable schema that says "this site has a tool called search_products that takes a query and returns results," and calls that function. The difference is 10–50 milliseconds vs. 2–5 seconds per interaction, and 67% less compute cost according to Google's internal benchmarks.

The protocol was co-authored by 7 engineers — 3 from Google (David Bokan, Khushal Sagar, Hannah Van Opstal) and 4 from Microsoft (Brandon Walderman, Leo Lee, Andrew Nolan) — through the W3C Web Machine Learning Community Group. Chrome holds 65.4% of the global browser market. Edge holds 13.2%. Together, that's 78.6% coverage — roughly 2.1 billion browser users — from day one.

Don't confuse the two "Web MCPs." Bright Data launched a product called "The Web MCP" in August 2025. That's a server-side proxy service for bypassing CAPTCHAs and geo-restrictions during web scraping. Google's WebMCP is a browser-native protocol for exposing site functionality to AI agents. Completely different products with confusingly similar names.

Where It Came From: 15 Months, 3 Organizations

WebMCP didn't start at Google. It was a 15-month convergence of three independent efforts. Here's what happened:

November 25, 2024 — Anthropic releases MCP. Anthropic open-sources the Model Context Protocol, a universal way to connect AI models to external tools. MCP reduced the integration problem from M×N custom connections (10 models × 100 tools = 1,000 integrations) to M+N (10 + 100 = 110 integrations) — a 90.9% reduction. Within 90 days, developers built over 1,000 MCP servers across 7 programming languages. But MCP was server-side only. It couldn't use the browser's built-in authentication (cookies, SSO) or access browser-specific capabilities.

Early 2025 — Alex Nahas solves the auth problem at Amazon. Nahas, a backend engineer, tried to deploy MCP internally at Amazon and hit a wall: zero of Amazon's internal services supported MCP's required OAuth 2.1 authentication. Every service used different auth mechanisms — session cookies, SAML tokens, custom headers. Retrofitting OAuth 2.1 across thousands of services would take months and dozens of teams. Nahas's insight: the browser already handles authentication for 100% of Amazon's services via session cookies and SSO. Instead of making services conform to OAuth 2.1, run MCP inside the browser itself. He built MCP-B ("MCP for Browser") using three components: a JavaScript MCP client running in the browser tab, the postMessage API for extension communication, and native session cookie auth. He published it as the @mcp-b/global polyfill on npm.

Late 2025 — Google and Microsoft discover they're building the same thing. Chrome's team had been prototyping "script tools" (JavaScript functions agents could invoke). Edge's team had been building structured agent-website interaction APIs. When MCP-B surfaced as a working implementation, both teams recognized the risk of shipping two competing, incompatible standards. Instead, they merged efforts through the W3C. Seven engineers across the two companies wrote the unified specification.

February 10, 2026 — Google ships Chrome 146 Canary with WebMCP. André Cipriani Bandarra announced the Early Preview Program on the Chrome Developers blog. Both the Declarative and Imperative APIs are available for testing. Stable release is expected later this month (March 2026).

The full engineering history, including Nahas's Arcade.dev interview, the Bright Data naming overlap, and the W3C specification details, is documented in The GEO Community's complete WebMCP timeline.

Why the origin matters for marketers: This isn't one vendor's proprietary format that might get abandoned. Anthropic built the protocol foundation. Amazon proved the browser architecture. Google and Microsoft standardized it through the W3C. That's the entire ecosystem converging. You can build on this without adoption risk.

How It Works: Two Implementation Paths

Path A: Declarative API — add one HTML attribute to an existing form

If your site has a search bar, contact form, newsletter signup, or product filter, you make it agent-callable by adding a single attribute. No JavaScript. No backend changes.

Here's a standard search form before WebMCP:

<form action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

Here it is after:

<form webmcp action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form webmcp action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form webmcp action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form webmcp action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

<form webmcp action="/search" method="GET">
  <input name="q" type="text" placeholder="Search products..." />
  <input name="category" type="hidden" value="all" />
  <button type="submit">Search</button>
</form>

One word: webmcp. The agent reads the form's HTML structure, determines it accepts a query parameter q and an optional category parameter, constructs the request, and gets results. Implementation time: under a minute per form.

Path B: Imperative API — register a JavaScript function as an agent-callable tool

For workflows that involve logic — pricing calculations, product configuration, availability checks, multi-step booking — you register a function with the browser's navigator.ai.tools API.

Here's a concrete example. Say you're a SaaS company with a pricing page that offers three tiers (Starter at $12/user/month, Pro at $29/user/month, Enterprise at custom pricing), with a 20% discount for annual billing:

navigator.ai.tools.register({
  name: "calculate_pricing",
  description:
    "Calculate exact subscription pricing for Acme. " +
    "Starter: $12/user/mo. Pro: $29/user/mo. " +
    "Enterprise: custom (returns contact form). " +
    "Annual billing saves 20%. Teams of 1-500.",
  parameters: {
    team_size: {
      type: "number",
      description: "Number of users (1-500)"
    },
    tier: {
      type: "string",
      enum: ["starter", "pro", "enterprise"],
      description: "Subscription tier"
    },
    billing: {
      type: "string",
      enum: ["monthly", "annual"],
      description: "Billing cycle"
    }
  },
  handler: async ({ team_size, tier, billing }) => {
    const rates = { starter: 12, pro: 29 };
    if (tier === "enterprise") {
      return {
        pricing: "custom",
        next_step: "https://acme.com/contact-sales",
        message: "Enterprise pricing requires a sales consultation."
      };
    }
    const monthly = rates[tier] * team_size;
    const annual = monthly * 12 * 0.8;
    return {
      per_user_monthly: rates[tier]

navigator.ai.tools.register({
  name: "calculate_pricing",
  description:
    "Calculate exact subscription pricing for Acme. " +
    "Starter: $12/user/mo. Pro: $29/user/mo. " +
    "Enterprise: custom (returns contact form). " +
    "Annual billing saves 20%. Teams of 1-500.",
  parameters: {
    team_size: {
      type: "number",
      description: "Number of users (1-500)"
    },
    tier: {
      type: "string",
      enum: ["starter", "pro", "enterprise"],
      description: "Subscription tier"
    },
    billing: {
      type: "string",
      enum: ["monthly", "annual"],
      description: "Billing cycle"
    }
  },
  handler: async ({ team_size, tier, billing }) => {
    const rates = { starter: 12, pro: 29 };
    if (tier === "enterprise") {
      return {
        pricing: "custom",
        next_step: "https://acme.com/contact-sales",
        message: "Enterprise pricing requires a sales consultation."
      };
    }
    const monthly = rates[tier] * team_size;
    const annual = monthly * 12 * 0.8;
    return {
      per_user_monthly: rates[tier]

navigator.ai.tools.register({
  name: "calculate_pricing",
  description:
    "Calculate exact subscription pricing for Acme. " +
    "Starter: $12/user/mo. Pro: $29/user/mo. " +
    "Enterprise: custom (returns contact form). " +
    "Annual billing saves 20%. Teams of 1-500.",
  parameters: {
    team_size: {
      type: "number",
      description: "Number of users (1-500)"
    },
    tier: {
      type: "string",
      enum: ["starter", "pro", "enterprise"],
      description: "Subscription tier"
    },
    billing: {
      type: "string",
      enum: ["monthly", "annual"],
      description: "Billing cycle"
    }
  },
  handler: async ({ team_size, tier, billing }) => {
    const rates = { starter: 12, pro: 29 };
    if (tier === "enterprise") {
      return {
        pricing: "custom",
        next_step: "https://acme.com/contact-sales",
        message: "Enterprise pricing requires a sales consultation."
      };
    }
    const monthly = rates[tier] * team_size;
    const annual = monthly * 12 * 0.8;
    return {
      per_user_monthly: rates[tier]

navigator.ai.tools.register({
  name: "calculate_pricing",
  description:
    "Calculate exact subscription pricing for Acme. " +
    "Starter: $12/user/mo. Pro: $29/user/mo. " +
    "Enterprise: custom (returns contact form). " +
    "Annual billing saves 20%. Teams of 1-500.",
  parameters: {
    team_size: {
      type: "number",
      description: "Number of users (1-500)"
    },
    tier: {
      type: "string",
      enum: ["starter", "pro", "enterprise"],
      description: "Subscription tier"
    },
    billing: {
      type: "string",
      enum: ["monthly", "annual"],
      description: "Billing cycle"
    }
  },
  handler: async ({ team_size, tier, billing }) => {
    const rates = { starter: 12, pro: 29 };
    if (tier === "enterprise") {
      return {
        pricing: "custom",
        next_step: "https://acme.com/contact-sales",
        message: "Enterprise pricing requires a sales consultation."
      };
    }
    const monthly = rates[tier] * team_size;
    const annual = monthly * 12 * 0.8;
    return {
      per_user_monthly: rates[tier]

navigator.ai.tools.register({
  name: "calculate_pricing",
  description:
    "Calculate exact subscription pricing for Acme. " +
    "Starter: $12/user/mo. Pro: $29/user/mo. " +
    "Enterprise: custom (returns contact form). " +
    "Annual billing saves 20%. Teams of 1-500.",
  parameters: {
    team_size: {
      type: "number",
      description: "Number of users (1-500)"
    },
    tier: {
      type: "string",
      enum: ["starter", "pro", "enterprise"],
      description: "Subscription tier"
    },
    billing: {
      type: "string",
      enum: ["monthly", "annual"],
      description: "Billing cycle"
    }
  },
  handler: async ({ team_size, tier, billing }) => {
    const rates = { starter: 12, pro: 29 };
    if (tier === "enterprise") {
      return {
        pricing: "custom",
        next_step: "https://acme.com/contact-sales",
        message: "Enterprise pricing requires a sales consultation."
      };
    }
    const monthly = rates[tier] * team_size;
    const annual = monthly * 12 * 0.8;
    return {
      per_user_monthly: rates[tier]

Now when a customer tells their AI assistant "What would Acme Pro cost for a 25-person team billed annually?", the agent calls calculate_pricing with {team_size: 25, tier: "pro", billing: "annual"} and returns: $29/user/month, $8,700/year (saving $2,175 vs. monthly billing), with a direct link to checkout. No page render. No UI navigation. No screenshot interpretation.

Implementation time: 2–4 hours per tool, depending on the complexity of the handler logic.

The description field is the new meta description. Agents use the description string to decide whether to invoke your tool or a competitor's. "Get pricing" loses to "Calculate exact subscription pricing for Acme. Starter: $12/user/mo. Pro: $29/user/mo. Enterprise: custom. Annual billing saves 20%. Teams of 1-500." Specificity is the selection signal. Write tool descriptions the way you'd write a product spec, not ad copy. Include the specific tiers, price points, constraints, and capabilities. The more precise the description, the more likely an agent is to choose your tool for a matching query.

What Changes for the Agent

Why This Changes Marketing Strategy

1. Agents are becoming a real acquisition channel

When a consumer asks an AI assistant "Find me the best project management tool for a 15-person team under $20/user/month," the agent doesn't display a list of blue links. It queries sites, compares structured data, and returns a recommendation. If your site has a WebMCP-enabled pricing calculator that the agent can call directly, you're in the consideration set with exact data. If your competitor's site does but yours doesn't, the agent gives a precise answer for their product and a vague guess for yours. The precise answer wins.

2. The 67% compute reduction creates structural preference

Every AI agent provider — OpenAI, Anthropic, Google, Perplexity — pays per inference. A 67% cost reduction per interaction means agents can handle 3× the requests at the same compute budget when interacting with WebMCP-enabled sites. This isn't a policy choice by agent developers; it's a cost optimization that emerges automatically at scale. The cheapest reliable path wins, and WebMCP is that path. Your site being WebMCP-enabled doesn't just make it accessible — it makes it economically preferred.

3. First movers train agent behavior

AI agents that successfully transact on your site learn to route future similar queries back to you. If you're the first SaaS pricing calculator in your vertical that an agent can call directly, you become the agent's default for that category. Late movers don't just miss early volume — they have to overcome a learned routing preference. This is the "default app" effect applied to AI-mediated commerce: the first reliable tool gets embedded in the agent's workflow, and switching costs are real even for software.

4. It completes the GEO stack

If you're already doing Generative Engine Optimization — optimizing content so AI models cite your brand — WebMCP is the second half. GEO makes your brand discoverable (agents can find and cite you). WebMCP makes your brand actionable (agents can transact on your site). A brand that gets cited but can't be transacted with captures attention and loses the conversion. A brand that is both citable and actionable captures the full funnel from AI recommendation to closed sale.

Tool Description Optimization (TDO) is the third discipline. SEO gets you found by search engines. GEO gets you cited by AI models. TDO — the practice of writing agent-facing tool descriptions to maximize invocation — gets your tools selected by AI agents. The three form a stack: traditional search → AI citation → AI agent action. Marketers who can operate across all three layers will own the Agent Economy. TDO is where WebMCP and GEO intersect: the description string you write for each registered tool is simultaneously a technical specification and a competitive positioning statement.

What Exactly to Implement and When

This week (1–2 hours total with one developer)

• List your 5 highest-revenue interactive elements. Typically: product search, pricing/quote calculator, booking or scheduling form, demo request form, account signup. These are your WebMCP priorities.

• Add webmcp to each form element. One HTML attribute per form. Deploy to staging.

• Test in Chrome 146 Canary. Download from chrome.google.com/canary. Verify agents can discover and invoke each form using Chrome's developer tools.

This month (8–20 dev hours depending on complexity)

• Register Imperative tools for your pricing calculator, product configurator, and availability checker. Use the navigator.ai.tools.register() pattern from the example above. Budget 2–4 hours per tool.

• Write specific tool descriptions with real numbers. Include your actual tier names, price points, team size limits, and feature constraints. "Calculate pricing for teams of 1–500 on Starter ($12/user/mo), Pro ($29/user/mo), or Enterprise (custom)" is discoverable. "Get pricing info" is invisible.

• Return structured JSON from every tool handler. Every response should include: the data the customer asked about (prices, availability, features), a direct URL for the next step (checkout, signup, contact sales), and the currency/units. Agents need structured data, not rendered HTML.

This quarter (ongoing, ~2 hours/week)

• Update your llms.txt file to reference your WebMCP tools. If you publish an llms.txt file (the AI-agent equivalent of robots.txt), add references to your registered tools so AI crawlers know your site is agent-actionable, not just agent-readable.

• Connect your GEO content to your WebMCP tools. Content pages optimized for AI citation should reference your transactional surfaces. When an agent cites your comparison article, it should also know it can call your pricing tool for exact numbers. Discoverability linked to actionability is how you capture the full funnel.

• Build agent interaction analytics. Track which tools agents invoke, invocation-to-completion rates, error rates, and downstream conversion. This is an entirely new channel that most marketing teams aren't measuring. Define baselines now.

• Run a competitive check. View source on your top 3–5 competitors' sites. Search for webmcp in their HTML and navigator.ai.tools in their JavaScript. In categories where agents mediate purchasing — SaaS, e-commerce, travel, financial services — the first agent-actionable site in a vertical captures disproportionate agent-routed traffic.

The Two Pillars of Agent Economy Readiness

Citable but not actionable = you capture attention but lose the sale. Actionable but not discoverable = you have tools nobody knows about. The brands that build both pillars will own how commerce works in the Agent Economy.

Key Resources

• WebMCP W3C Specification: https://webmachinelearning.github.io/webmcp/

• Chrome Developers Blog — WebMCP EPP: developer.chrome.com/blog/webmcp-epp

• MCP-B Polyfill (npm): @mcp-b/global

• Anthropic MCP Documentation: modelcontextprotocol.io

• Full WebMCP engineering timeline + GEO learning path: The GEO Community

• Free AI Visibility Audit: roast.wrodium.com