Everything you need to understand and implement WebMCP on your site. From the basics to production-ready implementations.
WebMCP is a browser-native API that allows websites to expose structured tools directly to AI agents — without scraping, screenshots, or DOM manipulation. Instead of an AI agent trying to "click buttons" on your site, WebMCP lets you define exactly what the agent can do and what data it can access. The agent calls your tools directly, like an API. WebMCP is currently available in Chrome 146+ via the Early Preview Program.
WebMCP requires Chrome 146 or later with the experimental flag enabled.
// Step 1: Open Chrome 146+
// Step 2: Navigate to chrome://flags
// Step 3: Search for "WebMCP" or "Experimental Web Platform features"
// Step 4: Enable the flag and relaunch Chrome
// Verify WebMCP is available:
if (typeof navigator.modelContext !== "undefined") {
console.log("WebMCP is available!");
} else {
console.log("WebMCP not available. Check Chrome version and flags.");
}Use the imperative API to register tools with WebMCP. Each tool needs a name, description, JSON Schema for parameters, and a handler function.
// Register a tool using the imperative API
navigator.modelContext.registerTool(
"get_business_hours", // Tool name
"Get the business hours and whether we are currently open.", // Description
{ // JSON Schema for parameters
type: "object",
properties: {
day: {
type: "string",
description: "Specific day to get hours for (optional)"
}
}
},
async (params) => { // Handler function
const hours = {
monday: "8am - 6pm",
tuesday: "8am - 6pm",
// ...
sunday: "Closed"
};
if (params.day) {
return { day: params.day, hours: hours[params.day.toLowerCase()] };
}
return { hours, isOpen: true }; // Add real open/closed logic
}
);
console.log("Tool registered with WebMCP!");WebMCP also supports a declarative approach using HTML form attributes. This is simpler but less flexible than the imperative API.
<!-- Declarative WebMCP using HTML attributes -->
<!-- Add webmcp attributes to your existing forms -->
<form
webmcp-name="contact_form"
webmcp-description="Submit a contact inquiry to the business"
action="/contact"
method="POST"
>
<input
name="name"
webmcp-description="Customer's full name"
type="text"
/>
<input
name="email"
webmcp-description="Customer's email address"
type="email"
/>
<textarea
name="message"
webmcp-description="The inquiry message"
></textarea>
<button type="submit">Send</button>
</form>
<!-- AI agents can now fill and submit this form programmatically -->Understanding where WebMCP fits in the evolution of web discoverability: SEO (Search Engine Optimisation): Optimise your site so Google finds and ranks it. You are optimising for crawlers and algorithms. This is established practice. AEO (Answer Engine Optimisation): Optimise your content so AI assistants like ChatGPT and Perplexity cite you in their answers. You structure content for AI extraction. GEO (Generative Engine Optimisation): Go further — make your site the authoritative source that AI models quote and reference. Build E-E-A-T signals that AI trusts. WebMCP: The next evolution. Instead of just being found or cited, your site becomes something AI agents can actively use. They can book appointments, search your products, check your hours — all without a human in the loop.
These are related but distinct technologies:
// MCP (Model Context Protocol) — Server-side
// - Runs as a standalone server process
// - Connects to Claude Desktop, Claude Code, etc.
// - Requires server infrastructure
// - Used for: file systems, databases, APIs, internal tools
// - Config: claude_desktop_config.json
// Example MCP server config:
{
"mcpServers": {
"my-server": {
"command": "node",
"args": ["/path/to/server.js"],
"env": { "API_KEY": "..." }
}
}
}
// WebMCP — Browser-side
// - Runs directly in the browser (no server needed)
// - Connects to AI agents browsing the web
// - Zero infrastructure required
// - Used for: websites, web apps, e-commerce, local business
// - Config: JavaScript in your site's HTML
// Example WebMCP registration:
navigator.modelContext.registerTool(
"search_products",
"Search our product catalog",
{ type: "object", properties: { query: { type: "string" } } },
async ({ query }) => await searchProducts(query)
);Open the sandbox and start building your WebMCP implementation using one of our pre-built templates.