Your Agent Is an Infinite Canvas — RL Nabors, Dressed for Space

Key Concepts

• MCP (Model Context Protocol): An open standard that enables AI agents to interact with external data and tools.
• Transports: The communication protocols used by MCP servers (STDIO vs. HTTP).
• MCP Apps: Single-file HTML/CSS/JS bundles that provide rich, interactive UI experiences within an agent’s chat interface.
• Web MCP: A proposed standard that allows web pages to expose their internal functions as tools directly to browser-based AI agents.
• Agentic Web: The evolution of the web where browsers and agents interact through standardized primitives rather than just scraping DOM elements.
• Infinite Canvas: The philosophy that the browser is a versatile rendering engine for any media, not just static documents.

---

1. MCP Transports: STDIO vs. HTTP

The speaker distinguishes between two primary ways to connect an MCP server to an agent:

• STDIO (Standard Input/Output): The server runs as a local process spawned by the client. It is ideal for local development but requires command-line configuration, which can be a barrier for non-technical users.
• HTTP: The server runs as a web service. This is more user-friendly for end-users, as it allows them to connect an MCP server to an agent (like Claude) simply by providing a URL in the settings. It is highly compatible with serverless architectures (e.g., Vercel, Cloudflare).

2. MCP Apps: Building Interactive UIs

MCP Apps allow developers to move beyond "wall-of-text" chat responses by embedding interactive interfaces directly into the agent's chat window.

• Methodology: These are single-file HTML/CSS/JS bundles. Because they are sandboxed in an iframe, they lack local storage and direct network access.
• Implementation: Developers define a tool with a ui meta-attribute pointing to a URL.
• Constraints & Gotchas:
  • Base64 Embedding: All assets (fonts, images) must be embedded or handled via strict Content Security Policies (CSP).
  • "Mother May I" Pattern: Since the app cannot perform network requests or open windows directly, it must use the call server tool to request the agent to perform actions on its behalf.
  • Visibility: Tools used for UI navigation should be marked as hidden from the model’s general tool-calling logic to prevent the AI from misinterpreting UI navigation as data processing.

3. Web MCP: Bridging the Browser and Agents

Web MCP aims to solve the inefficiency of AI agents "scraping" websites by allowing the page itself to expose its functionality.

• The Problem: Current agents burn tokens by taking screenshots or parsing massive DOM trees to understand how to navigate a site.
• The Solution: Web MCP allows developers to register tools directly on a webpage using navigator.modelContext.registerTools.
• Models:
  • Imperative: Developers manually register tools and callbacks (e.g., a "next page" function).
  • Declarative: Developers add tool-name and tool-description attributes to HTML forms, automatically exposing them as tools to the agent.

4. Key Arguments and Perspectives

• Chat is the "Lowest Common Denominator": The speaker argues that the current "starfish" chatbox design (where the user does all the discovery) is a temporary phase, similar to the early days of the CLI. The future lies in rich, interactive, agent-native UIs.
• The Web is Not Dead: Contrary to the "browser is dying" narrative, the speaker asserts that the web is evolving. Existing browser primitives (Web Speech API, Web Animations API, Canvas, WASM) are the building blocks for the next generation of agentic experiences.
• Design Systems are Essential: Because MCP apps are isolated, having a robust, shared design system is critical for maintaining consistency between the main website and the agent-embedded version.

5. Notable Quotes

• "The browser is not just a document reader... It is an infinite canvas that can render anything."
• "Chat is the lowest common denominator of the user experience... it is to the future of agentic experiences what the CLI was to software."
• "CSS and JavaScript aren't just the language of the web. They're the language of interactive experiences on agents."

6. Synthesis and Conclusion

The transition to an "Agentic Web" requires developers to stop thinking of websites as static documents and start thinking of them as collections of tools and interactive components. By leveraging MCP for backend data and Web MCP for frontend interactivity, developers can create a seamless experience where agents act as intelligent navigators of the web. The core takeaway is that the infrastructure for this future—APIs, standards, and browser primitives—already exists; the challenge lies in adopting these protocols to make web content natively "agent-readable" and "agent-interactive."