Introducing WebMCP: Agents in the Browser — RL Nabors

May 23, 202623:084,042 views

Summary

RL Nabors (Rachel Lee Nabors), principal developer experience engineer at Arise and a veteran of Mozilla Firefox DevTools, W3C Web Animations API, Microsoft Edge, and the React team (react.dev), presents a case that chat-based UIs are a transitional phase for agentic software — not its final form — and introduces two complementary specifications: MCP Apps and WebMCP.

Nabors opens by describing her motivation: future-proofing a personal web comic archive site (rachelagreat.com) for three client types simultaneously — humans in browsers, humans in agents, and agents acting in browsers on behalf of humans. The site needed to serve these clients through a single MCP server.

On MCP transports, she contrasts STDIO (standard input/output, spawned as a local process via JSON config with command-line inputs) against HTTP (runs as a web service at an HTTP endpoint, compatible with serverless platforms like Vercel edge functions and Cloudflare Workers). HTTP transports dramatically lower the configuration burden for end users: instead of editing a JSON config, they simply paste a URL into their agent client.

Her MCP tool set for the comics archive includes list_comics, list_storylines, list_characters, search_comics (via transcript search), search_by_character, and get_transcript (which returns Markdown rather than JSON). She notes that MCP Resources — intended for pre-priming agent context with large document corpora — remain poorly implemented across client harnesses: resources exist in the spec but are essentially invisible in every major agent UI, making them impractical for loading full transcript archives into context.

The core argument of the talk is a critique of what Nabors calls the "starfish" or chatbox landing page design pattern: a blank chat interface that forces users to already know what the system can do, analogous to text adventure games or the DOS command line. She draws a direct parallel to the CLI-to-GUI transition: just as graphical interfaces eventually replaced terminal-only computing for mainstream users (using the iPhone as the canonical example), richer interactive surfaces will eventually replace pure chat for agentic experiences.

MCP Apps address this by bundling HTML, CSS, and JavaScript into a single self-contained file that agent interfaces render in a sandboxed iframe. Her `get_page` tool returns a fully functional comic reader — matching the original site's visual design, supporting forward/backward navigation, comments, and a transcript toggle mode — all rendered inline within Claude's interface. Key constraints: no localStorage, no dynamic external asset loading without explicit Content Security Policy (CSP) headers, links require host permission via a special API call, and tools returning app UI should set a `visibility: app` flag to prevent the model from treating navigation tool responses as text output. She uses Vite single-file bundling and a shared design system (fonts and CSS served from the same origin) to keep the MCP App self-contained.

WebMCP is presented as a complementary specification going in the opposite direction: rather than rendering agent output as a mini-website, it makes existing HTML pages directly callable by in-browser agents. Nabors describes two models: declarative (add `tool-name` and `tool-description` attributes to existing HTML forms — the form's JavaScript handler is immediately exposed as a tool) and imperative (`navigator.modelContext.registerTools()` with a name, description, input schema, and execution callback — suited to dashboards, API calls, and data workflows). This eliminates the need for screenshot-based DOM parsing or token-expensive XML traversal that current browser-embedded agents rely on. She demos WebMCP using the MCPB debugging browser extension, showing an in-browser agent calling a `next_page` function defined via `registerTools` to navigate her comic archive without any clicks. WebMCP originated at Amazon as a workaround for authentication friction, is not spec-compliant with core MCP, and is still under active standards body discussion.

Nabors closes by framing CSS, JavaScript, and the full suite of browser APIs — Web Speech, Web Animations, Web Audio, Canvas, WebAssembly — as the language of interactive experiences on agents, not just on the web. The browser, she argues, was always an infinite canvas; agents are simply the next client to render it.

Key Takeaways

•Use HTTP transport over STDIO for publicly hosted MCP servers — users just paste a URL instead of editing JSON config files, dramatically lowering the onboarding barrier.
•MCP Resources are underimplemented across all major agent clients; do not rely on them to pre-prime context with large document corpora until harness support improves.
•The 'starfish' chatbox landing page forces excessive user discovery — adding MCP Apps (HTML/CSS/JS iframes) as tool responses replaces walls of text with interactive UI surfaces.
•MCP Apps must be fully self-contained single-file bundles: embed assets as base64, configure a CSP for any external fonts or images, and avoid localStorage since iframes are stateless.
•Set `visibility: app` on tools that return MCP App responses to prevent the model from interpreting navigation tool responses as chat text.
•WebMCP declarative model: add `tool-name` and `tool-description` attributes to existing HTML forms to instantly expose them as agent-callable tools without rewriting backend code.
•WebMCP imperative model: call `navigator.modelContext.registerTools()` with a name, description, input schema, and callback for dashboard or workflow-heavy sites.
•WebMCP eliminates the need for screenshot-based vision models or token-expensive DOM XML traversal in browser-embedded agents — agents call named JavaScript functions directly.
•WebMCP is not spec-compliant with core MCP despite naming similarity; treat them as related but divergent standards.
•Use Vite single-file component bundling to package your existing design system (fonts, CSS, components) into MCP App responses cleanly.
Browser-native APIs (Web Speech, Web Animations, Canvas, WASM) are available as zero-dependency capabilities inside MCP Apps — no third-party inference required for features like text-to-speech.

Transcript

[music] >> And even though I know some people are still coming in, I've also been informed to start directly on time. So much apologies to anyone who was hustling up here from one of the talks downstairs. You should have known this was the best track and hung out here from hour zero, but uh by all means come in, have fun. Hi there. I am Rachel Lee, Rachel Lee Neighbors, Neighbors like Nearest Neighbors, but not spelled that way. I have worked on the standards that powers today's web today's web ...