What Is WebMCP? When Websites Expose Tools to AI Agents

#What WebMCP Actually Solves (Website Owner's Perspective)

For the past two years, optimizing websites for AI has focused on being read and cited: this is AEO/GEO. WebMCP opens a new front—being operated. When an AI agent books a calendar, filters products, or fills out a multi-step form on behalf of a user, it must take action on the page, not just read it.

The way agents do this today is by "looking at the screen like a human": capturing a screenshot → sending it to a vision model → guessing the button location → clicking → capturing a new screenshot → repeating the loop. This process is fragile: a minor CSS tweak breaks it, every step incurs expensive token rounds, and the website itself has no idea what the agent is trying to achieve.

WebMCP reverses this dynamic. Instead of letting the agent reverse-engineer the user interface, the website actively declares what actions it can perform. The agent receives a list of tools with descriptions and parameter schemas (using JSON Schema), then invokes the exact tool it needs—in a single structured turn with minimal guesswork. The killer feature that standard backend MCP servers struggle to match: the web page already holds the user's login state, session data, and business logic. Because WebMCP runs directly in the browser, it leverages all of this natively without requiring a separate backend integration.

Comparing how AI agents operate websites—before vs. with WebMCP:

WebMCP flips the script: instead of the agent trying to reverse-engineer the UI, the website explicitly declares what it can do.

#Two Ways to Declare Tools: Declarative and Imperative

WebMCP offers two integration routes, depending on complexity:

• Declarative (via HTML forms). For actions that are naturally represented as forms—search, filtering, registration—you simply annotate your existing HTML form markup (adding tool names and descriptions) to expose it as a WebMCP tool. This requires minimal code and suits most content and e-commerce websites.
• Imperative (via JavaScript). For dynamic, multi-step workflows that require logic, you define the tools in JavaScript using navigator.modelContext.provideContext(...). Each tool features a name, description, an inputSchema (JSON Schema), and an execution handler. Syntactically, it mirrors how you define tools for OpenAI or Anthropic APIs—but it runs entirely client-side in the browser.

Website declares a tool for the AI agent, directly in the browser:

// Website declares a tool for the AI agent, directly in the browser
navigator.modelContext.provideContext({
  tools: [
    {
      name: "search_products",
      description: "Search products by keywords and maximum price",
      inputSchema: {
        type: "object",
        properties: {
          query: { type: "string" },
          maxPrice: { type: "number" },
        },
        required: ["query"],
      },
      async execute({ query, maxPrice }) {
        // Leverage the page's existing logic and session state
        const results = await store.search(query, { maxPrice });
        return { results };
      },
    },
  ],
});

The agent doesn't need to know where the "Search" button is on the screen; it reads search_products, sends parameters matching the schema, and receives a structured response.

#Security Boundaries (Do Not Skip)

Since WebMCP permits agents to execute actions on your page, security cannot be treated as an afterthought:

• Secure Contexts Only: Runs strictly under HTTPS and on origin-isolated documents. Tools will not be exposed on insecure HTTP pages.
• Web Security Alignment: Same-origin policies and CSP are enforced just like any other browser feature.
• Permission & Consent: Controlled via the tools Permissions Policy (defaults to self); cross-origin iframes must explicitly be granted access with allow="tools". This ensures you decide who is allowed to expose tools, rather than having them open by default.

My rule of thumb for delivery: any writing or irreversible tool must require human confirmation. Letting an agent search, filter, or view is fine; but "placing an order," "canceling a booking," or "making a payment" must involve a manual approval step, just as with any critical tool design.

#WebMCP Website Readiness Framework (4 Axes)

This is the work you can do right now, even while WebMCP is in preview—because it focuses on cleaning up your foundations, not gambling on an unfinished API. I evaluate readiness along four axes:

To sum it up: Without writing a single line of WebMCP code, you can prepare by mapping your tools, cleaning up your forms, and categorizing safety boundaries. Once the API stabilizes, integration becomes a straightforward technical task.

#Where WebMCP Fits in the Bigger Picture

These three complement rather than replace each other. AEO/GEO handles being read; WebMCP handles being operated. If you are optimizing to get cited by AI (see AEO/GEO website optimization), WebMCP is the next step: preparing for a future where agents do not just read, but act.

#Caution: It is Early, Don't Bet the Farm

To be frank: WebMCP is in preview. The API is subject to change, browser support is currently limited to Chrome (behind a flag), and other browser engines have not committed to timelines. Therefore:

• Do not allocate substantial budget to build WebMCP for production today—the spec is not finalized.
• Do not confuse WebMCP with standard backend MCP servers: one runs client-side in the browser, the other is on the backend.
• Do work on the 4-axis framework above—these improvements are valuable regardless of how WebMCP shapes up, and they position you to act fast when it goes mainstream.

This is exactly the type of window I like to prepare for: early enough to gain an edge, but with enough backing (Google, Microsoft, W3C, and a working implementation) to be more than just hype.

#Conclusion

WebMCP is the missing link between AI agents and the web, enabling agents to work on your pages without fumbling with the visual interface. For website owners, it is a reminder that "AI optimization" will soon evolve from getting cited to getting operated. There is no rush to code yet, but it is time to start thinking in the language of "tools": what does your site allow users to do, and which actions are safe for an agent to trigger?

To read further: the foundational MCP protocol is explained in Model Context Protocol and the advanced guide. When building agents that consume these tools, check out Claude Agent SDK vs Claude API vs Claude Code. The complete learning path is compiled at [/learn/claude?lang=en].

Nguyễn Phúc Nguyên Châu
Delivery Manager
14 years of delivery experience (Websites, Systems, AI Automation) for the Vietnam–Japan market