A web platform proposal

Agents use tools,
not scraping.

Today, AI agents scrape the DOM, the accessibility tree, and take screenshots - brittle, slow, easy to get wrong, and vulnerable to prompt injection attacks.

WebMCP lets your site declare its capabilities as structured tools that agents can call directly, faster, more secure and with fewer tokens.

See the difference How it works

~40+DOM nodes to parse

3tools, called directly

Side by side

The same booking widget, two ways to be controlled.

Press Run agent to watch an AI try to book a slot on each side. Left: scrape the DOM. Right: call a tool.

Without WebMCP

Agent must scrape

It guesses meaning from aria-*, classnames, and shape.

With WebMCP

Agent calls tools

The page declares typed capabilities. The agent just calls them.

Registered tools 0

Last call

With the extension, you can:

See which tools are registered on a page, by monitoring the navigator.modelContext API.
Manually call tools and execute functions.
Verify your JSON Schema is correctly defined and that the browser can parse data as the tool expects.
View structured output or error messages returned by your tool to ensure they're written clearly and formatted correctly, so an agent can understand it.
Talk to the agent using natural language, to see if it can correctly identify and invoke the appropriate WebMCP tools.

The idea, in three steps

How WebMCP works

Your site registers tools

On any page, declare the actions an agent can take. Each tool has a name, description, and JSON schema — the same shape as a server-side MCP tool.

navigator.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});

The browser exposes them

A WebMCP-aware extension (or, eventually, the browser itself) collects registered tools and presents them to the user's agent — alongside the page's URL, title, and origin permission scope.

your page

browser / extension

your agent

Agents call instead of guess

No more “find the right button.” The agent sees a contract, supplies structured arguments, and your code does the rest — with the user still in the loop for permission and confirmation.

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-05-19",
    "time": "14:00",
    "name": "Sarah Drasner",
    "email": "sarah@example.com"
  }
}

Try it yourself

Get started

There are two APIs you can use to set up your website tools.

Imperative API

Define different types of tools with standard JavaScript — form input, navigation, state management, or any other function on your page. The booking widget above uses this approach. Here's its getAvailability tool — the same one you'd see if you opened the WebMCP inspector on this page:

navigator.modelContext.registerTool({
  name: "getAvailability",
  title: "Get booking availability",
  description: "List bookable consultation times within a date range.",
  inputSchema: {
    type: "object",
    properties: {
      startDate: { type: "string", format: "date" },
      endDate:   { type: "string", format: "date" }
    },
    required: ["startDate", "endDate"]
  },
  annotations: { readOnlyHint: true },
  execute: ({ startDate, endDate }) => {
    return calendar.slotsBetween(startDate, endDate);
  }
});

Learn more ↗

Declarative API

Add a few attributes to a standard HTML <form> to expose it as a WebMCP tool — no JavaScript wiring required. The same bookSlot capability from the demo above, written as plain HTML:

<form toolname="bookSlot"
      tooldescription="Reserve a 30-min consultation"
      toolautosubmit>
  <input type="date" name="date"
         toolparamdescription="Date of the booking" required>
  <input type="time" name="time"
         toolparamdescription="Start time (24h)" required>
  <input name="name"
         toolparamdescription="Full name" required>
  <input type="email" name="email"
         toolparamdescription="Confirmation email" required>
  <button type="submit">Book</button>
</form>

Learn more ↗

Build with WebMCP

Try it. Ship it. Shape it.

WebMCP is under active discussion and subject to change. If you try these APIs and have feedback, we'd love to hear it.

Read the WebMCP explainer

Raise questions and participate in discussion on the spec repo.

github.com/webmachinelearning/webmcp ↗

WebMCP best practices

Reference patterns for building agent-ready sites.

chrome · WebMCP best practices ↗

Use cases

What kinds of tools should you expose, and when?

chrome · WebMCP use cases ↗

Spec Repo

See the repo and file an issue.

chrome · webmcp repo ↗

Try fun demos

Working WebMCP code to fork and play with from Chrome DevRel, Andre Bandarra.

bandarra.me/projects ↗

Chrome Status

Review the Chrome implementation status and timeline.

chromestatus.com/feature/5117755740913664 ↗

Early Preview Program

Get an early look at new APIs and access our mailing list.

goo.gle/chrome-ai-dev-preview-join ↗

File a Chromium bug

Hit an issue with Chrome's implementation? Let the team know.

crbug.com/new ↗

Also worth your time: debugging your registered tools with the new WebMCP support in Chrome DevTools, and the proposed Lighthouse audit for the agentic web — we'd love your feedback on both.

Some links point to early-access docs and may change as the spec evolves.

Agents use tools,not scraping.