What's WebMCP?

Understanding MCP and WebMCP — the standards powering AI agent connectivity

What is MCP?

MCP (Model Context Protocol) is an open-source standard for connecting AI applications to external systems. Created by Anthropic in November 2024, it provides a universal way for AI apps like Claude, ChatGPT, and VS Code to access data sources, tools, and workflows.

Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect electronic devices, MCP provides a standardized way to connect AI applications to external systems.

How MCP Works

MCP follows a client-server architecture. An MCP host (like Claude Desktop or VS Code) creates MCP clients that connect to MCP servers. Communication uses JSON-RPC 2.0 over two transport types: STDIO for local servers and Streamable HTTP for remote servers.

MCP Host

The AI application that coordinates and manages one or multiple MCP clients (e.g., Claude Desktop, VS Code)

MCP Client

A component that maintains a connection to an MCP server and obtains context for the host

MCP Server

A program that provides context — tools, resources, and prompts — to MCP clients

Core Primitives

Tools

Executable functions that AI models can invoke (e.g., search, calculate, query databases)

Resources

Data sources that provide context to AI models (e.g., files, database records, API responses)

Prompts

Reusable prompt templates that servers can expose to clients for specific workflows

What MCP Enables

  • AI assistants accessing your Google Calendar and Notion for personalized help
  • Claude Code generating entire web apps from Figma designs
  • Enterprise chatbots connecting to multiple databases across an organization
  • AI models creating 3D designs on Blender and printing them on a 3D printer

What is WebMCP?

WebMCP (Web Model Context Protocol) is a W3C Community Group standard that enables browsers to expose structured tools to AI agents through the navigator.modelContext API. Jointly developed by Google and Microsoft, it was released as an early preview in Chrome 146 in February 2026.

Instead of AI agents attempting to parse HTML structures or interpret screenshots, WebMCP allows web pages to declare their capabilities as structured tools with defined schemas, parameters, and security boundaries — achieving 89% token efficiency improvement over screenshot-based methods.

Two Complementary APIs

Declarative API

HTML-based tool registration using form attributes. Simple and requires no JavaScript.

Imperative API

JavaScript-based dynamic tool registration with full programmatic control via navigator.modelContext.registerTool().

Security-First Design

  • 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 (like location or camera access).

MCP vs WebMCP

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

FeatureMCPWebMCP
EnvironmentServer-side / cross-platformBrowser-native / client-side
ProtocolJSON-RPC 2.0postMessage (browser)
AuthenticationCustom per-serverInherits web auth (SSO, cookies, RBAC)
Best forHeadless API operations, CLI agents, desktop AI assistantsIn-browser UI interactions, web app automation, context-sensitive tools
Developed byAnthropic (open-source)Google & Microsoft (W3C Community Group)

Code Examples

MCP Server Tool (JSON-RPC)

// MCP Server — defining a tool
{
  "name": "search_flights",
  "description": "Search available flights between airports",
  "inputSchema": {
    "type": "object",
    "properties": {
      "origin": { "type": "string", "description": "Origin airport code (IATA)" },
      "destination": { "type": "string", "description": "Destination airport code" },
      "date": { "type": "string", "format": "date" }
    },
    "required": ["origin", "destination", "date"]
  }
}

WebMCP Imperative API (Browser)

// WebMCP — browser-native tool registration
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) }]
    };
  }
});

How webmcp.land Fits In

webmcp.land is a discovery platform for MCP and WebMCP services. Users register their server endpoints, and the platform discovers, indexes, and exposes their tools so others can search by use case — like finding a flight booking tool or a database query service.

  1. 1Register your MCP or WebMCP endpoint URL
  2. 2The platform discovers and indexes your tools and capabilities
  3. 3Others search by use case to find and connect to your services

Resources & Links