A2UI and MCP Apps integration
A2UI and MCP Apps are complementary. MCP connects models to tools and resources; A2UI describes UI intent for native rendering; MCP Apps package custom web experiences in a sandbox. The right architecture may use one or combine both.
Pattern 1: A2UI over MCP
An MCP server returns A2UI as an embedded resource using:
- MIME type:
application/a2ui+json - URI scheme:
a2ui://... - delivery:
resources/readfor static payloads ortools/callfor parameterized payloads
Choose this when forms, cards, tables, charts, or approval steps can be composed from the host’s trusted component catalog. The host keeps native styling, accessibility, and component-level policy enforcement.
Pattern 2: MCP Apps inside A2UI
An A2UI catalog exposes a reviewed wrapper component capable of hosting an MCP App. Native A2UI components surround the isolated app, while the iframe handles a complex canvas, game, editor, or legacy module.
Choose this when most of the workflow should remain native but one module needs arbitrary client-side behavior. Treat the wrapper as a high-risk capability: use an explicit allowlist, a restrictive sandbox, a narrow bridge API, and visible trust attribution.
Pattern 3: A2UI inside an MCP App
The MCP App bundles an A2UI renderer and mounts generated surfaces inside its sandbox. This adds generative UI to a host that supports MCP Apps but has no native A2UI renderer.
Choose this as a compatibility bridge for an existing host. It does not provide the same native integration as a host-owned renderer because the final accessibility tree, styling, and runtime still live inside the iframe.
Decision table
| Requirement | Preferred pattern |
|---|---|
| Native host design system and standard workflow controls | A2UI over MCP |
| One complex, isolated web module in a native workflow | MCP App inside A2UI |
| Existing MCP Apps host with no A2UI support | A2UI inside an MCP App |
| Fully open-ended agent generation with conversational context | A2UI over an agent transport such as A2A or AG-UI |
Security boundary
Do not equate declarative with automatically safe. Validate A2UI messages, restrict catalogs, sanitize URL-bearing properties, cap tree size, and log actions. For MCP Apps, additionally enforce sandbox flags, origin policy, resource integrity, message schemas, and user-visible origin attribution. See the production security checklist.