Beyond Components: Designing Generative UI for MCP Apps — Ruben Casas, Postman

Key Concepts

• Generative UI (GenUI): User interfaces created dynamically by AI models rather than being pre-coded by developers.
• MCP (Model Context Protocol): An open standard that enables AI agents to connect to data sources and tools, providing a secure, sandboxed environment for UI delivery.
• Declarative UI: A methodology where an LLM generates a descriptor (JSON/YAML) that a rendering engine maps to predefined, static components.
• Static UI: The traditional approach where agents act as orchestrators, passing data to pre-built components.
• Sandboxing: The use of isolated environments (e.g., double iFrames) to safely execute and render AI-generated code.

---

1. The Evolution of UI Generation

Ruben Casas outlines three distinct stages in the evolution of UI generation:

• Static UI (The Current Standard): Agents act as orchestrators. They call tools, receive data, and pass that data to predefined, developer-built components. Examples include the AGUI protocol and Goose’s Auto Visualizer, which maps data to a set of pre-existing UI elements.
• Declarative UI (The Balanced Approach): This stage uses a "translation engine." The LLM generates a descriptor (JSON or YAML) that maps to a design system. This offers more personalization than static UI while maintaining the consistency and predictability of a design system. Vercel’s JSON Render is a primary example of this approach.
• Generative Components (The Future): The LLM writes raw HTML, CSS, and JavaScript on the fly at runtime. This provides maximum flexibility but introduces significant security risks, necessitating strict sandboxing.

2. The "New Computer" and the Interface Problem

Casas argues that we are currently in a "1970s terminal era" for AI. While we have super-intelligent models, we lack a mature interface language.

• The Chat Paradigm: While many SaaS companies are embedding chat windows everywhere, Casas suggests this is likely a transitional phase rather than the final UI.
• The Super App Paradigm: Using a single agent environment (like Claude or ChatGPT) to interface with various third-party tools via MCP.
• The "Radio vs. TV" Analogy: Casas notes that early television was just "radio with cameras" because creators lacked the imagination to utilize the new medium. Similarly, we are currently trying to force AI into old UI paradigms (like chat) because we haven't yet imagined the true potential of this "new computer."

3. Security and Distribution: The Role of MCP

A major hurdle for fully generative UI is trust. If an LLM generates code, it must be contained.

• MCP as the Solution: MCP apps provide a secure delivery mechanism. By using sandboxed environments (double iFrames), MCP allows for the safe execution of third-party or AI-generated code.
• Strategic Adoption: Anthropic’s use of MCP for their "visualizer" feature demonstrates that even first-party developers are moving toward this protocol to handle complex UI delivery.

4. Beyond Components: Human-Agent Collaboration

Casas posits that the future of UI is not just about "generating" a view, but about collaboration.

• Shared Artifacts: He highlights the Excalidraw MCP app as a breakthrough. It creates a shared canvas where both the human and the agent can interact, modify, and build together.
• The Shift: The future will move away from static, one-way UI generation toward a collaborative, personalized experience where the user and the agent work within a shared, interactive space.

5. Notable Quotes

• "The GUI has not been invented yet. It's like we are in the '70s, where everything was just text."
• "We are still in the radio era where we don't know all the amazing things that we will do in the future with this new media."
• "The future of generative UI will be more a collaborative experience where... that UI is going to be super personalized and it's going to be collaborative."

Synthesis

The industry is currently transitioning from static, developer-defined components to dynamic, AI-generated interfaces. While declarative UI currently offers the best balance of consistency and flexibility, the ultimate goal is a collaborative, sandbox-secured environment. The "Jarvis" moment—a truly intuitive, floating, and responsive interface—will not come from simply adding chat boxes to existing websites, but from developing new interaction models that allow humans and agents to co-create in shared digital spaces.