WebMCP: Making Websites
Agent-Ready for the AI Era

Introduction

Imagine an AI agent trying to book a flight on your website. Today, it renders the page, takes a screenshot, asks a vision model to guess which button is "Search", and hopes for the best. Change a button's CSS class, move it 5 pixels to the left, or rename "Submit" to "Search Flights" — the agent breaks.

This fragile, pixel-peeping approach is what WebMCP (Web Model Context Protocol) aims to eliminate. Unveiled at Google I/O 2026 on May 19-20 as one of the "15 updates powering the agentic web," WebMCP is Google's proposed open web standard that lets your website declare exactly what it can do — as typed, callable JavaScript tools — directly to AI agents through the navigator.modelContext browser API.

Instead of an agent guessing where to click, your website says: "I support searchFlights(from, to, date, passengers), getHotelAvailability(location, dates), and completeBooking(bookingId). Here are the exact parameters."

This is a fundamental shift. Websites are no longer just human-readable documents — they become executable toolkits for AI agents. In this guide, I'll walk through exactly what WebMCP is, how to implement it, code examples for both the Imperative and Declarative APIs, and what this means for your web development strategy.

What Is WebMCP?

WebMCP is a proposed web standard developed by Google's Chrome team, published as a developer trial on May 18, 2026. It introduces a new browser API — navigator.modelContext — that allows websites to publish a structured, machine-readable manifest of callable tools.

The key insight is simple: agents don't need to see your UI to use your website. They need to know what operations you support and how to call them. WebMCP provides exactly that — a "tool contract" between the website and the AI agent.

Key Concepts

• Tool: A named operation the website supports (e.g., searchFlights, bookHotel) with typed parameters and return values
• Model Context: Structured data about the current page state that the site exposes to help agents understand what they're looking at
• Actuation: The act of an agent simulating manual mouse clicks and text input — WebMCP replaces this with direct API calls
• Progressive Enhancement: WebMCP is entirely optional — your site continues working exactly as before for human visitors. The agent layer is invisible to regular users

WebMCP vs Anthropic's MCP

It's important to distinguish WebMCP from Anthropic's Model Context Protocol (MCP). They're different standards for different contexts:

They're complementary. A website using WebMCP exposes its tools to an in-browser agent. That agent, in turn, could use Anthropic's MCP to access external databases or APIs. Together, they form a complete ecosystem for agent-web interaction.

The Problem WebMCP Solves

Before WebMCP, AI agents interacted with websites through actuation — simulating human behavior: rendering the page, taking screenshots, feeding them to multimodal vision models, and guessing where to click.

This approach has fundamental problems:

• Brittleness: Change a button's CSS class or move it by a few pixels — the agent breaks
• Speed: Each interaction requires a full page render, screenshot, and vision model inference — seconds per action
• Accuracy: Vision models can misidentify elements, especially on complex layouts or dynamic content
• Cost: Vision API calls are expensive and slow, making multi-step workflows impractical
• Privacy: Screenshots of user data are transmitted to third-party vision APIs

WebMCP eliminates all of these problems by replacing pixel-based interaction with structured API calls. The agent calls searchFlights("NYC", "LAX", "2026-06-15", 2) instead of clicking through a 5-step form. It's faster, cheaper, more reliable, and more private.

Getting Started with WebMCP

WebMCP is currently available as a Developer Trial in Chrome. You need to enable it either through chrome://flags or by registering for an origin trial token.

Enabling WebMCP

In Chrome, navigate to chrome://flags/#enable-web-mcp and enable the flag. Alternatively, register for a WebMCP origin trial token and add it to your page's <head>:

<meta http-equiv="origin-trial" content="YOUR_ORIGIN_TRIAL_TOKEN">

Feature Detection

Before using WebMCP, always check if it's available in the user's browser:

if (navigator.modelContext) {
  console.log('WebMCP is available!');
  // Proceed with tool registration
} else {
  console.log('WebMCP not available — fall back to normal UX');
  // The site works fine without it
}

WebMCP is designed as progressive enhancement — your site must work perfectly without it.

WebMCP Imperative API: Defining Tools in JavaScript

The Imperative API is the most flexible way to use WebMCP. You define tools programmatically using JavaScript, which gives you full control over tool names, parameters, and execution logic.

Registering Tools

Use navigator.modelContext.registerTool() to define each tool your website supports:

navigator.modelContext.registerTool({
  name: 'searchFlights',
  description: 'Search for available flights between two airports on a given date',
  parameters: {
    type: 'object',
    properties: {
      origin: {
        type: 'string',
        description: 'IATA airport code for departure (e.g., JFK, LAX, LHR)'
      },
      destination: {
        type: 'string',
        description: 'IATA airport code for arrival'
      },
      date: {
        type: 'string',
        format: 'date',
        description: 'Departure date (YYYY-MM-DD)'
      },
      passengers: {
        type: 'integer',
        minimum: 1,
        default: 1,
        description: 'Number of passengers'
      }
    },
    required: ['origin', 'destination', 'date']
  },
  handler: async (params) => {
    const results = await fetch('/api/flights', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    });
    return await results.json();
  }
});

Providing Model Context

Beyond tools, you can expose structured data about the current page state:

// Expose the current page state to agents
navigator.modelContext.setContext({
  pageType: 'flight-search-results',
  currentPage: 1,
  totalResults: 47,
  filters: {
    maxPrice: 500,
    airlines: ['Delta', 'United'],
    stops: 'nonstop'
  },
  tripType: 'round-trip',
  currency: 'USD'
});

Tool Discovery

Agents discover your tools by querying the browser. The browser returns the full tool manifest:

// This is what the agent does internally:
const tools = await navigator.modelContext.getTools();
// Returns: [{ name: 'searchFlights', description: '...', parameters: {...} }, ...]

const context = await navigator.modelContext.getContext();
// Returns: { pageType: 'flight-search-results', currentPage: 1, ... }

Tool Execution Events

WebMCP fires events when tools are called, letting you track agent usage:

navigator.modelContext.addEventListener('toolinvoke', (event) => {
  console.log(`Agent invoked tool: ${event.detail.toolName}`);
  console.log(`Parameters:`, event.detail.parameters);
  console.log(`Execution ID: ${event.detail.executionId}`);
  
  // You could log agent interactions for analytics
});

WebMCP Declarative API: HTML Annotations

The Declarative API lets you annotate existing HTML elements with WebMCP metadata. This is ideal when you want to expose form functionality without writing custom JavaScript tool handlers.

<form data-mcp-tool="bookHotel" data-mcp-description="Book a hotel room">
  <label>Hotel Name</label>
  <input type="text" name="hotelId"
         data-mcp-param="hotelId"
         data-mcp-type="string"
         data-mcp-description="Hotel identifier from search results">

  <label>Check-in Date</label>
  <input type="date" name="checkin"
         data-mcp-param="checkin"
         data-mcp-type="date"
         data-mcp-description="Check-in date">

  <label>Check-out Date</label>
  <input type="date" name="checkout"
         data-mcp-param="checkout"
         data-mcp-type="date"
         data-mcp-description="Check-out date">

  <label>Guests</label>
  <input type="number" name="guests"
         data-mcp-param="guests"
         data-mcp-type="integer"
         data-mcp-description="Number of guests"
         data-mcp-default="1">

  <button type="submit">Book Now</button>
</form>

With the Declarative API, the browser automatically generates tool definitions from your HTML annotations. The agent sees the same tool (bookHotel) with the same parameters, but you didn't write a single line of JavaScript beyond your normal form handler.

Real-World Use Cases

1. E-Commerce: One-Click Agent Purchases

An AI shopping assistant can browse multiple stores, find the best price for a product, and complete the purchase through WebMCP tools — without the user ever visiting each store manually.

// Agent workflow across stores
const results = [];
for (const store of stores) {
  // Agent calls searchProduct on each store
  const items = await agent.invokeTool(store, 'searchProduct', {
    query: 'iPhone 16 Pro',
    maxPrice: 1200
  });
  results.push(...items);
}
// Agent sorts by price and calls checkout on the best store
await agent.invokeTool(bestStore, 'checkout', {
  productId: results[0].id,
  shippingAddress: user.address,
  paymentMethodId: user.preferredCard
});

2. Travel Booking: Multi-Step Workflows

"Book me a trip to Tokyo" triggers a chain: search flights → search hotels → compare options → reserve. Each step calls a different tool on the same website, with the agent choosing the optimal combination.

3. Customer Support: Automated Issue Resolution

A customer asks their AI assistant "What's my order status?" The assistant navigates to the retailer's site, calls getOrderStatus(orderId) via WebMCP, and returns the result conversationally. If the order is delayed, it can call initiateReturn(orderId) or contactSupport(orderId, message).

4. Analytics Dashboards: Natural Language Queries

"Show me last month's conversion rate by traffic source" — the agent queries the analytics dashboard's tools, aggregates the data, and presents it in a human-readable format. The dashboard exposes tools like queryMetrics(metric, dimensions, dateRange, filters).

5. SaaS Platforms: Cross-App Workflows

"Create a new project in Asana, add tasks from this Google Doc, and invite the team" — an agent orchestrates across multiple SaaS tools, each exposing its tools via WebMCP.

Security and Permissions

Permissions Policy

WebMCP supports the Permissions Policy header, giving you control over which origins can access your tools. This is critical for cross-origin iframe scenarios:

Permissions-Policy: web-mcp=(self "https://trusted-agent.com")

Security Principles

• You control the tools: Only the tools you explicitly register are exposed. Nothing else.
• Same-origin security: Agents operate within the same security context as page JavaScript — no elevated privileges
• User confirmation: Design destructive operations (deletions, payments) to require user confirmation
• Self-revoke: You can unregister tools at any time with navigator.modelContext.unregisterTool(toolName)
• No implicit data exposure: WebMCP doesn't expose your DOM or page content — only what you explicitly declare

Best Practices for WebMCP Implementation

1. Design Tools, Not Endpoints

Each tool should represent a user intent, not an API endpoint. Instead of getProductData + getPricingData + getAvailabilityData, create one searchProducts(query, filters) tool that returns everything an agent needs to make a decision.

2. Progressive Enhancement First

Your site must work perfectly without WebMCP. The agent layer is an enhancement, not a requirement. Test your site with WebMCP disabled — if it breaks, you've done it wrong.

3. Write Clear Tool Descriptions

Tool names and descriptions are what agents use to choose the right tool. Be explicit:

• Bad: process(data)
• Good: searchFlights(origin, destination, date, passengers)
• Description: "Search for available flights between two airports. Returns departure/arrival times, airline, price, and seats available."

4. Handle Errors Gracefully

Return structured errors so the agent can recover. If a flight search returns no results, the agent should know it's a "no results" vs "server error" vs "invalid parameters" situation:

handler: async (params) => {
  try {
    const data = await searchFlightsApi(params);
    return {
      success: true,
      results: data,
      totalCount: data.length
    };
  } catch (error) {
    return {
      success: false,
      error: {
        code: 'NO_RESULTS',
        message: 'No flights found for the given criteria',
        suggestion: 'Try different dates or nearby airports'
      }
    };
  }
}

5. Version Your Tools

As your site evolves, tools may change. Use the tool name to communicate versioning: searchFlights_v2 or include version in your tool definition metadata if supported.

Browser Support and Limitations

Current Status

• Chrome: Developer trial (May 2026) — enable via flag or origin trial
• Other browsers: Not yet available. WebMCP is in early proposal stage
• Standardization: Proposed via WICG (Web Incubator Community Group) as an open web standard

Known Limitations

• Tools run in the page context — no background/service worker execution
• Cross-origin iframes require explicit permissions policy
• API surface may change before standardization — don't depend on undocumented behavior
• No built-in queuing — agents calling tools concurrently may race on shared state

Testing and Debugging WebMCP

Chrome provides an Inspector Extension that lets you imitate agent chat and test your tools without writing a separate agent application. You can:

• View all registered tools and their JSON schemas
• Call tools manually with custom parameters
• Inspect the current model context
• Monitor tool invocation events in real-time

Open Chrome DevTools, look for the "WebMCP" panel (available under the "AI" section when the flag is enabled). From there, you can interact with your tools as if you were an AI agent.

WebMCP and the Future of the Web

WebMCP is more than just another API — it's a fundamental rethinking of how websites interact with non-human visitors. As AI agents become the primary interface for more and more users (booking travel, shopping, managing tasks), websites that expose structured, agent-friendly tool interfaces will have a significant competitive advantage.

For SEO and discoverability: Just as semantic HTML helped search engines understand web content in the 2000s, WebMCP helps AI agents understand web functionality in the 2020s. A website with well-defined WebMCP tools is more likely to be used by agents on behalf of users — effectively a new form of agent-side discoverability.

For web developers: This is a new skill to learn, but the fundamentals are familiar. If you've written REST APIs, you can write WebMCP tools. If you've used structured data (JSON-LD) for SEO, you understand the concept of machine-readable metadata. WebMCP applies the same principle to functionality.

The combination of Chrome's Built-in AI (Prompt API with on-device Gemini Nano) with WebMCP is particularly powerful. A user's browser can run a local AI agent that understands your website's tools natively, executes them on-device, and returns results — all without any server calls to third-party AI providers. For a deeper dive into browser-native AI, see my Chrome Prompt API guide. To understand the JavaScript platform features powering these modern APIs, read the ES2026 Complete Guide.

FAQ

Ready to Make Your Site Agent-Ready?

WebMCP represents a major shift in how websites will interact with AI agents. The early adopters — websites that invest in structured, agent-friendly interfaces now — will have a significant advantage as AI-driven browsing becomes mainstream.

I'm a full-stack developer with deep experience in modern web APIs, browser technologies, and AI integration. If you're planning to make your website agent-ready with WebMCP or exploring how AI will impact your web strategy, let's talk — I provide free initial consultations.