The world of agentic workflows is rapidly evolving, moving far beyond simple text conversations to embrace rich, interactive user interfaces. This exciting shift, however, has historically presented developers with a tricky challenge: how do you balance the need for deep UI customization with the desire for seamless integration?
Until now, developers often found themselves at a crossroads. They typically had to choose between crafting highly tailored experiences using custom iFrames, which offered flexibility but came with integration complexities, or relying on native UI rendering, which provided effortless integration but often limited deep customization.
We’re thrilled to introduce a groundbreaking approach that resolves this long-standing dilemma. By unveiling three innovative architectural patterns, we demonstrate how to achieve seamless integration between **A2UI** (Agent-to-UI) and **MCP Apps** (Model Context Protocol Applications). These patterns are designed to empower you, the developer, to leverage native component rendering for standard UI elements, while reserving custom iframe embedding for those truly unique and complex user experiences.
Revolutionizing Generative UI: A2UI Over MCP
Our first pattern, **A2UI over MCP**, allows developers to easily incorporate rich, natively rendered UIs into their tools. This approach ingeniously pairs the simplicity and wide adoption of MCP tool connectivity with the power of native A2UI rendering, making dynamic interfaces more accessible than ever.
This innovative method significantly lowers the barrier to entry for embracing generative UI. It delivers the advantages of dynamic interfaces without the extensive overhead of building a complete Agent-to-Agent (A2A) architecture or wrestling with intricate discovery mechanisms.
Imagine a smart recipe application powered by this architecture. The left panel, a simple form, lets users select cooking style and protein type, while the right panel dynamically displays a recipe card. Both panels are generated by A2UI and retrieve their payloads directly from an MCP server, rendered seamlessly by the A2UI framework. This means the host application avoids maintaining complex UI component logic, yet effortlessly maintains a consistent design through shared theming.
For an MCP server to return A2UI payloads, it sends a **structured JSON payload with a specific MIME type: `application/a2ui+json`**. Developers can utilize two distinct delivery mechanisms for this payload, ensuring flexibility for various use cases.
- Static Delivery via MCP Resources (`resources/read`): For workflows requiring stable, prescriptive interfaces that remain consistent regardless of conversation context, A2UI payloads can be served as standard MCP Resources. The host application simply retrieves a dedicated URI, and the server delivers the immutable JSON structure directly.
- Dynamic Delivery via MCP Tool Calls (`tools/call`): To unlock genuine generative UI and live data injection, clients can invoke an MCP Tool. The backend executes logic to retrieve real-time context, allowing the agent to dynamically assemble the A2UI layout, returning this bespoke payload as an embedded resource within the `CallToolResult`.
You can see this architecture firsthand by exploring the A2UI-over-MCP Quick Start guide. It features an interactive demo where a static A2UI surface (the recipe selection form) and a dynamic A2UI surface (a custom-generated recipe card) run side-by-side, showcasing the power of this integration.
Many engineering teams ask how A2UI-over-MCP differs from native A2A architectures beyond just the transport protocol. The key distinction lies in the level of dynamism and orchestration complexity. While MCP Tools typically yield deterministic results, developers can orchestrate an agentic layer behind the tool call, if desired, to deliver a more generative UI experience through A2UI-over-MCP. However, the context driving the UI generation will remain limited to the tool parameters and the prescribed prompt for the backend agent.
Hybrid Power: MCP Apps as A2UI Components
While A2UI over MCP is perfect for native integration, some scenarios demand the isolated, highly custom environment of an MCP App. Our second pattern addresses this by allowing you to encapsulate an **MCP App within an A2UI component**, without disrupting the host’s native design system or security boundaries. This hybrid methodology empowers engineers to delegate complex, state-intensive modules to a secure iframe for highly tailored experiences, while ensuring primary interfaces remain aligned with the host’s native design and maintain robust state synchronization.
Consider a captivating demo application that showcases this powerful integration. A server-side agent responds with an A2UI payload, one of its components being an MCP App containing the full code for a web-based Pong game. Critically, the A2UI payload also includes two scorecards that are *not* part of the embedded MCP App.
As the user plays Pong against the CPU, the paddle control and ball position states are governed entirely by the code within the embedded MCP App. However, every time a score changes, this event is relayed to the Agent. This enables the native A2UI components to rehydrate with the updated score, achieving seamless state synchronization across all components – both native A2UI and the embedded MCP App – on the A2UI surface.
To achieve this seamless hybrid approach, developers define a custom A2UI component that acts as a secure iframe wrapper, often referred to as an **MCP App Component**. This generalized wrapper can securely hold any standard MCP App and provides a crucial bridged channel for the app to communicate with the outside world. When an agent requests it, the MCP server transmits the app’s HTML and JavaScript assets, which the agent then embeds within a structured A2UI JSON, integrating it with specified component parameters. This consolidated JSON is dispatched to the host, and the MCP App is rendered within its iframe wrapper alongside other native A2UI components.
The A2UI Rendering Engine intelligently maintains state across both native components and embedded MCP Apps using a secure, event-driven cycle called **state synchronization**. Rather than relying on real-time DOM scraping or state polling, synchronization follows an explicit interception loop, ensuring smooth and reliable interaction. You can dive into this architecture yourself with our MCP Apps in A2UI Quick Start guide, featuring a live client with an AI Agent, MCP Server, and an Angular implementation of a generic MCP App wrapper component for a Calculator App and a Pong Game.
Self-Contained Power: A2UI Embedded within MCP Apps
Our third architectural pattern serves as a powerful modernization bridge, allowing developers to inject dynamic, agent-driven UIs into legacy applications or non-A2UI environments without requiring a complex architectural overhaul. In this innovative setup, the **MCP App bundle contains its own A2UI renderer**. This means the MCP App can bridge a tool call to the server to retrieve A2UI payloads, leveraging the A2UI-over-MCP mechanics we discussed earlier.
Once the A2UI JSON payload is received, the MCP App parses and renders it entirely within its own iframe boundary. By absorbing the generative UI complexity into a self-contained renderer, this pattern allows developers to bring dynamic AI-driven interactions to existing systems with minimal to no architectural overhaul, removing the need for native A2UI support within the host environment.
Consider a demo application showcasing an A2UI embedded MCP App: an online text editor retrieved from an MCP Server. This particular MCP App is packaged with the A2UI library, granting it the capability to render A2UI JSON Payloads as dynamic UI elements. By incorporating the A2UI-over-MCP technology from Pattern 1, this MCP App can effectively communicate with the MCP Server to support generative UI features via the A2UI protocol.
In this demo, the user initiates AI-assisted text-editing by highlighting a portion of text. The backend server receives this text as an argument to devise contextually relevant parameters for editing. These controls are then served via A2UI, and the MCP App renders them upon receiving the payload. Users can adjust these parameters to direct the AI, and when “Generate Revision” is clicked, the AI Agent provides an edit suggestion based on their input. This seamless integration offloads the complexity of generative UI directly to the embedded application itself.
The embedded MCP App communicates with a backend AI Agent using the App Bridge and the A2UI-over-MCP mechanics. Any response it receives from the MCP Server containing the MIME type `application/a2ui+json` is automatically treated as an A2UI Payload and delegated to the bundled A2UI library for rendering. This powerful self-contained loop allows the AI Agent behind the MCP Server to leverage large language models (LLMs) to produce context-relevant control parameters and text revisions from provided arguments, creating a truly intelligent and dynamic user experience.