Google's WebMCP in Chrome 146: The Complete Developer Guide

What is WebMCP? (The Simple Explanation)

Imagine you're playing a video game. You have a controller with buttons labelled "Jump," "Run," and "Use Item." You know exactly what each button does because they're clearly labelled.

Right now, AI agents trying to use the web are like players with a blank, unlabelled controller. They see a screen full of buttons and links, but they have to guess what each one does based on its colour, shape, and the text around it. Sometimes they guess right, but a lot of the time, they get it wrong.

Why WebMCP Is a Game-Changer

For the past 20 years, the internet has been a two-way street between websites and humans. WebMCP turns it into a three-way intersection, adding AI agents as first-class citizens.

For Users: Superpowered Assistants

Your AI assistant will be able to book flights, order groceries, and file support tickets across any WebMCP-enabled site — without you ever having to visit them. Instead of just getting a list of links, your AI will complete tasks directly.

For Businesses: The Rise of Agent SEO (AEO)

Just like SEO made websites discoverable to search engines, AEO will make your services discoverable to AI agents. The first businesses in every category to implement WebMCP become the default choice for a generation of AI.

For Developers: No More Screen Scraping

The fragile, error-prone practice of writing bots that pretend to be humans is over. WebMCP provides a stable, official way to interact with websites programmatically. The web becomes a universal API.

How It Works: Under the Hood

WebMCP introduces two key mechanisms: a JavaScript API for registering tools, and a discovery manifest that tells agents your site supports WebMCP before they even load a page.

The Discovery Manifest: webmcp.json

Place a file at https://yoursite.com/.well-known/webmcp.json. This acts like a sitemap for AI agents — it tells them your site speaks WebMCP and lists your available tools.

{
  "name": "MCPHubz",
  "description": "The central registry for MCP servers and AI agent tools.",
  "tools": [
    {
      "name": "search_servers",
      "description": "Find MCP servers by keyword, category, or quality score.",
      "url": "/api/webmcp/search_servers"
    }
  ],
  "apiVersion": "1.0"
}

You can see our live implementation at mcphubz.com/.well-known/webmcp.json.

The JavaScript API: navigator.modelContext

Once on your page, agents access your tools through the navigator.modelContext object. You register tools using registerTool(), which tells the browser — and any visiting AI agent — exactly what your page can do.

The Imperative API: registerTool()

This is the most powerful way to expose a tool. Here is a real-world example — a product search tool with proper error handling:

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "Search for products by keyword, with optional filters 
      for category and price range. Returns matching items with 
      name, price, and availability.",
    inputSchema: {
      type: "object",
      properties: {
        keyword: {
          type: "string",
          description: "The search term, e.g., 'wireless headphones'."
        },
        category: {
          type: "string",
          enum: ["electronics", "clothing", "books"],
          description: "Limit search to a specific category."
        },
        max_price: {
          type: "number",
          description: "Maximum price in USD."
        }
      },
      required: ["keyword"]
    },
    execute: async (input) => {
      try {
        const response = await fetch(
          `/api/products?q=${encodeURIComponent(input.keyword)}`
        );
        if (!response.ok) throw new Error(`Status ${response.status}`);
        const products = await response.json();
        return { results: products };
      } catch (error) {
        throw new Error(`Search failed: ${error.message}`);
      }
    }
  });
}

• nameA unique, machine-readable identifier for your tool.
• descriptionA clear explanation of what the tool does. This is the core of AEO — the AI reads this to understand when and how to use your tool.
• inputSchemaA JSON Schema object defining the exact inputs the tool expects. This is the labelled controller.
• executeAn async function with your tool logic. Always handle errors — the AI needs to know when something goes wrong.

The Declarative API: toolname & tooldescription

For simple actions already handled by an HTML form, you can make it agent-ready with three HTML attributes — no JavaScript required. This is the official, spec-compliant approach confirmed in Google's own reference implementations at GoogleChromeLabs/webmcp-tools.

Add toolname and tooldescription to your <form> element, then add toolparamdescription to each input to tell the AI exactly what data to provide.

<form
  action="/api/subscribe"
  method="POST"
  toolname="subscribeToNewsletter"
  tooldescription="Subscribes a user to the MCPHubz weekly newsletter with WebMCP updates."
>
  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    name="email"
    required
    toolparamdescription="The email address of the user who wants to subscribe."
  >
  <button type="submit">Subscribe</button>
</form>

This is the fastest way to make your existing forms agent-ready. Any form on your site — contact forms, search forms, booking forms, checkout forms — can be exposed to AI agents in under two minutes.

How to Implement WebMCP Today (Step-by-Step)

navigator.modelContext

What We Found Testing It Live

We built and tested a live WebMCP demo at mcphubz.com/webmcp-test.html using Chrome Canary 146. Here is exactly what we found — no sugarcoating.

What Works Right Now

The navigator.modelContext.registerTool() API works perfectly. Tools register successfully, their full JSON schemas are stored, and the browser confirms the registration. Here is our demo with three tools registered:

mcphubz.com/webmcp-test.html — Chrome Canary 146 — WebMCP Active

Chrome Canary 146 confirming WebMCP is active with 3 tools registered. The full JSON schema for search_mcp_servers is visible.

All three tools visible — get_server_count and get_server_details

Scrolling down shows get_server_count (no parameters required) and get_server_details with its slug parameter schema.

What Is Still Being Built

We also found that navigator.modelContext.executeTool() is not yet implemented in this build. The tool registration API is the stable part right now — the execution API is coming in a future update. This means you can register your tools today so agents can discover them, but the browser-side execution will come later.

The Bottom Line

WebMCP is real, it works, and it is being actively built right now. The fact that some parts are still in progress is exactly what you would expect from a technology that is weeks old. Getting in now means your tools will be registered and ready the moment agents start using them.

The New Frontier: Agent SEO (AEO)

Just as meta descriptions and title tags helped search engines understand your pages, tool descriptions and input schemas will help AI agents understand your capabilities. AEO is about being the agent's first choice.

Good vs. Bad Tool Descriptions

The AEO Checklist