The web is about to change — again. For 30 years, websites have been built for humans. We design pages with buttons, forms, and navigation menus that people can see, click, and interact with. But what happens when the user isn't a person — it's an **AI agent**? That's the problem **WebMCP** solves. --- ## What is WebMCP? **WebMCP** (Web Model Context Protocol) is a new W3C standard that lets websites expose structured "tools" to AI agents running in the browser. Instead of an AI agent trying to scrape your page, guess which buttons to click, or parse unstructured HTML, your website can directly tell the agent: *"Here are the things you can do, here's what each one needs, and here's how to invoke them."* Think of it this way: - **Before WebMCP**: AI agents interact with websites like a person wearing a blindfold — they fumble through DOM elements, try to understand layout, and hope they're clicking the right thing. - **After WebMCP**: AI agents see a clean menu of available actions, complete with descriptions, required inputs, and expected outputs. No guessing. No scraping. ### The Official Definition WebMCP is a **browser-native API** developed by Google and Microsoft under the W3C Web Machine Learning Community Group. It provides two ways for websites to register tools: 1. **Declarative API** — Add HTML attributes to existing `

` elements 2. **Imperative API** — Use JavaScript to register tools via `navigator.modelContext` Both approaches let AI agents discover and invoke website functionality without any screen scraping or DOM manipulation. --- ## Why Does WebMCP Matter? ### 1. AI Agents Are Coming to Every Browser Google Chrome 146 (released February 2026) includes the first early preview of WebMCP. Microsoft Edge is following. Within a year, every major browser will support it. This means billions of users will have AI agents that can interact with websites — but only if those websites speak WebMCP. ### 2. It's the HTTP of the AI Web Remember when websites didn't have SSL certificates? Google started penalizing them in search rankings, and within a few years, HTTPS became mandatory. WebMCP is following the same trajectory: - **2026**: Early adopters gain a competitive edge - **2027**: AI agents become mainstream; non-WebMCP sites get bypassed - **2028+**: WebMCP becomes as expected as HTTPS is today ### 3. Zero Extra Authentication Unlike server-side protocols (like Anthropic's MCP), WebMCP runs in the browser and **reuses the user's existing session**. If a user is logged into your site, the AI agent automatically has the same access. No OAuth flows, no API keys, no separate authentication. ### 4. It Works with Existing Websites The Declarative API is designed to work with **zero JavaScript changes**. If your website already has `` elements, you can make them AI-accessible by adding just three HTML attributes. We'll show you how below. --- ## How WebMCP Works ### The Two APIs #### Declarative API (HTML Attributes) The simplest way to implement WebMCP. Just add attributes to your existing forms: ```html

``` That's it. No JavaScript needed. The browser reads these attributes, registers the tool with its built-in AI agent, and the agent can fill in the fields and submit the form just like a human would. **Key attributes:** - `toolname` — A unique, verb-based name for the action (e.g., `searchProducts`, `bookFlight`) - `tooldescription` — A clear description of what the tool does (20+ characters recommended) - `toolautosubmit` — Allows the AI agent to submit the form without user confirmation #### Imperative API (JavaScript) For more complex interactions that don't map to simple forms: ```javascript await navigator.modelContext.registerTool({ name: "getWeatherForecast", description: "Get the 7-day weather forecast for any city", inputSchema: { type: "object", properties: { city: { type: "string", description: "City name" }, units: { type: "string", enum: ["celsius", "fahrenheit"] } }, required: ["city"] }, handler: async ({ city, units }) => { const data = await fetchWeather(city, units); return { forecast: data }; } }); ``` The Imperative API gives you full control over input validation, async operations, and response formatting. --- ## WebMCP vs Anthropic MCP A common question: *"How is WebMCP different from MCP (Model Context Protocol) by Anthropic?"* | Aspect | Anthropic MCP | WebMCP | |--------|--------------|--------| | **Runs where** | Server-side (Python/Node.js backend) | **Browser** (client-side JavaScript) | | **Communication** | JSON-RPC over stdio/HTTP | postMessage (browser-native) | | **Authentication** | Requires separate OAuth/API keys | **Reuses browser session** | | **Purpose** | Connect AI ↔ backend services | Connect AI ↔ web pages | | **Complexity** | Requires server setup | **Zero-config with Declarative API** | **They're complementary, not competing.** MCP connects AI agents to your backend APIs. WebMCP connects AI agents to your frontend UI. A fully AI-ready website uses both. --- ## How to Check Your Website's WebMCP Score Want to know if your website is ready for AI agents? **WebMCP Verify** scans your site against 15 criteria across four categories: - **WebMCP Tool Registration** (40%) — Are your forms and tools properly registered? - **AI Discoverability** (30%) — Can AI agents find your site through structured data, llms.txt, and meta tags? - **Security & Compatibility** (20%) — Is your site served over HTTPS with compatible CSP headers? - **Best Practices** (10%) — Are your tools well-named, well-described, and properly annotated? [Check your WebMCP score now →](https://webmcpverify.com) It takes 30 seconds. No signup required. You'll get a letter grade (A+ to F) and actionable fix suggestions with code snippets. --- ## Getting Started with WebMCP ### Step 1: Audit Your Current Forms Look at every ` ``` ### Step 3: Enhance Your Input Fields Make sure your `` elements have: - `type` attribute (text, email, number, date, etc.) - `required` where appropriate - `pattern` for validation where helpful - `placeholder` with example values ### Step 4: Add AI Discoverability Beyond WebMCP tools, help AI agents find and understand your site: - Add **Schema.org JSON-LD** structured data - Create an **llms.txt** file at your domain root - Ensure **meta descriptions** are clear and informative - Check that **robots.txt** doesn't block AI crawlers ### Step 5: Verify Your Score Run your site through [WebMCP Verify](https://webmcpverify.com) to see how you score and what to improve. --- ## The Future of WebMCP WebMCP is still early. Chrome 146's implementation is behind a feature flag (`chrome://flags/#web-mcp`). But the trajectory is clear: - **Q1 2026**: Chrome 146 DevTrial (current) - **Q2-Q3 2026**: Chrome stable rollout, Edge follows - **Q4 2026**: Safari and Firefox begin implementation - **2027**: WebMCP becomes a standard expectation The websites that prepare now will have a massive head start. The ones that wait will be playing catch-up — just like sites that were late to mobile, late to HTTPS, or late to Core Web Vitals. --- ## Key Takeaways 1. **WebMCP is a new W3C standard** that lets websites expose tools to AI agents 2. **Two APIs**: Declarative (HTML attributes, zero JS) and Imperative (JavaScript, full control) 3. **Chrome 146** already supports it in early preview 4. **It complements, not replaces**, Anthropic's server-side MCP 5. **Start now**: Add `toolname`, `tooldescription`, and `toolautosubmit` to your forms 6. **Check your score**: Use [WebMCP Verify](https://webmcpverify.com) for a free 30-second audit The AI-agent web is coming. Make sure your website is ready.