Web MCP

UX + AX: Web Experience for Humans & Agents

A WEB MCP WORKSHOP

PROTOCOL & CHILL

L · A · R

02 · The story

The web isn't just for humans anymore.

Sites have to speak two languages now — to the person at the screen, and to the AI agent helping them. WebMCP is the proposed standard that lets a website declare its own tools directly to an agent. One site, two audiences.

01

Agent-to-site communication, made explicit.

Today, agents screen-scrape and guess. WebMCP lets a site say plainly: "these are my tools, here's what they take, here's what they return." No fragile selectors.

02

One API: `navigator.modelContext`.

A page registers tools via registerTool({...}). The browser surfaces them to whichever agent the user trusts — Claude, Gemini, an extension. The page never knows which.

03

UX + AX. Designers are in this now.

The same screens we design for humans need to be legible to agents. Naming a tool, structuring its inputs, telling the user when an agent acted — those are design choices.

See it live →

Beancrest coffee shop demo

Mocks the platform-owned ARIA floor I'm proposing in W3C Issue #65.

03 · Set up & build

Get WebMCP running, then make a tool.

A

Use Chrome 146+ Canary

Open chrome://flags, search WebMCP, enable the WebMCP for testing flag, relaunch.

Native runtime. No extension required. Recommended path.

B

Or install MCP-B

On stable Chrome: install the MCP-B extension. It picks up any tools your tab registers.

Backup path if you can't run Canary.

C

Confirm it sees you

The chip at the top of the builder below should turn green when WebMCP is detected. If it's grey, finish A or B first.

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.