{"slug": "webmcp-make-your-website-ai-agent-ready-in-chrome-149", "title": "WebMCP: Make Your Website AI-Agent-Ready in Chrome 149", "summary": "Google and Microsoft co-developed WebMCP, a proposed W3C browser standard now in a public origin trial in Chrome 149, to make websites natively compatible with AI agents. The standard lets developers declare structured, callable actions via HTML or JavaScript, replacing DOM scraping. Shopify, Expedia, and Target are already testing it.", "body_md": "Your website is already broken for AI agents. It just hasn’t mattered yet. Agents that try to book a flight, file a support ticket, or add an item to a cart are left scraping DOM elements, guessing at form fields, and hoping the CSS selectors don’t change between requests. Google’s answer is **WebMCP** — a proposed W3C browser standard, co-developed with Microsoft, now in a public origin trial in Chrome 149. [Official Chrome docs are live](https://developer.chrome.com/docs/ai/webmcp), Shopify, Expedia, and Target are already testing it, and the tooling to get started takes about 10 minutes. Here’s what it does and how to implement it.\n\n## What WebMCP Is\n\nWebMCP extends the browser’s Navigator interface with a new `navigator.modelContext`\n\nobject. Instead of making an agent reverse-engineer your UI, you declare the actions it’s allowed to take — as structured, callable tools — directly in your HTML or JavaScript. The agent discovers them, calls them with typed inputs, and gets structured outputs back.\n\nThe standard is available as an origin trial in Chrome 149 through Chrome 156, announced at Google I/O 2026. Before that, it was testable behind a Chrome flag. It requires HTTPS. It’s Chrome-only for now, with Microsoft involved in the W3C incubation — Edge support is the logical next step, though no timeline has been announced.\n\n## Two Ways to Implement It\n\nWebMCP offers two implementation paths. The declarative API requires no new JavaScript. The imperative API handles everything else.\n\n### Declarative: HTML Form Attributes\n\nAdd `toolname`\n\nand `tooldescription`\n\nto an existing HTML form. That’s it. The browser handles tool registration automatically.\n\n```\n\n \n \n \n \n \n \n \n\n```\n\nOptional: add `toolautosubmit`\n\nto let an agent submit the form without a user click. Use this only for read-only tools like search — not for anything that writes data or processes a payment.\n\n### Imperative: JavaScript API\n\nFor React or Vue components, AJAX-backed actions, or anything that isn’t a traditional HTML form, use `navigator.modelContext.registerTool()`\n\n. Always guard the call — the API only exists in Chrome 146+.\n\n```\nif (navigator.modelContext) {\n navigator.modelContext.registerTool({\n name: \"addToCart\",\n description: \"Add a product to the shopping cart by SKU and quantity.\",\n inputSchema: {\n type: \"object\",\n properties: {\n sku: { type: \"string\", description: \"The product SKU identifier\" },\n quantity: { type: \"integer\", minimum: 1, default: 1 }\n },\n required: [\"sku\"]\n },\n execute: async ({ sku, quantity }) => {\n const res = await fetch(\"/api/cart\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ sku, quantity })\n });\n return res.ok\n ? { success: true }\n : { success: false, error: \"Cart update failed\" };\n }\n });\n}\n```\n\nThe `inputSchema`\n\nfollows JSON Schema. Descriptions matter — they’re what agents use to decide whether to call your tool and how to fill its parameters. Vague descriptions lead to incorrect tool calls.\n\n## WebMCP vs. Anthropic MCP: Different Problems\n\nThe naming is confusing, and the confusion is worth clearing up. [Anthropic’s Model Context Protocol](https://modelcontextprotocol.io/) connects an AI platform to your *server* — think Claude accessing your database through a VS Code extension, or a custom agent reading files via an MCP server you deploy. WebMCP connects a browser agent to your *website UI* during an active user session.\n\n| Aspect | Anthropic MCP | WebMCP |\n|---|---|---|\n| Where it runs | Server (backend) | Browser (client-side) |\n| What it connects | AI platform to your server | Browser agent to your website |\n| Deployment | Separate MCP server | HTML attributes or JavaScript |\n| Current status | Mature, widely adopted | Chrome 149 origin trial |\n\nThey’re not competing. A well-built AI-ready product uses both: MCP for backend data access, WebMCP for in-browser actions. The overlap is minimal; the combined capability is significant.\n\n## Who’s Already in the Trial\n\nGoogle announced early WebMCP partners at I/O 2026: Expedia, Booking.com, Shopify, Etsy, Instacart, Redfin, Target, TurboTax, and Credit Karma. American Express launched Agentic Commerce Experiences with Delta, Expedia, and Hilton as flagship partners. Walmart, Sephora, Best Buy, Home Depot, and Wayfair are also in early testing.\n\nThese aren’t exploratory bets. When every major e-commerce and travel platform is building this in parallel, the question stops being *whether* to implement WebMCP and starts being *when*. For smaller teams, the opportunity is the same — and the implementation cost is lower than most expect.\n\n## One Security Issue to Know Before You Ship\n\nSecurity researchers published [a paper on “Tool Surface Poisoning”](https://arxiv.org/abs/2606.06387) — malicious tool definitions that embed hidden instructions designed to hijack agent behavior. The most dangerous variant is Mid-Session Tool Injection (MSTI), where a third-party script injects rogue tools into a page during an active session.\n\nFor site owners: audit which third-party scripts load on pages where you register WebMCP tools. For agent developers: validate tool origins before calling them — don’t trust all registered tools blindly. [Google’s agent security documentation](https://developer.chrome.com/docs/agents/security) covers mitigations in detail.\n\n## What to Do Now\n\nThe origin trial is open. Here’s the minimum path to get started:\n\n- Enable WebMCP locally: open\n`chrome://flags/#enable-webmcp-testing`\n\nin Chrome, set it to Enabled, relaunch. - Install Google’s Model Context Tool Inspector extension to test your tools against Gemini without building a full agent.\n- Pick one existing form on your site and add\n`toolname`\n\nand`tooldescription`\n\nattributes. - Register for the\n[Chrome 149 origin trial](https://developer.chrome.com/blog/ai-webmcp-origin-trial)to enable WebMCP for real users without requiring them to change browser settings.\n\nWebMCP won’t replace your REST API. It won’t replace your MCP server. What it will do is give every browser-based agent that visits your site a clean, typed interface instead of a DOM to scrape. That’s a meaningful upgrade — for agents, and for the users who send them.", "url": "https://wpnews.pro/news/webmcp-make-your-website-ai-agent-ready-in-chrome-149", "canonical_source": "https://byteiota.com/webmcp-chrome-ai-agent-standard-2/", "published_at": "2026-07-03 15:08:46+00:00", "updated_at": "2026-07-03 21:25:42.982103+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "ai-infrastructure", "ai-products", "developer-tools"], "entities": ["Google", "Microsoft", "Shopify", "Expedia", "Target", "Chrome", "W3C", "Anthropic"], "alternates": {"html": "https://wpnews.pro/news/webmcp-make-your-website-ai-agent-ready-in-chrome-149", "markdown": "https://wpnews.pro/news/webmcp-make-your-website-ai-agent-ready-in-chrome-149.md", "text": "https://wpnews.pro/news/webmcp-make-your-website-ai-agent-ready-in-chrome-149.txt", "jsonld": "https://wpnews.pro/news/webmcp-make-your-website-ai-agent-ready-in-chrome-149.jsonld"}}