Nitin Kalra

Posted on May 24

WebMCP Is the Quiet Google I/O Announcement That Could Make Web Apps Agent-Ready

#googleiochallenge #devchallenge #webdev #ai

Google I/O Writing Challenge Submission

This is a submission for the Google I/O Writing Challenge

At Google I/O 2026, the loud announcements were easy to spot: Gemini 3.5, Antigravity 2.0, Android agents, AI Studio upgrades, and a lot of new ways to build software with AI.

The announcement I kept coming back to was much quieter:

WebMCP.

The Chrome docs describe it as a proposed open web standard that can be tested locally behind a Chrome flag and explored with demo apps.

But the idea underneath it is important:

What if websites stopped forcing agents to guess what buttons and forms mean, and started exposing structured, typed actions directly?

That sounds small until you compare it with the tool that exists today: Chrome DevTools MCP, Google's official MCP server that lets coding agents control and inspect Chrome through DevTools.

After looking at both, my take is simple:

Chrome DevTools MCP helps agents understand the web we already built. WebMCP asks us to build a web that agents can use without guessing.

That difference matters for every web developer.

The Current Web Is Still Built For Eyes And Fingers

Most web apps assume the user is a human looking at pixels and moving through a UI one click at a time.

That model works for people. It is much less reliable for agents.

An agent can try to inspect the DOM. It can use the accessibility tree. It can take a screenshot. It can click buttons. It can fill fields. But unless the app exposes clearer intent, the agent still has to infer a lot:

Is this button destructive or reversible?
Does this date field expect MM/DD/YYYY, YYYY-MM-DD, or a custom picker flow?
Is the visible price final, or does tax appear later?
Does this form submit immediately, or save a draft?
Is this disabled button waiting on validation, auth, inventory, or JavaScript state?

Humans handle ambiguity with context. Agents handle ambiguity with retries, brittle heuristics, and occasional nonsense.

WebMCP is interesting because it tries to reduce that ambiguity at the source.

What WebMCP Adds

The Chrome WebMCP documentation describes WebMCP as a way for web pages to expose structured tools for AI agents. A page can register JavaScript functions or annotate HTML forms so an agent can discover available actions, understand input schemas, and call those actions inside the current browser context.

In other words, the website can say:

// Conceptual example, not exact production code
registerTool("searchFlights", {
  description: "Search available flights",
  input: {
    origin: "string",
    destination: "string",
    date: "string",
    passengers: "number"
  }
});

That is a different contract from "look for a textbox that probably means origin, type into it, tab somewhere, hope the custom date picker behaves, and click the blue button."

The official docs call out support for discovery, JSON Schema, and page state. They also give examples like support flows, travel booking, structured forms, date pickers, and hidden diagnostic actions.

The important word is structured.

The web already has APIs. But WebMCP is not a backend API. It lives in the browser context. The tool call can update the same UI the user sees. That keeps the user in the loop and preserves the visible product experience, while giving the agent a more reliable path than raw actuation.

Why I Compared It With Chrome DevTools MCP

The Google I/O developer keynote put WebMCP and Chrome DevTools for agents in the same broader section: "Redefining web development in the agentic era." That pairing is useful.

Chrome DevTools for agents gives coding agents the ability to interact with Chrome, inspect pages, debug runtime behavior, emulate real-world user experiences, run audits, inspect console messages, analyze network requests, take accessibility-tree snapshots, and run performance workflows.

The GitHub README for chrome-devtools-mcp describes it as an MCP server that lets agents such as Antigravity, Claude, Cursor, Copilot, and Codex control and inspect a live Chrome browser. The tool reference includes navigation, input automation, emulation, network inspection, console inspection, screenshots, accessibility snapshots, Lighthouse audits, performance traces, memory tools, extension tools, and experimental WebMCP tools.

That is a lot of power.

But it is a different layer.

Chrome DevTools MCP is mostly a developer-side debugging and automation tool.

WebMCP is a site-side capability contract.

One lets an agent inspect what is there. The other lets a site declare what can be done.

My Small Test

I wanted a hands-on check instead of writing another "AI will change everything" post.

The WebMCP docs point to demos covering both imperative and declarative implementations:

WebMCP zaMaker, which uses the WebMCP Imperative API.
A travel demo, also using the WebMCP Imperative API.
Le Petit Bistro, which uses the WebMCP Declarative API.

I started with WebMCP zaMaker because the imperative version makes the core idea very visible. Instead of asking an agent to infer pizza controls from pixels, the page registers explicit tools that the inspector can discover.

I enabled WebMCP testing in Chrome, opened the zaMaker demo, and used the WebMCP - Model Context Tool Inspector extension.

The extension surfaced several page-defined tools, including:

add_topping
manage_pizza
remove_topping
set_pizza_size
set_pizza_style

That is the part that clicked for me. These are not generic browser actions like "click at coordinate X" or "type into input Y." They are product-level capabilities exposed by the page.

For example, the inspector showed add_topping with a schema that included a topping enum and a size enum. It also showed set_pizza_size with a structured size input, plus a number_of_persons field that could help infer the right size.

Then I used natural language prompts in the inspector:

add pizza with large toppings

The inspector translated that into a tool call:

{
  "size": "Large",
  "topping": "🍕"
}

Then I tried:

make the pizza extra large

The extension called:

{
  "size": "Extra Large"
}

The page responded by changing the pizza state.

That small demo made the difference clearer than the docs alone. A browser automation agent can click around a pizza builder. A WebMCP-aware page can instead say, "Here are the actions this product supports, here are the allowed parameters, and here is what happened when you called one."

For contrast, Chrome DevTools MCP felt like a developer-side lens. It can inspect a page, read the accessibility tree, look at console output, automate interactions, and help an agent debug what is already rendered in Chrome.

That is powerful, but it is still looking at the page from the outside. The zaMaker demo showed the other side of the idea: the page itself can publish a small set of intentional actions for agents to use.

So my hands-on result was:

Chrome DevTools MCP is practical today for inspecting and testing pages. The WebMCP inspector shows what changes when the page itself exposes product-level tools.

WebMCP vs Chrome DevTools MCP

Here is the cleanest way I now think about the difference:

Question	WebMCP	Chrome DevTools MCP
Who exposes the capability?	The website or web app	The browser / DevTools layer
Who is it mainly for?	Browser-based user agents acting inside a site	Coding agents, QA agents, and developer workflows
What does it make explicit?	App-defined tools, inputs, outputs, and page state	Browser state, DOM/a11y snapshots, console, network, performance, screenshots
What problem does it reduce?	Agents guessing how to use a product	Developers manually inspecting and debugging browser behavior
Best current use	Experimental agent-ready product flows	Real debugging, QA, performance, accessibility checks
Biggest limitation	Requires browser support and app implementation	Still often acts through page structure, snapshots, and inferred intent

If an agent is trying to debug why a checkout page is broken, Chrome DevTools MCP is the right tool.

If an agent is trying to book a trip, submit a support request, configure a dashboard, or complete a multi-step workflow inside an app, WebMCP is the more interesting long-term answer.

Why This Is Bigger Than "AI Can Click Buttons"

Before WebMCP, the default browser-agent path looked like this:

See the page.
Guess the user's next action.
Click or type.
Observe the result.
Retry if wrong.

That can work, but it is fragile. It is also slow and expensive because every step adds model reasoning, visual parsing, DOM interpretation, or both.

WebMCP suggests a different path:

Discover the site's available tools.
Pick the tool that matches the user's goal.
Send typed parameters.
Let the site execute the action in the visible browser context.
Return structured output or a clear error.

That is closer to an API, but with the user still looking at the product.

This is why I think WebMCP matters. It is not only about making agents more powerful. It is about moving responsibility back to application developers. If we want agents to act safely and reliably, we cannot make them reverse-engineer every workflow from pixels.

We need to expose intent.

What Developers Can Do Before WebMCP Is Everywhere

Most of us cannot ship production WebMCP flows tomorrow. Browser support is early, and the proposal is still changing.

But we can start building sites that are easier for both humans and agents to understand.

The practical checklist I took from this:

Use semantic HTML before custom widgets.
Make important buttons and forms clear in the accessibility tree.
Give inputs stable names and labels.
Avoid hiding critical state only in visual styling.
Keep destructive actions behind explicit confirmation.
Separate "preview", "save draft", "submit", and "purchase" flows clearly.
Make validation errors machine-readable and human-readable.
Test important flows with browser automation, accessibility snapshots, and Lighthouse.
Think about which app actions would deserve structured tools later.

If I were preparing a product for WebMCP, I would not start by exposing every button as a tool. I would start with the few workflows where ambiguity hurts most:

search
checkout
booking
support ticket creation
return/refund initiation
dashboard filtering
diagnostics
account settings changes

Those are the places where agents guessing through the UI can create real user pain.

The Security Question

There is an obvious risk here: if websites expose actions to agents, bad tool design can make bad actions easier.

That is why I like that the WebMCP model keeps actions in the browser context instead of turning every site into a blind backend API. Sensitive actions can still require visible UI, user confirmation, and page-level state.

But developers will need discipline.

A good WebMCP tool should have:

a narrow purpose
a clear name
a strict schema
useful error messages
visible execution
confirmation for irreversible actions
no surprise side effects

The goal should not be "let agents do anything."

The goal should be "let agents do the right thing with less guessing."

My Take

Chrome DevTools MCP feels like the tool web developers can use now.

WebMCP feels like the contract web developers may need to design for next.

That is why I think it was one of the more important web announcements at Google I/O 2026. It points to a shift from:

agents as better screen scrapers

to:

agents as first-class users of structured web capabilities

That shift will not happen overnight. It needs browser support, standards work, developer tooling, security patterns, and a lot of real-world testing.

But the direction is clear. If agents are going to use the web on our behalf, web apps need to become more than visually usable.

They need to become understandable.

They need to become inspectable.

And eventually, they need to become agent-ready.

DEV Community