A2UI + MCP Apps: Combining the most effective of declarative and customized agentic UIs

As agentic workflows evolve past easy textual content exchanges to wealthy UIs, builders face a persistent trade-off between deep customization and seamless integration.

Till now, builders usually had to decide on between two distinct paths:

Mannequin Context Protocol (MCP) Apps supply inventive freedom inside an iframe utilizing normal internet applied sciences. Nevertheless, this reliance on iframes for these purposes can result in a fragmented person expertise, characterised by aesthetic inconsistencies like clashing design programs or redundant scrollbars, whereas concurrently presenting notable hurdles in each computational efficiency and safety encapsulation.
Agent-to-Person Interface (A2UI) makes use of a declarative framework. As a substitute of sending uncooked HTML, CSS, and JavaScript, A2UI employs a JSON payload to outline what to render, permitting the host utility to deal with the presentation by means of its native elements. The host utility then securely converts this knowledge into its personal native UI components. Whereas this ensures constant design and enhanced safety, builders are restricted to a particular element library. This technique gives a performant, safe, and built-in expertise, significantly for structured knowledge like charts and types, however struggles with advanced client-side logic.

To handle these trade-offs, we’re sharing three architectural patterns, with implementation guides and pattern code to exhibit seamless integration of A2UI and MCP Apps. We’re contemplating making a MCP extension to help A2UI, making these patterns simpler to undertake. Tell us if you happen to’re .

Integrating these two approaches permits builders to leverage native element rendering for traditional UI components, whereas reserving customized iframe embedding for extremely tailor-made, advanced experiences.

Sample 1. Utilizing A2UI over MCP servers

Serving A2UI over MCP servers permits builders so as to add wealthy, natively rendered UIs to their instruments as an alternative choice to MCP Apps. It pairs the simplicity of broadly adopted MCP instrument connectivity with native A2UI rendering.

This strategy lowers the barrier to entry for builders adopting generative UI. It gives the advantages of dynamic UI with out the overhead of constructing a full Agent-to-Agent (A2A) structure or coping with advanced discovery mechanisms.

Architectural Benefits

Bypassing iframe limitations: Utilizing MCP Apps for UI in MCP servers, inflicting visible disjointment and lag. A2UI-over-MCP bypasses the iframe, permitting the host utility to natively render the agent’s intent utilizing its personal design system.
Separation of considerations: MCP handles backend instruments and knowledge entry, whereas A2UI handles frontend element rendering. This retains agent logic clear and targeted on reasoning moderately than UI implementation particulars.
Enhanced setting portability: An MCP server can feed knowledge to an A2UI shopper that renders on React, Flutter, or Angular with out customized wiring. It gives “write-once, render-natively wherever” capabilities, fixing the issue the place a server should put together a novel response for each totally different floor.
Simplified safety: Information flowing from MCP instruments integrates with A2UI’s secure-by-default JSON structure. In contrast to conventional strategies passing uncooked HTML, A2UI makes use of a capability-based safety mannequin the place the shopper solely renders trusted elements from a predefined catalog.
Accelerating Growth Cycles: Experience in crafting MCP Instruments or defining Sources now interprets immediately into the flexibility to generate refined person interfaces. By using the A2UI Agent SDK, engineering groups can bypass the complexities of handbook JSON authoring, because the library manages schema enforcement and validation natively.

See it in motion

Beneath is a demo utility that’s powered by the A2UI-over-MCP structure. The appliance consists of two panels.The left panel comprises a easy kind that enables customers to pick out cooking model and protein kind, and the appropriate panel shows a recipe card. Customers choose the cooking model and protein varieties within the left panel and click on on the “Get Recipe” button to fetch a brand new recipe card to be displayed on the appropriate panel.

Each panels on this app are generated by A2UI, and each leverage the A2UI-over-MCP structure the place A2UI payloads are retrieved immediately from an MCP server and immediately rendered with the A2UI framework. By leveraging the A2UI framework for rendering the UI, the host utility doesn’t have to take care of any UI element logic whereas sustaining a design consistency by merely making use of its personal theming to the A2UI elements.

Sorry, your browser would not help playback for this video

The A2UI-over-MCP Recipe Studio in motion

Underneath the hood: The way it works

As a substitute of an MCP server returning a regular textual content response or a bundled HTML/JS internet app, for an MCP server to return A2UI payloads, it returns a structured JSON payload with a particular MIME kind: utility/a2ui+json.

{
  "content material": [
    {
      "type": "resource",
      "resource": {
        "uri": "a2ui://dynamic-ui/recipe-card",
        "mimeType": "application/a2ui+json",
        "text": "[
          { "version": "v0.9",
            "createSurface": { ... }
          }
        ]"
      }
    }
  ]
}

JSON

Instance: A2UI payload delivered as Embedded Useful resource through MCP Software Name] — See the complete pattern code on GitHub

Builders can leverage two distinct supply mechanisms for this payload: through MCP Sources (sources/learn) or by means of MCP Software invocations (instruments/name). Whatever the technique, the endpoint makes use of the a2ui:// URI scheme. Upon receipt, an A2UI-capable host setting mechanically directs the JSON construction to its native rendering engine for execution.

Implementation technique: Static versus Dynamic Supply

1.Static Supply through MCP Sources (sources/learn)

For workflows requiring prescriptive interfaces that stay fixed no matter dialog context, builders can serve A2UI payloads as normal MCP Sources. The host utility merely retrieves a devoted URI—for instance, a2ui://config-panel—and the server delivers the immutable JSON construction immediately.

Very best use circumstances: Foundational elements reminiscent of privateness notices, standardized configuration types, or persistent desire settings.
Key Profit: This strategy ensures excessive predictability and environment friendly caching with zero computational overhead, because it removes the necessity for real-time UI synthesis by the LLM.

2.Dynamic Supply through MCP Software Calls (instruments/name)

To unlock genuine generative UI and dwell knowledge injection, purchasers can invoke an MCP Software. The backend executes logic to retrieve real-time context, permitting the agent to assemble the A2UI structure dynamically. This bespoke payload is then returned as an embedded useful resource throughout the CallToolResult.

Very best use circumstances: Reactive knowledge visualizations, context-aware climate modules, or customized content material playing cards tailor-made to particular person necessities.
Key Profit: Supplies architectural versatility, empowering brokers to construct refined, native-feeling experiences that reply to person goals.

Structure Diagram: An agent makes use of MCP to retrieve native dataset context and A2UI to stream a dynamic knowledge visualization element on to the shopper.

Discover the code

To see this structure in motion, take a look at the A2UI-over-MCP Fast Begin information to run A2UIxMCP Recipe Studio Net App proven within the demo above. This interactive demo encompasses a static A2UI floor loaded from an MCP Useful resource (a recipe choice kind) and a dynamic A2UI floor served from an MCP Software (a customized generated recipe card) operating side-by-side.

Understanding the variations: A2UI over MCP vs. A2UI over A2A

A frequent level of inquiry amongst engineering groups is how the A2UI-over-MCP implementation differs from native Agent-to-Agent (A2A) architectures past the transport protocol. The excellence lies within the degree of dynamism and orchestration complexity:

A2UI over MCP (Sources): Static and prescriptive UI. That is the optimum alternative for inflexible structural necessities reminiscent of fastened knowledge entry types.
A2UI over MCP (Instruments): Templated and dynamic UI based mostly on instrument parameters. It might probably additionally serve static and prescriptive UI too. The dynamic controls are restricted to the instrument’s enter parameters.
A2UI over A2A: Totally generative and open-ended throughout the scope of the elements within the supported catalogs. The agent has full conversational context and drives UI development on the fly. This strategy also can serve templated UI and static UI if desired.

Whereas engineers sometimes leverage MCP Instruments for deterministic outcomes, these endpoints are usually not inherently restricted to static logic. Though using a backend LLM is unconventional in normal MCP Software configurations, builders can orchestrate an agentic layer behind the instrument name to serve a extra generative UI expertise by means of the A2UI-over-MCP structure in the event that they select to take action. Nevertheless, the context for driving the UI era will stay restricted to the too parameters and the prescribed immediate for the backend agent.

Sample 2. Operating MCP Apps in A2UI Parts

Whereas A2UI over MCP is good for native integration, generally you want the remoted, extremely customized setting of an MCP App. You’ll be able to obtain this by encapsulating an MCP App inside an A2UI element with out disrupting the host’s native design system or safety boundaries. By encapsulating an MCP App inside an A2UI element, engineers can delegate advanced, state-intensive modules to a safe iframe for extremely tailor-made experiences.

This hybrid methodology empowers engineers with inventive flexibility for intricate, state-intensive modules, whereas guaranteeing the first interfaces to stay aligned with native design of the host and keep strong state synchronization protocols.

Architectural Benefits

Model Consistency and Managed Delegation: The host maintains design management over the UX exterior of the MCP App iframe, whereas rigorously delegating the UX contained in the MCP App to exterior instrument builders
Specialised Capabilities: Advanced, state-intensive modules — reminiscent of interactive video games with real-time state transition, or intricate workflows with bespoke validation logics like live performance seat choice — are sometimes difficult to construct with purely declarative elements. Embedding an MCP App solves this by giving builders inventive freedom the place they want it most.
Safe State Alignment: The host utility maintains synchronization with the MCP App’s inside state through a regulated, event-based loop. By using the A2UI Rendering Engine as an middleman, this structure ensures state consistency whereas conserving the context of the first setting separate from the third-party code.

See it in motion

Beneath is a demo utility that showcases the MCP App as an A2UI element. The server-side Agent responds with an A2UI payload, through which one of many elements is an MCP App element whose enter parameter contains the complete code of a web-based Pong Sport. The A2UI payload additionally contains 2 rating playing cards that aren’t a part of the MCP App.

When the person begins enjoying the Pong Sport towards the CPU, the management of the paddle and the ball place states are ruled by the code throughout the embedded MCP App. But, each time there’s a rating, this occasion is relayed to the Agent and the native A2UI elements are rehydrated with the up to date rating permitting state synchronization throughout all elements (native A2UI and MCP App) within the A2UI floor.

Sorry, your browser would not help playback for this video

Instance: A2UI Pong Sport in Motion

Underneath the hood: The way it works

To attain this hybrid strategy, builders outline a customized A2UI element that acts as a safe iframe wrapper (known as MCP App Element). This generalized wrapper can maintain any normal MCP App and gives a bridged channel for the app to speak with the surface world.

Every time an agent requests, the MCP server transmits the app’s HTML and JavaScript belongings to the agent. The agent then embeds the applying code inside a structured A2UI JSON, integrating it with the desired element parameters. The consolidated JSON is dispatched to the host and the MCP App is rendered throughout the above iframe wrapper alongside with the opposite A2UI native elements.

The A2UI Rendering Engine maintains the state throughout each the native elements and the embedded MCP Apps utilizing a safe, event-driven cycle, which we check with as state synchronization. Moderately than counting on real-time DOM scraping or state polling, synchronization follows an specific interception loop:

Interception and Conversion: When key state transitions happen contained in the MCP App (e.g., some extent is scored in Pong Sport), the app triggers a regular MCP instrument name. The wrapping A2UI element layer intercepts this request regionally, maps the JSON arguments into structured A2UI Motion context, and instantly returns an acknowledgment so the app’s native UI loop is unblocked.
Request Routing: The host utility packages this transformed context as an A2UI Motion and routes it to the backend AI Agent. The agent capabilities because the overarching coordinator, monitoring solely macro “key-states” (reminiscent of recreation rating or reservation affirmation) with out conserving observe of micro-states (reminiscent of paddle/ball coordinates or short-term kind inputs).
Hydration: As soon as the agent evaluates the general floor state, it returns a formatted DataModel Replace JSON. The A2UI engine immediately updates native elements (like a scorecard) and pushes this up to date useful resource by means of the App Bridge to re-hydrate the inside MCP App’s inside state.

Discover the code

To see this actual structure in motion, take a look at our MCP Apps in A2UI Fast Begin information to run a dwell shopper. This interactive demo options an AI Agent built-in with an MCP Server that may serve a Calculator App and a Pong Sport which could be served in an Angular implementation of a generic MCP App wrapper element.

Sample 3. Operating A2UI inside MCP Apps

This sample serves as a strong modernization bridge, permitting builders to inject dynamic, agent-driven UIs into legacy purposes or non-A2UI environments with out requiring a posh architectural overhaul.

On this sample, the MCP App bundle comprises its personal A2UI renderer. To fetch the dynamic A2UI interfaces, the MCP App bridges a instrument name to the server to retrieve the A2UI payload, leveraging the A2UI-over-MCP mechanics mentioned earlier. As soon as the A2UI JSON payload is acquired, the MCP App parses and renders them totally inside its personal iframe boundary. By absorbing the generative UI complexity right into a self-contained renderer, this sample permits builders to deliver dynamic AI-driven interactions to current programs with minimal to no architectural overhaul.

Architectural Benefits

Generative UI for non-A2UI hosts: This enables an MCP App to supply agent-driven A2UI capabilities even when the host setting doesn’t natively help A2UI itself.
Upgrades for legacy programs: Legacy purposes solely have to help a fundamental MCP App iframe container. The MCP App absorbs all of the generative UI complexity, unlocking dynamic AI interactions for older programs with minimal engineering effort.
Self-contained interplay loop : As a result of the A2UI renderer lives totally throughout the iframed MCP App’s boundary, native state transitions (e.g., accepting / rejecting doc revision) could be dealt with securely and immediately throughout the app. Solely managed, predefined context is relayed again by means of the App Bridge to the host.

See it in motion

Beneath is a demo utility that showcases the A2UI embedded MCP App. The host app hundreds an MCP App that provides a web based text-editor retrieved from an MCP Server. This MCP App is packaged along with the A2UI library which gives the potential to render A2UI JSON Payload as UI. By incorporating the A2UI-over-MCP expertise mentioned in Sample 1, this MCP App can successfully talk with the MCP Server to help generative UI options through A2UI protocol.

On this demo, the person kicks off their AI-assisted text-editing by highlighting a portion of the textual content. When the person highlights the textual content, the backend server takes the textual content as an argument to plot contextually related parameters for enhancing the textual content. These controls are served through A2UI, and the MCP App renders them on receiving this payload. Customers can then alter the parameters to direct the AI on how they need to edit the components. When the person clicks on “Generate Revision”, the AI Agent will take these parameters into consideration and supply an edit suggestion to the person.

Sorry, your browser would not help playback for this video

Instance: A Generative Doc Editor

Underneath the hood: The way it works

In distinction to the opposite patterns, this architectural sample removes the necessity for native A2UI help throughout the host setting. By packaging the A2UI rendering engine immediately throughout the MCP App bundle, builders can offload the complexity to the embedded utility itself.

By leveraging the App Bridge, the embedded MCP App communicates with a backend AI Agent utilizing the A2UI-over-MCP mechanics from Sample 1. Any response it receives from the MCP Server containing the MIME kind utility/a2ui+json is handled as an A2UI Payload and delegated to the A2UI library for rendering.

To attain the options which might be generative in nature, this demo app has an AI Agent sitting behind the MCP Server. This enables the MCP Software Calls to leverage LLM to provide context-relevant management parameters and textual content revisions from the offered arguments.

The next interplay lifecycle governs this self-contained loop:

Context Set off: A person engages with the first interface, reminiscent of by highlighting a particular passage inside a doc editor.
Occasion Relay: The App Bridge transmits this occasion to the host through postMessage, which subsequently routes the context to the backend AI agent.
Generative Payload Return: The agent evaluates the necessities and returns a bespoke A2UI JSON payload, which can embody dynamic sliders or specialised enhancing controls, through the MCP Server.
Inner Rendering: Upon figuring out the applying/a2ui+json MIME kind, the app’s inside renderer dynamically mounts the interface within the designated panel.
Managed Communication: Excessive-level person actions are relayed by means of the bridge for backend processing, whereas native state transitions—like accepting or rejecting revisions—are managed immediately throughout the app sandbox to take care of safety isolation.




  
    MCP App (Editor Panel)
    This textual content is native to the sandboxed third-party app.

HTML

Instance: A high-level overview of an embedded MCP App’s useful logic. It highlights the usage of postMessage for host communication, the retrieval of dynamic A2UI layouts, and the relay of person interactions again to the server.

Discover the code

To see this actual structure in motion, take a look at our A2UI in MCP Apps Fast Begin information to run a dwell shopper. This interactive demo options the MCP App containing its personal A2UI rendering engine to help generative text-editing expertise for customers.

Conclusion

Combining A2UI and MCP Apps helps your agentic UIs stay safe, succesful, and native-feeling with out sacrificing inventive expressiveness. This unified strategy permits you to bypass iframes when rendering UI with instruments (A2UI over MCP), show wealthy customized canvases inside declarative views (MCP Apps in A2UI), and simply drop dynamic UIs into current internet apps (A2UI in MCP Apps).

Choosing the proper structure

A2UI is a versatile message format which could be transmitted from any backend to any frontend. That flexibility means there are plenty of choices for the way you should utilize it.

That will help you navigate these choices, use the choice tree under to search out the optimum structure in your mission’s particular constraints and necessities:

Choice Framework: Navigate the architectural resolution tree above to establish the optimum supply sample in your particular agentic necessities.