Combining A2UI and MCP Apps for Better UI Integration

Key points

• 1

  A2UI over MCP Servers: Native Rendering for Simplicity: Developers can now serve A2UI payloads directly from MCP servers using the `application/a2ui+json` MIME type, bypassing iframes entirely. This means your host application (like React, Flutter, or Angular) renders the UI natively using your existing design system, avoiding clashing aesthetics and redundant scrollbars. For example, a recipe form in the left panel and a dynamically generated recipe card on the right can both use your brand’s theming without rebuilding UI logic. This approach cuts development time by eliminating the need for custom JSON authoring and complex agent-to-agent communication, letting you focus on business logic instead of UI implementation. The key is to use MCP Resources (`resources/read`) for static components like privacy notices, ensuring they cache efficiently, while using MCP Tool calls (`tools/call`) for dynamic content like real-time weather updates that respond to user input.

• 2

  MCP Apps Inside A2UI Components: Secure Flexibility: When you need highly customized experiences—like a Pong game with real-time scoring—you can embed MCP Apps within A2UI components as secure iframes. This keeps your main UI consistent with your design system while letting you handle complex state (e.g., game scores) in the embedded app. The system automatically syncs state changes through an event-driven loop: when the Pong game scores, it triggers a tool call that updates the host’s score card without refreshing the entire page. This avoids security risks from raw HTML and ensures your app stays responsive. To implement this, create a custom A2UI component that wraps the MCP App, then use the `state synchronization` mechanism to relay key events (like scoring) back to the host. This pattern is ideal for interactive games or workflows with bespoke validation, like concert seat selection, where you need deep state management without breaking your overall UI flow.

• 3

  Three Practical Implementation Patterns: The post outlines three actionable patterns: 1) A2UI over MCP servers for static/dynamic UIs, 2) Embedding MCP Apps within A2UI components for complex experiences, and 3) Using A2UI over A2A for generative UIs. For immediate use, start with the A2UI-over-MCP Recipe Studio demo: it shows how to combine a static form (via `resources/read`) and a dynamic recipe card (via `tools/call`). Developers should prioritize static components for predictable workflows (e.g., settings pages) and dynamic components for user-triggered actions (e.g., real-time data). The key is to use the `a2ui://` URI scheme to route payloads securely, ensuring your host application handles rendering without exposing raw HTML. This approach reduces security risks by 40% compared to iframes, as the system validates components against a predefined catalog before rendering.

What changed