Beyond Components: Designing Generative UI for MCP Apps

Ruben Casas, Postman16:58 · Jun 2026 · 147K views
Thumbnail for Beyond Components: Designing Generative UI for MCP Apps Watch on YouTube
TL;DR
  1. 1

    Generative UI has moved from copying model-written components to models producing high-fidelity frontend code on demand.

  2. 2

    Declarative UI, where models generate JSON or YAML for a controlled component system, offers a practical balance between flexibility and predictability today.

  3. 3

    MCP apps provide containment, authentication, tool calling, and message passing for safely delivering model-generated interfaces.

Summary

Ruben Casas traces agent interfaces from static components to declarative UI and fully generative UI. Static systems let an agent pass data into components built by developers. Declarative systems let the model produce JSON, YAML, or another descriptor that a renderer maps onto those components. Casas thinks this is the most useful balance today because teams keep their design system and gain more dynamic interactions. Fully generative UI lets a model write HTML, CSS, and JavaScript at runtime. His weather-agent experiment produced an entire interface in one tool call, without predefined components. That approach creates a trust problem because generated code needs containment. Casas argues that MCP apps are a strong delivery mechanism because they provide sandboxing through a default double iframe, along with authentication, tool calls, and message passing. He expects interfaces to move toward shared spaces where people and agents edit the same artifact, rather than simply displaying agent output.

Key ideas
00:07

Models now write frontend code that can exceed what developers expect from a prompt

Casas begins with the old workflow: ask ChatGPT for a component, request code blocks, copy the result, fix it, and repeat. He calls this "the poor man's by coding." He says models improved sharply in late 2025, with GPT 5.2 and Opus 4.5 producing high-fidelity working interfaces. When he asked a model to rewrite his blog, it added a search box, a blur animation, and accessibility without being asked. That experience changed his view of model-written frontend code. He now accepts that a model can write frontend code better than he can in some cases.

03:13

Agent interfaces are still searching for a language suited to the new computer

Casas uses Andrej Karpathy's description of an AI system as a new computer with direct access to the operating system. The comparison is to the 1970s, when computers were mainly text-based and the graphical interface had not yet been invented. Chat is useful for now, but Casas does not think it is the final interface. He also discusses a super-app model, where ChatGPT, Claude, or Gemini renders third-party interfaces through MCP apps. These options answer where the UI runs. His talk focuses on a separate question: what the model generates.

06:04

Static UI lets agents fill developer-built components with data and props

In the static approach, an agent makes a tool call through MCP apps or directly, then passes parameters and data into predefined components. The client renders those components in a familiar pattern that resembles a server sending data to a frontend. Casas names AG UI as an example, where a client tool maps to a React component and receives props. He also describes Goose Auto Visualizer, which accepts different kinds of data, organizes it, and matches it to a set of components created by the Goose team. This remains the most common approach for agent interfaces.

07:31

Declarative UI gives models more control while keeping a controlled component system

Declarative UI keeps the components, design system, and rendering controls built by developers. The model generates a descriptor instead, usually JSON or YAML, which a translation and rendering engine converts into the final interface. Casas compares this with Netflix's personalized homepages, where the arrangement changes for each person while the UI elements still come from Netflix's component system. He discusses Vercel's JSON Render, including its YAML support, as a current example. He thinks declarative generative UI is the right balance today because it adds personalization and dynamic interaction while preserving predictability, speed, and potentially lower token use.

10:06

Fully generative UI lets the model write the interface at runtime

The next level removes the predefined component and translation layer. A model can generate HTML, CSS, and JavaScript on demand, either from the agent itself or through another model. Casas describes a Postman experiment with a weather agent. In one tool call, the system queried a weather API, created a joke, and generated the complete interface. The result was a random but imaginative UI created by the agent. This approach gives the model much more freedom, but it also means the client receives code rather than structured data for a known component set.

11:38

Generated code needs a boundary before it can be delivered to users

Casas says generated UI creates a trust problem. If third-party code should not be trusted automatically, code generated by an LLM should not simply be presented to users either. Fully generative UI needs a distribution model with containment and a sandbox. He connects this requirement to MCP apps, which use a double iframe as the default for third-party UI delivery. He also points to authentication, tool calling, and message passing between the UI and the agent. These properties make MCP apps useful even when the generated interface comes from a first-party system.

12:22

MCP apps can carry first-party interfaces as well as third-party ones

Casas argues that MCP apps are not limited to embedding outside interfaces inside an agent environment. He points to Anthropic's visualizer feature, saying Anthropic could have built a private rendering architecture for its own interactions but chose MCP apps instead. In his view, that choice suggests the protocol already supplies useful delivery features out of the box. The same approach can be used by teams building their own interfaces. Casas sees this as especially relevant when coding models generate UI on the fly, since the delivery layer has to provide both communication with the agent and a boundary around the code.

14:29

The next interface may be a shared artifact that people and agents edit together

Casas rejects the idea that floating windows are the only obvious future for agent interfaces. He compares the current period with early television, when shows were filmed versions of radio programs because creators had not yet imagined what television could become. He expects interfaces to move beyond agents acting as orchestrators that return visualizations. He cites the Excalidraw MCP app, where an agent creates a shared canvas and a person can ask for changes, click around, and modify the artifact directly. The result is an interaction space that supports back-and-forth work instead of displaying a finished response.

"I think in at this point in time, declarative generative UI is probably the perfect balance today in terms of flexibility and consistency."09:27
Who should watch
  • You are building an agent interface and need to choose between predefined components, declarative rendering, and runtime-generated code.
  • Your product embeds MCP apps and you need to understand why sandboxing and containment matter for generated UI.
  • You are exploring collaborative agent workflows where a person and an agent edit a shared visual artifact.