Chrome origin trial · W3C WebMCP

Using WebMCP tools from AI agents

WebMCP lets web pages expose their functionality as structured tools that AI agents can discover and invoke at runtime. The WebMCP Registry is the discovery layer — agents query it to find what tools are available at any given domain before or while visiting a page.

What is WebMCP?

WebMCP is a W3C proposal that lets web developers register client-side tools directly in the browser using document.modelContext.registerTool(). Unlike backend integrations (MCP servers, OpenAPI), WebMCP tools run inside the page— they can read and update the DOM, reuse existing application logic, and operate with the user's active session and context.

Think of a WebMCP-enabled page as an in-browser MCP server. Instead of a separate backend, tools live alongside the UI they control.

Backend MCP

→ Agent talks to a separate server
→ Bypasses the web UI entirely
→ Must replicate auth + state server-side
→ User has no visibility into what happens

WebMCP (in-browser)

→ Agent uses tools registered in the page
→ UI updates in real time, user sees everything
→ Reuses existing client-side code and auth
→ Human stays in the loop

// A WebMCP tool registered by a web page
document.modelContext.registerTool({
  name: "add-to-cart",
  description: "Add a product to the shopping cart by ID.",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "The product ID to add." },
      quantity:  { type: "number", description: "Number of items." }
    },
    required: ["productId"]
  },
  async execute({ productId, quantity = 1 }) {
    await cart.addItem(productId, quantity);
    return { content: [{ type: "text", text: `Added ${quantity}x ${productId} to cart.` }] };
  }
});

The registry's role for agents

The browser's document.modelContext API lets an agent query tools from the page currently loaded. But before an agent visits a page, it has no way of knowing what tools exist there.

The WebMCP Registry solves this: it's a pre-indexed catalogue of tool contracts that agents can query ahead of time, or use to build system prompts, context windows, and planning steps.

When to use the registry vs. the browser API

Use the Registry API when:

· Building an agent system prompt
· Pre-loading tool schemas for planning
· Searching for tools by capability
· Filtering to verified domains only

Use document.modelContext when:

· The page is already open in a browser
· Invoking tools to update the UI
· Getting live tool availability
· The tool needs DOM/session access

Discover tools via the registry API

All read endpoints are public — no authentication required. Query them from any agent runtime, server, or browser extension.

Search across all registered tools

http

GET https://webmcp-registry.dev/api/tools?q=checkout&verified=true

json

{
  "results": [
    {
      "domain": "shop.example.com",
      "verified": true,
      "tool": {
        "name": "start-checkout",
        "description": "Initiates the checkout flow for items in the cart.",
        "inputSchema": {
          "type": "object",
          "properties": {
            "promoCode": { "type": "string", "description": "Optional promo code." }
          }
        },
        "specVersion": "0.1"
      }
    }
  ],
  "total": 1
}

Get all tools for a specific domain

http

GET https://webmcp-registry.dev/api/domain/shop.example.com

json

{
  "domain": "shop.example.com",
  "verified": true,
  "verifiedAt": "2026-06-01T00:00:00.000Z",
  "tools": [
    {
      "name": "search-products",
      "description": "Search the product catalog by keyword and filters.",
      "inputSchema": { ... },
      "specVersion": "0.1"
    },
    {
      "name": "add-to-cart",
      "description": "Add a product to the shopping cart.",
      "inputSchema": { ... },
      "specVersion": "0.1"
    },
    {
      "name": "start-checkout",
      "description": "Initiates the checkout flow.",
      "inputSchema": { ... },
      "specVersion": "0.1"
    }
  ]
}

Get a single tool's full contract

http

GET https://webmcp-registry.dev/api/tool/shop.example.com/add-to-cart

Invoke tools in the browser

Once a page loads, tools registered by the page are available via document.modelContext. A browser-integrated agent (built into Chrome or running as an extension) can discover and call them:

// Discover what tools the current page exposes
const tools = await document.modelContext.getTools();

// tools is an array of tool definitions (name, description, inputSchema)
console.log(tools.map(t => t.name));
// → ["search-products", "add-to-cart", "start-checkout"]

// Execute a tool
const result = await document.modelContext.executeTool("add-to-cart", {
  productId: "SKU-4821",
  quantity: 2
});

console.log(result);
// → { content: [{ type: "text", text: "Added 2x SKU-4821 to cart." }] }

The browser mediates every call. The tool's executecallback runs in the page's JavaScript context — it can update the DOM, call APIs, and read session state, all within the user's browser tab.

Full agent workflow example

Here's how a browser-integrated AI agent would handle "Add the blue sneakers to my cart and start checkout":

Query the registry (pre-visit)

The agent fetches GET /api/domain/shop.example.com before or as the page loads. It learns the site has search-products, add-to-cart, and start-checkout — and injects those schemas into its context window.

Plan with the tool schemas

The LLM plans a sequence: call search-products to find the blue sneakers, then add-to-cart with the product ID, then start-checkout.

Execute in the browser

The agent calls tools via document.modelContext.executeTool() in sequence:

const results = await document.modelContext.executeTool(
  "search-products", { query: "blue sneakers" }
);
// → [{ id: "SKU-4821", name: "Classic Blue Runner", price: "$89" }]

await document.modelContext.executeTool("add-to-cart", {
  productId: "SKU-4821", quantity: 1
});
// → { content: [{ type: "text", text: "Added to cart." }] }

await document.modelContext.executeTool("start-checkout", {});
// → UI navigates to checkout page

User stays in control

The page UI updates in real time. The user sees exactly what happened and can review, modify, or cancel before completing the order.

Injecting tools into a system prompt

If you're building an agent that uses the registry as a knowledge source, you can fetch tool schemas at startup and include them in your system prompt:

async function buildSystemPrompt(domain) {
  const res = await fetch(
    `https://webmcp-registry.dev/api/domain/${domain}`
  );
  const { tools, verified } = await res.json();

  const toolList = tools.map(t =>
    `- ${t.name}: ${t.description}
  Input: ${JSON.stringify(t.inputSchema)}`
  ).join("\n");

  return `You are an assistant for ${domain}.${verified ? " (verified domain)" : ""}
The page exposes the following WebMCP tools you can invoke:

${toolList}

Use document.modelContext.executeTool(name, args) to call them.`;
}

Resources

W3C WebMCP Explainer↗

The full proposal including API design, use cases, and security considerations.

W3C WebMCP Specification↗

The living specification for document.modelContext and related APIs.

WebMCP Registry API Docs

Full reference for all registry endpoints — GET, POST, and DELETE.

Submit your domain

Current status

WebMCP is under active development at the W3C Web Machine Learning Working Group. document.modelContext is available as a Chrome origin trial. The registry is independent of any browser vendor — it works with any WebMCP-compatible agent.