DEV Community

Robert
Robert

Posted on Edited on Originally published at latch.tools

Make any website agent-ready in one line (WebMCP, document.modelContext)

#webmcp #ai #webdev #javascript

In mid-2026 a quiet fact about the "agentic web" still holds: most big agents don't call WebMCP tools directly in production yet. ChatGPT Agent, Gemini, Perplexity, Claude — they still mostly DOM-scrape or screenshot and guess where to click. That's slow, brittle, and burns tokens.

Renamed: the API is now document.modelContext. navigator.modelContext is the deprecated backward-compat alias (Chrome 150). If your navigator.modelContext calls quietly stopped resolving, that rename is why — switch to document.modelContext.

WebMCP fixes the mechanism. Your site declares tools — search_site, add_to_cart, submit_lead — each with a name, a JSON schema, and an execute callback. An agent makes one structured call and gets JSON back, instead of clicking through your filter dropdowns. Chrome shipped the early preview in 146 (Feb 2026); Edge 147 ships it natively; Chrome 149 is in an open origin trial (announced at Google I/O, May 2026), with DevTools support for inspecting registered tools. Chrome Labs benchmarks show large token reductions vs. screenshot automation.

How WebMCP works (current API) 

// WebMCP — registering one tool by hand.
// document.modelContext is canonical; navigator.modelContext is the deprecated alias (Chrome 150).
document.modelContext.registerTool({
  name: "search_site",
  description: "Search products on this store",
  inputSchema: { type: "object", properties: { q: { type: "string" } }, required: ["q"] },
  async execute({ q }) {
    // Hand back the ACTUAL results, not a success flag — the agent acts on what you return.
    const results = await fetch("/api/search?q=" + encodeURIComponent(q)).then(r => r.json());
    return {
      content: [{ type: "text", text: results.length + " results" }],
      structuredContent: { results }
    };
  }
});
Enter fullscreen mode Exit fullscreen mode

Two things people get wrong here, and neither throws an error:

  • The old flag return. return { ok: true } was the shape in early samples. An agent never sees your rendered page — it acts on whatever execute hands back, so { ok: true } tells it nothing. Return the real result — the count, the IDs, the cart total — as structuredContent. (provideContext() and clearContext() were removed in the March 2026 spec revision; registerTool / unregisterTool are the way now.)
  • Stale-but-valid reads. A get_price that returns last render's cached value is a perfectly valid object and still wrong; the agent chains a checkout on it and nothing complains. Your tool's return is an API contract now, not a UI.

The one-line version

Wiring document.modelContext.registerTool() for every search box, cart action, and form on a real site — with auth, honest schemas, real structured returns, and a polyfill for browsers that don't have it yet — is real, ongoing work.

Latch is an open-source (MIT) script that does the wiring for you:

<script src="https://latch.tools/latch.js" data-key="YOUR_KEY"></script>
Enter fullscreen mode Exit fullscreen mode

It introspects your search, cart, and forms, registers them as WebMCP tools, and returns your existing handlers' real structured results (not a scraped success flag), with a polyfill so today's agent browsers and extensions can call them now. You keep your existing UI; agents get a structured contract.

Why bother before agents "officially" support it

First, agent browsers and extensions that do read document.modelContext already exist, and the standard is landing in stable Chrome/Edge fast — being early is cheap insurance. Second, you can't improve what you can't see: when an agent hits your site, you want to know which one and what it tried to do.

That visibility is the paid line, and it's concrete: the OSS client is free and exposes your tools. Latch Pro (EUR 19/mo per project) is the hosted analytics — which agent called which tool, success vs. failure rates, and a per-agent event feed. It's the one thing document.modelContext itself can't measure. If you're just shipping tools, stay on the free client; you only want Pro once real agent traffic starts and you need to see it.

Try it

The web spent 30 years optimizing for human clicks and search crawlers. The next layer is tools for agents — and it's a one-liner to get on it.

Disclosure: I work on Latch. WebMCP itself is an open W3C Community Group standard — you can implement document.modelContext entirely by hand; Latch just saves you the per-tool wiring and gives you the agent-visit analytics on top.

Top comments (0)