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

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

2026.06.09
·YouTube·by 이호민
#AI#DL#GPT#LLM#ML

Key Points

  • 1Rapid advancements in AI's ability to generate high-fidelity UI code highlight a disconnect between static user interfaces and the potential for dynamic, on-demand UI.
  • 2The speaker categorizes UI generation into static (predefined components), declarative (LLM-generated descriptors for static components), and fully generative (LLM-created HTML/CSS/JS), advocating for the latter's potential despite security concerns.
  • 3Multipurpose Containerized Applications (MCP apps) are presented as a secure delivery mechanism for generative UI, paving the way for future human-agent collaboration and highly personalized, dynamic interfaces.

The paper discusses the rapid evolution of UI generation capabilities in large language models (LLMs) and explores the current landscape and future possibilities for user interfaces in the age of AI.

Initially, UI generation involved rudimentary copy-pasting of code snippets from models like ChatGPT. However, by late 2023, models such as GPT-5.2 and Opus 4.5 demonstrated high-fidelity UI generation, producing thoughtful and functional front-end code (HTML, CSS, JavaScript) with features like accessibility and animations, often from single prompts. This rapid progress raises the question: if LLMs are so proficient at writing UI code, why are user interfaces still predominantly static, and where is the anticipated dynamic, AI-driven "Jarvis" moment?

The speaker frames the current state as being in the "70s of computing" for AI, where direct interaction with the "new computer" (LLMs) is akin to talking to a terminal, lacking a mature graphical user interface (GUI). The search for this new interface has led to two main paradigms:

  1. Chat Everywhere: Integrating chat interfaces into every application or website.
  2. Super Apps: Consolidating interactions within a single "super app" like ChatGPT, Claude, or Gemini, which can host and render third-party user interfaces. This approach is exemplified by Multi-party Computation Applications (MCP apps), which allow rendering third-party UIs within a controlled agent environment.

Beyond *where* the UI runs, the paper focuses on *what* the model generates, categorizing UI generation into three methods:

  1. Static Components: This is the most common approach today, where the agent acts as an orchestrator. It makes a tool call (e.g., via MCP apps or direct agent tool calls), passing parameters and data to *predefined, static components* built by developers. These components are analogous to traditional UI elements. Examples include the AGUI protocol, which maps client tools to React components based on received props, and Goose Auto Visualizer, which matches data to a set of predefined components for visualization. In this method, the LLM primarily generates data or props, not the UI structure itself.
  1. Declarative UI: This method is an evolution of static components, offering more dynamism. The agent generates a *descriptor* (e.g., JSON, YAML, or Python objects) that maps to predefined static components within a design system. A "translation rendering engine" then interprets these descriptors to render the final UI. While the underlying components are still static, the generated descriptor allows for highly dynamic and personalized UIs, similar to Netflix's server-driven UI approach or Vercel's JSON Render. This method is considered a good balance between flexibility and consistency, preserving design system integrity while allowing LLMs to define UI layouts and content through structured data.
  1. Generative Components: This is the most advanced and speculative method, where LLMs directly generate the entire UI code (HTML, CSS, JavaScript) on demand at runtime. The agent, or a dedicated code-generating model, outputs complete, runnable front-end code, which is then rendered by the client. The speaker demonstrates this with an experiment where a weather agent generated an entire UI, including design and functionality, from a single tool call. The primary challenge with this approach is trust and security, as directly executing LLM-generated code poses significant risks (e.g., malicious code injection).

The paper emphasizes the critical role of MCP apps as a robust distribution model and sandboxing mechanism for generative UI, particularly for generative components. MCP apps offer built-in features such as authentication, tool calling, message passing between UI and agent, and crucial sandboxing (often via double iframes), making them ideal for delivering untrusted, dynamically generated UI code. Anthropic's strategic decision to use MCP apps for their first-party UI visualizer further validates their strength as a delivery mechanism for on-the-fly generated UIs.

Looking to the future, the speaker suggests that the "final form" of UI is not yet clear. Dismissing the "Jarvis-like" floating windows as an obvious but potentially unimaginative vision (analogous to early TV being merely radio with cameras), the paper proposes that the future of generative UI lies in human-agent collaboration. Instead of simple output or visualization, future UIs will be shared artifacts or canvases where humans and agents co-create and interact. The Excalidraw MCP app is cited as an example, allowing both human and agent to modify and collaborate on a shared diagram. This collaborative model implies highly personalized and interactive generative UIs that move "beyond components" towards shared, dynamic experiences. The paper concludes that while the ultimate interface for the "new computer" is still unknown, humanity has the opportunity to shape its future.