/What is WebMCP?
Light
80%
Thermostat
72°F
Speaker
Silent
What an agent sees today
<div class="x9k _f3 css-1qhz">
  <svg viewBox="0 0 16 16">…</svg>
  <span class="v _t">72°</span>
  <button class="btn-4a" onclick="…">
    <i class="ico ico--sm"></i>
  </button>
</div>

Scrape the DOM. Guess which pixel is a button. Click and hope. It breaks the moment the markup changes.

document.modelContextsimulated

This page registers its tools under a learn_ namespace.

“Movie night: dim the lights and play something moody”
matching keywords…

The plan: 3 tool calls. Nothing runs until you approve.

set_lights

Set living room brightness (0 = off)

levelnumber0–100
level:20"dim the lights"
set_thermostat

Set the target temperature

tempnumber60–85
temp:70movie-night preset
play_music

Play a genre on the speaker, or stop

genrestringambient | jazz | lo-fi | off
genre:ambient"something moody"

Your browser does not expose WebMCP yet — this is exactly what an agent sees in Chrome with the origin trial active.

Planner scripted for this walkthrough — keyword matching, not a live LLM.

That’s the whole loop.

requireApproval gated this run — remove it, and this same plan executes the moment the agent produces it.

No matching tools.
Set LightsSet living room brightness (0 = off)
Set ThermostatSet the target temperature
Play MusicPlay a genre on the speaker, or stop
Where this stands
  • WebMCP is a Chrome origin trial (Chrome 149–156), not a shipped standard. The API even moved mid-trial, from navigator.modelContext to document.modelContext.
  • It is being developed in the W3C Web Machine Learning Community Group.
  • Firefox and Safari don’t have it.
  • agentk feature-detects: without WebMCP you still ship a command palette. Nothing breaks.
Full Smart Home demoagentk on GitHubWebMCP spec repo (W3C)Chrome WebMCP docs

The palette you used at step 3 is the real agentk <Command> — the same component you npm install, wired to the same three tools as everything else on this stage.

What is WebMCP?

A two-minute walkthrough. I built a tiny smart home into this page — scroll, and watch the live panel change.

1 / 7

Agents browse like humans. Badly.

Now picture an AI agent trying to use it. Today it renders the page, scrapes the DOM, and guesses which pixel is a button. To an agent, this page is pixels.

2 / 7

Declare what the page can do.

WebMCP flips the approach. Instead of making agents guess, the page declares its capabilities as tools: a name, a description, and a JSON Schema for the inputs. That’s the whole contract.

I defined these once. Three devices became three typed, callable functions — each card in the panel is matched to the device it controls.

3 / 7

Humans get a palette. Free.

Try it: the palette below is live, and it drives the devices above. Each parameter form is generated straight from the tool’s schema — an enum becomes a dropdown, a bounded number becomes a slider.

4 / 7

The same page, as an agent sees it.

This is the agent’s-eye view: the tools registered on document.modelContext right now. No scraping, no guessing — a typed catalog.

This site serves Chrome’s WebMCP origin-trial token. If your browser has the API, this page registered its three tools for real. If not, the panel shows the same content, labeled simulated. Both states are the truth.

5 / 7

One sentence, planned across tools.

Because the tools are typed, natural language can compile into a plan: one sentence in, three tool calls with real parameters out.

The planner here is scripted so the walkthrough needs no API key — in your app you plug in Anthropic, OpenAI, Gemini, or your own provider.

6 / 7

You stay in the loop.

A plan is not an action. With approval turned on, agentk shows you the plan and waits — nothing touches the devices until you say go.

Click Approve & run and watch the devices actually change.

7 / 7

Ship it — with honest expectations.

WebMCP is early — the panel is the deal today. If the trade sounds right, everything you just used is one npm install away.