What is WebMCP? The W3C Standard That Makes Websites AI-Agent Ready
The web was designed for humans. Forms, buttons, and links all assume a person is clicking, typing, and reading. But AI agents are now browsing the web on behalf of users — booking flights, filling out applications, comparing prices. And the vast majority of websites are completely opaque to them.
WebMCP (Web Model Context Protocol) is the W3C standard that changes this. Shipped in Chrome 146 Canary in February 2026 and backed by Google and Microsoft, WebMCP gives websites a native browser API to expose their interactive capabilities to AI agents in a structured, permission-controlled way.
The Problem: AI Agents Are Blind
When an AI agent visits a website today, it sees raw HTML. A search form is just an <input> element with no clear indication of what it does, what parameters it accepts, or what will happen when it's submitted. The agent has to guess — and guessing means errors, hallucinations, and failed tasks.
Consider a hotel booking form. A human sees labels, date pickers, and a "Book Now" button. An AI agent sees a soup of DOM nodes. It doesn't know which field is the check-in date, which is check-out, or that the form requires both before submission.
The Solution: navigator.modelContext
WebMCP introduces the navigator.modelContext API. This is a browser-native interface that lets websites declare what tools, actions, and resources they offer — in a format AI agents understand natively. Think of it as a menu for robots: structured, typed, and discoverable.
There are two ways to implement WebMCP: declarative (HTML attributes) and imperative (JavaScript API).
Approach 1: Declarative (HTML Attributes)
The simplest approach. Add attributes directly to your existing HTML form elements:
<form tool-name="hotel-search"
tool-description="Search for available hotel rooms">
<input name="destination"
tool-param-description="City or hotel name"
type="text" required>
<input name="checkin"
tool-param-description="Check-in date (YYYY-MM-DD)"
type="date" required>
<input name="checkout"
tool-param-description="Check-out date (YYYY-MM-DD)"
type="date" required>
<select name="guests"
tool-param-description="Number of guests (1-10)">
<option value="1">1</option>
<option value="2">2 (default)</option>
</select>
<button type="submit">Search</button>
</form>The key attributes are tool-name, tool-description, and tool-param-description. These tell AI agents exactly what each form and field does. No JavaScript required — it works with server-rendered HTML, WordPress sites, and static pages.
Approach 2: Imperative (JavaScript API)
For more complex interactions — multi-step workflows, dynamic actions, or tools that don't map to a form — use the JavaScript API:
navigator.modelContext.registerTool({
name: "book-hotel-room",
description: "Book a hotel room with specified dates and guests",
parameters: {
type: "object",
properties: {
destination: {
type: "string",
description: "City or hotel name"
},
checkin: {
type: "string",
description: "Check-in date in YYYY-MM-DD format"
},
checkout: {
type: "string",
description: "Check-out date in YYYY-MM-DD format"
},
guests: {
type: "number",
description: "Number of guests",
minimum: 1,
maximum: 10
}
},
required: ["destination", "checkin", "checkout"]
},
handler: async (params) => {
// Your booking logic here
const result = await bookRoom(params);
return { confirmation: result.id };
}
});The imperative API uses JSON Schema for parameter definitions — the same format used by OpenAI function calling, MCP servers, and most AI tool ecosystems. This means AI agents already know how to work with it.
Declarative vs. Imperative: When to Use Each
- Declarative — Best for existing HTML forms. Zero JavaScript. Works with SSR, CMS, and static sites. Quick to implement. Limited to form-based interactions.
- Imperative — Best for complex tools, multi-step workflows, and dynamic actions. Requires JavaScript. More powerful and flexible. Supports custom return values.
- Both — You can use both on the same page. Declarative for forms, imperative for custom tools. The agent sees all registered tools together.
How AI Agents Discover Your Tools
When an AI agent (like one built into Chrome, or a browser extension) loads your page, it checks navigator.modelContext for registered tools. The browser exposes:
- Tool names and descriptions — so the agent knows what's available
- Parameter schemas — so the agent knows what data to provide
- Execution handlers — so the agent can call tools with proper parameters
The agent then matches user intent ("book me a hotel in Paris for next weekend") to the available tools, fills in the parameters, and executes — all without screen-scraping or DOM guessing.
Why This Matters for Website Owners
AI agents are rapidly becoming a primary way users interact with the web. Google's Project Mariner, OpenAI's Operator, and Anthropic's computer use feature all browse the web on behalf of users. If your site isn't WebMCP-ready, these agents will struggle with it — and users will choose competitors whose sites work seamlessly.
Key insight: WebMCP is to AI agents what semantic HTML was to screen readers. It's an accessibility layer that makes your site usable by a new class of users — automated ones.
Early adopters gain a significant advantage. As browser-native AI features roll out through 2026 and 2027, websites with WebMCP support will be the ones AI agents recommend, use, and send traffic to.
Getting Started
The fastest way to assess your current WebMCP readiness is to run an audit. AgentReady scans your pages, identifies forms that lack WebMCP attributes, and generates the exact code you need — both declarative HTML and imperative JavaScript.
For most sites, adding WebMCP support takes under an hour. For a WordPress site with a contact form, it can take five minutes.
Check your WebMCP readiness
Scan your website and get a detailed report with auto-generated fix code.
Scan Your Site Free