Web MCP

UX + AX: Web Experience for Humans & Agents

A WEB MCP WORKSHOP

PROTOCOL & CHILL

L · A · R

SLOW · EXPENSIVE

FAST · CHEAP

Two Approaches

Computer Use vs WebMCP

→ Pick one

📸 Computer Use Screen-based

✕Takes a screenshot of the entire screen
✕Guesses button locations by pixel coordinates
✕Clicks, waits, screenshots again — repeats
✕One UI redesign breaks the whole flow
✕Slow, expensive, error-prone

Like reading a map by describing a photo of it — instead of just opening the map.

🔗 WebMCP Action-based

✓Page publishes named actions the AI can call
✓AI calls the action directly — no guessing
✓Works even if the UI is completely redesigned
✓User can approve or deny each action
✓Fast, reliable, runs in the browser

Like giving someone a remote control — instead of asking them to mime pressing the buttons.

HTML & JS

W3C Community Draft

What Is WebMCP

A browser-native way to say:
“Here’s what you can do on this page.”

🏷️ Declarative API HTML only

Annotate your existing HTML form — no JavaScript needed. The browser exposes it as an AI-callable action automatically.

<!-- Just annotate your existing form -->
<form mcp-tool="searchDresses"
      mcp-description="Filter dresses by style">
  <input name="size" mcp-description="EU size">
</form>

⚙️ Imperative API JavaScript

Register dynamic actions in code — full logic, async calls, complex flows. For when HTML alone isn’t enough.

navigator.modelContext.registerTool({
  name: "filterTemplates",
  description: "Filter by visual description",
  execute: async (p) => applyFilter(p)
});

♿

Built for accessibility too

Official W3C goal: give assistive technologies structured access beyond the traditional accessibility tree.

🙋

Human always in the loop

Requires a visible browser tab & user presence. The AI proposes — the user approves. Not for headless bots.

YARD SALE

→ A REAL EXAMPLE

Real-World Example — Easely Design Tool

Jen makes a yard-sale flyer.
Her browser agent helps.

1

Jen asks her browser agent

“Show me spring-themed templates, white background, date & time displayed.”

2

Agent calls the tool directly

Easely registered filterTemplates(description). Agent calls it — UI updates instantly. No clicking.

3

Agent surfaces a hidden feature

Jen didn’t know Easely had orderPrints(). Agent offers it. Jen clicks confirm. Done — no print shop trip.

Tools Easely registered on the page

// Tool 1 — available on the templates panel
filterTemplates(description: string)

// Tool 2 — registered when a design is open
editDesign(instructions: string)

// Tool 3 — Jen never noticed it in the UI
orderPrints(copies, page_size, page_finish)

// Agent sees these. Jen doesn't have to.
// Pages can register tools progressively
// as the user navigates deeper.

BRING YOUR LAPTOP

15 MIN · GO

Hands-On

Your turn.

→ Build something

🔧

Step 1 · Enable the flag

You’ll need Chrome Canary (v146+). Go to chrome://flags, search Model Context Protocol, enable it, relaunch.

⚠ Origin Trial starts Chrome 149 — announced May 18, 2026. Today: flag only.

🍽️

Step 2 · Explore the Bistro demo

Open the WebMCP Bistro demo page. Right-click → Inspect → Sources. Find registerTool. See which tools the restaurant exposes — and which are hidden from the UI.

✏️

Step 3 · Build your own tool

Scroll down ↓ and tinker with the builder. Pick a preset or start blank. Register it, download the artifact, take it home.

💬 “What actions on your favorite site are tedious for humans — and trivial for a tool?”

Tinker with a tool call

Checking WebMCP…

Start from

01Describe

Tool name (camelCase)

What does it do?

Inputs (what the agent provides)

What does it return?

No JS to write — your tool's handler is stubbed. The agent gets your inputs echoed with this description.

Built by

02Preview

Human summary (this is what gets downloaded)

yourTool

What it does will show up here as you type.

Takes—

Returns—

Built byyou

Built with WebMCP weareplatypus.com/web-mcp

WebMCP spec (real code your browser registers)

Status

Not registered Click Register to make it real in your browser.

03Register & download

04 · The artifacts

What the room made.

Every registered tool with a downloaded artifact lands here. Day-of: fills up as attendees ship. After May 30: it's the time capsule of what got built.

searchMenu

Search the cafe menu by keyword and return matching drinks.

Takesquery: string

ReturnsMatching drink names.

Built by sampleBuilt with WebMCP

addReservation

Book a table at the cafe for tonight.

TakespartySize: number, time: string

ReturnsConfirmation of the reservation.