--- title: "WebMCP 2026: Make Your Website AI-Agent-Ready (3 Layers, 2 APIs)" description: "Google and Microsoft changed the web with WebMCP. The 3 layers, 2 APIs and the one goal: make your website usable for AI agents, with copy-paste code examples." author: "Matthias Meyer" published: 2026-02-27 updated: 2026-02-27 language: en tags: ["webmcp", "ai-ready", "agents-json", "w3c", "chrome-146", "agent-discovery", "a2a"] canonical: "https://studiomeyer.io/en/blog/webmcp-website-ai-agent-ready" markdown_versions: ["https://studiomeyer.io/de/blog/webmcp-website-ai-agent-ready.md", "https://studiomeyer.io/en/blog/webmcp-website-ai-agent-ready.md", "https://studiomeyer.io/es/blog/webmcp-website-ai-agent-ready.md"] publisher: "StudioMeyer, https://studiomeyer.io (llms.txt: https://studiomeyer.io/llms.txt)" --- # WebMCP 2026: Make Your Website AI-Agent-Ready (3 Layers, 2 APIs) In February 2026, Google and Microsoft quietly changed the web. The new W3C standard **WebMCP** (Web Model Context Protocol) allows websites to expose their functionality as structured tools for AI agents. No scraping, no screenshot guessing, no fragile browser automations. Instead: a clear menu that your website offers to every AI assistant. This article explains what WebMCP is, how it differs from backend MCP, and what you need to do now to prepare your website for the agentic web era. ## Why This Matters AI agents are the new visitors. ChatGPT, Claude, Gemini, Perplexity, and browser assistants are already crawling websites -- but so far, blindly. They take screenshots, guess where buttons are, and break when layouts change. WebMCP ends the guessing. Your website tells the agent directly: "Here are my capabilities. Call them like this." ### The Numbers - **Chrome 146** has WebMCP since February 2026 as preview (stable around March 2026) - **Microsoft Edge** follows (Microsoft co-authored the standard) - **97.1%** of all MCP tool descriptions have at least one quality issue according to a recent study -- getting it right makes you stand out - Less than **1% of all websites** have implemented agents.json -- massive first-mover advantage ## WebMCP vs. MCP: Two Standards, One Goal The terms sound similar but are different: | | MCP (Anthropic) | WebMCP (W3C) | |---|---|---| | **Where** | Backend servers | Browser (client-side) | | **How** | JSON-RPC over HTTP/stdio | `navigator.modelContext` API | | **Who uses it** | Claude, ChatGPT, Cursor, VS Code | Browser AI, Gemini, integrated assistants | | **Focus** | Tool calls to servers | Website capabilities in the browser | **Both are complementary.** An AI-Ready website ideally implements both: 1. **Backend (MCP):** `agents.json` + `agent-card.json` for tool discovery 2. **Frontend (WebMCP):** `navigator.modelContext` for browser-native interaction ## The Two APIs of WebMCP ### 1. Declarative API (HTML Attributes) The simplest way to make forms accessible to AI agents. No JavaScript knowledge required: ```html
``` The browser automatically recognizes the form fields and exposes them as a tool. An AI agent can then say: "Reserve a table for 4 on Friday" -- and the form gets filled structurally. ### 2. Imperative API (JavaScript) For more complex tools with validation, API calls, and dynamic behavior: ```javascript navigator.modelContext.registerTool({ name: "search_properties", description: "Search available properties by location, price and type", inputSchema: { type: "object", properties: { location: { type: "string", description: "City or district" }, maxPrice: { type: "number", description: "Maximum price in EUR" }, type: { type: "string", enum: ["apartment", "house", "commercial"] } } }, annotations: { readOnlyHint: true, idempotentHint: true }, handler: async (params) => { const res = await fetch(`/api/v1/listings?${new URLSearchParams(params)}`); return res.json(); } }); ``` ### Annotations: Safety Built In The `annotations` tell the AI agent how to handle each tool: - **readOnlyHint:** "This tool only reads data" -- agent can invoke it without asking - **destructiveHint:** "This tool deletes/modifies data" -- agent should ask the user first - **requiresConfirmation:** "User must confirm" -- for bookings, orders, contact forms ## The 3 Layers of an AI-Ready Website ### Layer 1: Discovery (agents.json) A JSON file at `/.well-known/agents.json` that describes what your website can do: ```json { "schema_version": "1.0", "name": "My Restaurant", "tools": [ { "name": "get_menu", "description": "Browse the menu with categories and prices", "endpoint": "/api/v1/menu", "method": "GET" }, { "name": "make_reservation", "description": "Reserve a table", "endpoint": "/api/v1/reservation", "method": "POST" } ] } ``` AI agents like ChatGPT and Claude check this file automatically. When a user asks "Find me a restaurant with vegan options and reserve for Saturday", the agent can find your website AND take action directly. ### Layer 2: Agent-to-Agent (agent-card.json) The A2A protocol (Agent-to-Agent) enables communication between AI agents: ```json { "name": "My Restaurant", "protocolVersion": "1.0", "skills": [ { "id": "reservation", "name": "Table Reservation", "description": "Book a table for dining", "tags": ["booking", "restaurant", "reservation"] } ] } ``` ### Layer 3: Browser-Native Tools (WebMCP) The `navigator.modelContext` API registers tools directly in the browser. Works with browser assistants, Google Gemini, and future integrated AI features. ## What You Should Do Now ### Immediately (Effort: 1-2 hours) 1. **Create agents.json** -- Describe 3-5 core actions of your website 2. **Create agent-card.json** -- A2A skills for the most important features 3. **Deploy both under `/.well-known/`** with CORS headers (`Access-Control-Allow-Origin: *`) ### This Week (Effort: half a day) 4. **WebMCP Declarative API** -- `data-mcp-tool` attributes on your most important forms 5. **Check Structured Data** -- JSON-LD (Schema.org) is the foundation for everything 6. **Check your AI-Ready Score** -- [studiomeyer.io/website-check](https://studiomeyer.io/website-check) offers a free check ### This Month 7. **WebMCP Imperative API** -- JavaScript tools for more complex workflows 8. **Optimize tool descriptions** -- Clear, precise, with return value descriptions 9. **Add analytics** -- Track which tools agents use ## Industry-Specific Examples ### Restaurant - `get_menu` (menu with allergens) - `check_availability` (check table availability) - `make_reservation` (reserve a table) ### Real Estate - `search_listings` (filter properties by price, location, size) - `get_property_details` (listing with photos and floor plan) - `request_viewing` (book a viewing) ### Trades & Services - `get_services` (services and pricing) - `request_quote` (request a quote) - `check_availability` (next available appointment) ## The AI-Ready Score We have extended the AI-Ready Score. In addition to classic SEO and performance checks, there is now an **Agent Discovery Bonus** (up to 10 extra points): | Check | Points | |---|---| | agents.json reachable + valid | 5 | | agent-card.json with A2A skills | 3 | | WebMCP Declarative attributes | 2 | | **Maximum** | **110/110** | Websites with full AI agent integration receive the grade **A++** -- less than 1% of all websites reach this level. **Free check:** Test your website at `studiomeyer.io` with our AI-Ready tool. ## Conclusion WebMCP is to AI agents what responsive design was to mobile devices: First optional, then expected, then required. The websites that build their tool interfaces now will be the ones AI agents prefer to use. The good news: Getting started is simple. An `agents.json`, a few HTML attributes, and your website speaks the language of AI. --- *StudioMeyer helps businesses make their websites AI-Ready. From agents.json to full WebMCP integration -- as part of our premium website packages or as a one-time AI-Ready upgrade for existing websites.* ## Read more, WebMCP - [WebMCP Reality Check: Where the Spec Actually Stands](https://studiomeyer.io/en/blog/webmcp-reality-check-may-2026.md) - [What Is WebMCP? The New Language Between Websites and AI](https://studiomeyer.io/en/blog/was-ist-webmcp.md) - [AI-Ready in 5 Days: WebMCP Installation for Your Website](https://studiomeyer.io/en/blog/webmcp-ai-ready-installation.md)