A minimal demo app exploring WebMCP (Web Model Context Protocol) — the new W3C Draft (Feb 10, 2026) that lets websites expose structured tools to AI agents via navigator.modelContext.

Instead of AI agents scraping your DOM and clicking buttons, you declare what actions exist and how to call them. The agent gets a clean function interface; the user stays in control.

WebMCP brings Anthropic's MCP into the browser. Where MCP connects agents to backend services, WebMCP connects agents to in-page functionality — reusing the user's session, auth, and visual context.

// That's it. Your website now speaks to AI agents.
navigator.modelContext.provideContext({
  tools: [{
    name: "add_to_cart",
    description: "Add a product to the cart",
    inputSchema: { type: "object", properties: { productId: { type: "string" } }, required: ["productId"] },
    async execute({ productId }) {
      await cart.add(productId);
      return { content: [{ type: "text", text: `Added ${productId} to cart` }] };
    }
  }]
});

1. Clone and serve

git clone https://github.com/alecron/webmcp-demo.git
cd webmcp-demo
python3 -m http.server 8080

2. Open http://localhost:8080 in your browser.

3. Try the tools from the DevTools console:

await window.__webmcp_tools.add_note({ title: "Hello", content: "My first note", tag: "idea" })
await window.__webmcp_tools.list_notes({})
await window.__webmcp_tools.search_notes({ query: "hello" })
await window.__webmcp_tools.get_stats({})
await window.__webmcp_tools.delete_note({ id: 1 })

These are the same functions that a browser AI agent would call through navigator.modelContext — the console fallback lets you test without Chrome Canary.

For the real experience with an actual AI agent:

This demo registers 5 tools that manage a simple in-memory note collection:

Open app.js to see these WebMCP patterns in action:

• Feature detection — checks navigator.modelContext, then polyfill, then console fallback
• requestUserInteraction — delete_note pauses to ask the user for confirmation before proceeding
• annotations.readOnlyHint — marks get_stats as non-mutating so agents can call it freely
• Structured responses — tools return { content: [{ type: "text", text: "..." }] } per the spec
• Tool call log — every invocation (from agent or console) is rendered in the UI for observability

webmcp-demo/
├── index.html    # Page layout
├── style.css     # Dark-themed styling
├── app.js        # Application logic + WebMCP tool registration
├── AGENTS.md     # Full WebMCP knowledge base (API reference, patterns, spec details)
├── CLAUDE.md     # Points to AGENTS.md for AI context
└── README.md     # You are here

For a deep dive into the WebMCP API surface, implementation patterns, and spec details, see AGENTS.md.

• W3C WebMCP Spec
• WebMCP GitHub
• WebMCP Proposal
• MCP-B Polyfill
• Chrome's WebMCP makes AI agents stop pretending
• WebMCP: Making the web AI-agent ready