Google Developers Combine A2UI and MCP Apps to Bridge Custom and Declarative UI Approaches

Developers building agentic workflows have long faced a choice between two UI paradigms, each with distinct trade-offs. Google Developers Blog now offers a path forward through hybrid architectural patterns.

The Trade-Off Problem

Model Context Protocol (MCP) Apps grant developers creative freedom through standard web technologies in isolated iframes, but this isolation creates visual inconsistencies, performance overhead, and security concerns. Agent-to-User Interface (A2UI), by contrast, uses declarative JSON payloads to define UI elements that the host renders natively—ensuring design consistency and security at the cost of customization flexibility.

Three Integration Patterns

Google's guidance proposes three architectural approaches:

1. A2UI Over MCP Rather than embedding full web apps in iframes, this pattern serves A2UI payloads directly from MCP servers. Two delivery methods exist:

• Static resources (via MCP Resources): ideal for fixed forms and configuration panels, with zero LLM overhead
• Dynamic tools (via MCP Tool calls): agents assemble UIs in real time based on context, enabling reactive data visualizations and personalized content

This approach eliminates iframe overhead, maintains host design systems, and solves portability—an MCP server's output can render natively across React, Flutter, or Angular without custom wiring.

2. MCP App as A2UI Component For genuinely complex interactions requiring client-side state management (like interactive games or seat selection), developers can embed an MCP App within an A2UI component. The host maintains design control and state synchronization occurs through an event-driven loop: when the iframe's internal state changes, it triggers a tool call intercepted by the wrapper, which routes the update to the agent and hydrates affected native components. This hybrid preserves brand consistency while delegating specialized modules to developers.

3. A2UI-Embedded MCP App The MCP App itself bundles an A2UI renderer. This unlocks dynamic AI-driven interactions in legacy systems that lack native A2UI support—the host only needs a basic iframe container, while the app handles all generative UI complexity internally.

Practical Implications

The patterns lower the barrier to generative UI adoption. Developers familiar with MCP tools can now generate sophisticated interfaces without building full Agent-to-Agent (A2A) architectures. Google notes it is considering a formal MCP extension to simplify these patterns and invites developer feedback.

Demo applications showcase each pattern in action, from recipe-card generators to embedded Pong games with live score synchronization.