WebMCP

What if your app could tell agents what it does — instead of agents guessing from the DOM?

WebMCP (Web Model Context Protocol) is a W3C Community Group standard co-authored by Google and Microsoft. It lets web applications register structured tools in the browser via navigator.modelContext, so any AI agent can discover and call them — no scraping, no simulated clicks, no screenshots.

How It Works

The app declares its capabilities as typed tool contracts:

if ("modelContext" in navigator) {
  navigator.modelContext.provideContext({
    tools: [{
      name: "search_products",
      description: "Search product catalog by query",
      inputSchema: {
        type: "object",
        properties: {
          query: { type: "string" },
          category: { type: "string" },
          limit: { type: "integer", minimum: 1, maximum: 50 }
        },
        required: ["query"]
      },
      annotations: { readOnlyHint: true },
      async execute(input) {
        const results = await productService.search(input);
        return { products: results };
      }
    }]
  });
}

Two APIs: Imperative (JavaScript, for complex flows) and Declarative (HTML form attributes, for simple forms):

<form data-mcp-tool="create_order"
      data-mcp-description="Place an order">
  <input name="address" data-mcp-type="string" required />
  <button type="submit">Order</button>
</form>

The agent receives structured JSON responses, not pixels or DOM fragments. 89% token efficiency improvement over screenshot-based methods.

Strengths

Area	Detail
Standards-backed	W3C Community Group. Google and Microsoft co-authoring. Most durable bet.
Agent agnostic	Any agent that speaks MCP can discover and call registered tools. No vendor lock.
Token efficiency	Near-zero overhead — app returns structured JSON. Cheapest at runtime.
Auth inheritance	Tools execute with the user's existing browser session. Zero credential config.
Architecture fit	Tool contracts map directly to domain ports in hexagonal architecture.
Write safety	requestUserInteraction built into the spec for destructive actions.

Limitations

Area	Detail
Maturity	Chrome 146 early preview (Feb 2026). Not GA. Spec may change.
App-side work	Requires code changes in your app to register tools. Not zero-config.
No existing apps	Only works on apps that have opted in. Can't automate arbitrary websites.
Setup time	Hours to first tool (writing code), not minutes (installing a CLI).
Browser support	Chrome only for now. Edge expected soon. No Firefox/Safari timeline.

Architecture

WebMCP maps cleanly onto hexagonal architecture:

WebMCP Layer	Hex Layer	What It Does
Tool registration	Adapter (web shell)	Exposes domain capabilities to agents
Tool contracts	Port interface	JSON Schema defines the contract boundary
Tool execution	Domain service	Business logic runs through existing ports
Auth/permissions	Infrastructure	Existing session and RBAC

In an Nx monorepo: libs/agent-adapters/webmcp exports registerCoreTools(appServices). Type-safe schemas generated from domain types via zod-to-json-schema.

Adoption Sequence

1. Phase 0 — Feature flag + one read-only tool. Validate the pattern.
2. Phase 1 — Draft creation tools with mandatory requestUserInteraction.
3. Phase 2 — Core user journeys as 5-10 tools.
4. Phase 3 — Agent-optimized UX: pagination, stable IDs, granular tools.

Checklist Score

Against the decision checklist:

Gate	Score	Notes
1. Perception	Strong	Semantic tools return structured JSON. Best signal-to-noise ratio.
2. Action	Strong	Named tool calls with JSON Schema. Most semantic action model.
3. Auth	Strong	Inherits browser session. User's permissions are the boundary.
4. Workflow	Weak	Requires app-side code. Not a drop-in CLI tool.
5. Architecture	Strong	Best architectural fit — tool contracts = domain port interfaces
6. Standards	Strong	W3C, multi-vendor (Google + Microsoft). Strongest longevity signal.
7. Speed/Cost	Strong	Near-zero token overhead at runtime. Cheapest per interaction.
8. Setup	Weak	Hours to first tool. Requires code changes. But durable once built.
9. Blast Radius	Strong	App controls permissions. Built-in user interaction gating.

Context

• AI Browser Tools — Decision checklist and radar
• Hexagonal Architecture — How tools map to domain ports
• Nx Monorepo — Shared adapter libraries
• AI Frameworks — Underlying infrastructure