WebMCP: Native Browser API for AI Agent Interaction

Declarative API

HTML-based tool registration using form attributes. No JavaScript required for basic scenarios.

<form toolname="searchFlights"
      tooldescription="Search flights">
  <input name="origin" type="text"
         required pattern="[A-Z]{3}">
  <input name="destination" type="text"
         required pattern="[A-Z]{3}">
  <input name="date" type="date" required>
  <button type="submit">Search</button>
</form>

Imperative API

JavaScript-based dynamic tool registration with full programmatic control.

navigator.modelContext.registerTool({
  name: "searchFlights",
  description: "Search available flights",
  inputSchema: {
    type: "object",
    properties: {
      origin: {
        type: "string",
        pattern: "^[A-Z]{3}$"
      },
      destination: {
        type: "string",
        pattern: "^[A-Z]{3}$"
      },
      date: {
        type: "string",
        pattern: "^\\d{4}-\\d{2}-\\d{2}$"
      }
    },
    required: ["origin", "destination", "date"]
  },
  async execute({ origin, destination, date }) {
    const results = await flightAPI.search({
      origin, destination, date
    });
    return {
      content: [{
        type: "text",
        text: JSON.stringify(results)
      }]
    };
  }
});

Stability & Reliability

Tool contracts remain stable across UI redesigns. No more broken selectors or failed automation due to CSS class changes. AI agents interact with semantic business actions, not fragile DOM structures.

Performance Efficiency

Structured tool calls consume approximately 20-100 tokens compared to 2,000+ tokens per screenshot in visual approaches. Faster execution, lower costs, and reduced latency for AI agent operations.

Security First Design

Browser-native authentication eliminates complex OAuth flows. Same-origin policy enforcement, CSP integration, and user confirmation for sensitive operations. W3C security review ensures robust protection.

Customer Support Workflows

Enable AI agents to query ticket status, update customer records, and route support requests through existing web-based CRM and helpdesk systems without fragile screen scraping.

E-commerce Automation

Allow AI agents to search products, manage shopping carts, process orders, and track inventory through structured tool interfaces with built-in validation and business logic.

Internal Systems (ERP, OA)

Expose enterprise resource planning and office automation workflows as tools. Automate leave requests, purchase orders, expense reporting, and approval workflows with full audit trails.

Participating Organizations

• Google - Chrome implementation and TensorFlow.js integration
• Microsoft - Edge platform and DirectML alignment
• W3C Community - Standards governance and review
• Contributors - IBM, Intel, Arm, Mozilla, academia

Distinction from Anthropic MCP

WebMCP is architecturally distinct from Anthropic's Model Context Protocol. While Anthropic MCP uses JSON-RPC for backend services, WebMCP provides browser-native APIs for client-side operation with postMessage communication.

The two protocols are complementary: MCP connects AI agents to backend services; WebMCP connects them to browser-based interfaces.

Enable in Chrome Canary

1. Download Chrome Canary browser
2. Navigate to chrome://flags
3. Search for "WebMCP" or "model-context"
4. Enable the WebMCP feature flag
5. Restart browser to activate

Official Resources

• 📘 Specification Draft
• 💻 GitHub Repository
• 🌐 W3C Community Group
• 📰 Chrome Developer Blog
• 🔍 Model Context Tool Inspector (Chrome DevTools Extension)

Reference Implementation

Explore the official React flight search demo showcasing declarative and imperative APIs, tool annotations, and best practices for tool design.

• ✓ searchFlights - Query available flights
• ✓ listFlights - Display results (read-only)
• ✓ setFilters - Apply search filters
• ✓ resetFilters - Clear filter state

Platform Security Integration

Same-Origin Policy: Tools inherit the origin security boundary of their hosting page, preventing cross-origin attacks.

Content Security Policy (CSP): WebMCP APIs respect CSP directives, ensuring consistent security posture.

HTTPS Required: API availability restricted to secure contexts only.

User Consent & Control

Human-in-the-Loop: Core design principle requiring user confirmation for sensitive operations.

Read-Only Hints: Tools can be marked as read-only to bypass confirmation for query operations.

Permission Model: Browser-mediated consent flows similar to existing web platform APIs.

Isolation & Auditability

Domain-Level Isolation: Tool availability scoped to specific domains with hash verification.

Agent Invocation Tracking: SubmitEvent.agentInvoked flag allows server-side differentiation between human and agent actions.

W3C Security Review: Ongoing security and privacy evaluation by W3C working groups and Chrome Security team.