01 / 10

A WEB MCP WORKSHOP

PROTOCOL & CHILL

THE THESIS
ORIGIN TRIAL · CHROME 149
A new web standard

Spell it
out.

A way for sites to publish what they can do — so agents stop screenshotting your page and start calling your tools instead.

Today screenshot · scrape · guess
WebMCP call the tool
SLOW · BRITTLE · EXPENSIVE
Before WebMCP

Right now,
your site might be
a guessing game to an agent.

01 Screenshot
02 Read the DOM
03 Guess
04 Click. Wait. Repeat.
A WEB STANDARD
W3C · WEB ML CG
What WebMCP Is

Your site
publishes its tools.

Humans keep using the same web they know — but it’s been augmented for the agents they bring alongside them.

— Dominic F., Chrome Web Platform · WebMCP keynote

01
Site-side, not agent-side

You define how your page should be used. Agents stop guessing at the DOM.

02
The browser is the MCP server

No backend infra. The browser brokers the exchange — all client-side.

03
Built in the open
W3C Microsoft Google
Mozilla Apple Cloudflare
DON'T CONFUSE
WebMCP vs Regular MCP

One family.
Two jobs.

WebMCP
Regular MCP
Where it lives
In the browser
Server-to-server
Connects to
The page’s own capabilities
External APIs & services
Best for
Human in the loop
Autonomous agents
Auth
Piggybacks on the user’s session
Separate handshake
When tools appear
Only when on the page
Always available

Browser-only, human-in-the-loop. For autonomous server-to-server work, regular MCP is the right tool.

HTML & JS
Two Ways to Implement

Two APIs.
One tool interface.

<HTML/> Declarative No JS

Annotate the form you already have.

USE FOR: Search box Login form Flight booking 
<form tool-name="searchFlights">
  <input name="origin">
  <input name="destination">
</form>
{ JS } Imperative JavaScript

Register tools in code. Full logic.

USE FOR: Dynamic filter Real-time chat Shopping cart 
if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "searchInventory",
    inputSchema: { /* JSON */ },
    execute: async (input) => {...}
  });
}
JUST MARKUP
The Declarative Path

Annotate the form
you already have.

On the form
tool-name

Short, descriptive name.

tool-description

One line: when should an agent reach for it?

tool-autosubmit

Submit on behalf — or hand it back to the human.

On each input
tool-param-title

Human-readable field name.

tool-param-description

What to enter, and why.

REAL TALK
EARLY · USEFUL
Limits & Status

Honest constraints.
And where we are right now.

×
Browser-only
No headless. A tab must be open.
×
Chrome + Edge only
FF + Safari: no commitment yet.
×
Complex sites = work
Dynamic UIs may need refactoring.
!
Security floor
HITL confirmation. More to come.
AnnouncedGoogle I/O · May 19, 2026
Origin TrialChrome 149 · early June 2026
Try nowChrome 146+ flag
EdgeAlready shipped
DESIGN FOR BOTH
The Closing Insight

Same button.
Two readers.

BRING YOUR LAPTOP
15 MIN · GO
Hands-On

Your turn.

→ Build something
01

Pick a flow on a site you love.

A search. A filter. A signup form. Something tedious for a human, trivial for a tool.

Newsletter signup Product search Booking widget
02

Write 2–3 tool names.

Short. Descriptive. One sentence each. What would you give the agent?

searchProductsFilter the catalog by keyword addToCartAdd an item to the cart applyPromoApply a coupon code
“Pick one high-value flow — a search, a filter, a signup. Expose it. Watch an agent use it. That’s the whole experiment.”