WebMCP — Serverless AI Tool Calls in the Browser

WebMCP is a W3C Web Machine Learning Working Group proposal co-developed by Google, Microsoft, and W3C. It defines a standard way for web pages to expose JavaScript-based tools that AI agents can call directly in the browser context — without a separate server, without custom middleware, and without breaking the user's live UI.

The key distinction from backend MCP: WebMCP tools run inside the running page. The user sees changes happen in real time. The human stays in the loop. This makes WebMCP ideal for human-in-the-loop workflows where an AI agent assists — rather than replaces — the user.

Setting Up the WebMCP Server Architecture

A WebMCP server typically operates over an HTTP transport layer using Server-Sent Events (SSE) for real-time communication. This allows the AI client to maintain a persistent connection to the server's toolset. We will implement a basic server structure that follows the standard protocol handshake.

The 4-step WebMCP flow works entirely inside the browser: the page loads as usual, the cloud LLM communicates with a browser-integrated agent, the agent uses the WebMCP JS API to call JavaScript functions in the live page, and those functions can update the UI or make HTTP calls to third-party services.

// Register tools on your page that the AI agent can call
navigator.mcp.registerTool({
  name: 'filter_products',
  description: 'Filter the product list by category and price range',
  parameters: {
    type: 'object',
    properties: {
      category: { type: 'string', description: 'Product category' },
      maxPrice: { type: 'number', description: 'Maximum price in USD' }
    },
    required: ['category']
  },
  handler: async ({ category, maxPrice }) => {
    // This runs directly in your live page context
    const products = await fetchProducts({ category, maxPrice });
    renderProductGrid(products);  // updates UI immediately
    return { count: products.length, category };
  }
});

console.log('WebMCP tools registered — AI agent can now use filter_products');

Exposing Tools to the AI Client

Tools are the core of WebMCP. They represent JavaScript functions registered on your page that the AI agent can discover and call. Unlike backend MCP which requires a separate server process, WebMCP tools live in your page's JavaScript context — meaning they have direct access to your DOM, your app state, and your existing frontend code.

This is the fundamental difference from backend MCP: when a WebMCP tool runs, the user sees the result immediately in the live UI. No separate agent-provided interface. No manual wiring. The human stays in control and in the loop.

// Tool definitions follow JSON Schema — same pattern as backend MCP
// but handler runs in-browser, not on a server

navigator.mcp.registerTool({
  name: 'calculate_revenue_projection',
  description: 'Calculates quarterly growth and updates the dashboard chart',
  parameters: {
    type: 'object',
    properties: {
      current_arr:  { type: 'number', description: 'Current Annual Recurring Revenue' },
      growth_rate:  { type: 'number', description: 'Expected quarterly growth rate (0-1)' }
    },
    required: ['current_arr']
  },
  handler: async ({ current_arr, growth_rate = 0.1 }) => {
    const q1 = current_arr * (1 + growth_rate);
    const q2 = q1 * (1 + growth_rate);
    // Update the live chart in the page
    window.revenueChart.update([current_arr, q1, q2]);
    return { q1: q1.toFixed(2), q2: q2.toFixed(2) };
  }
});