{"id":33324,"date":"2026-05-01T21:28:26","date_gmt":"2026-05-01T19:28:26","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=33324"},"modified":"2026-05-13T12:43:25","modified_gmt":"2026-05-13T10:43:25","slug":"integrating-a2ui-with-ag-ui-in-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/","title":{"rendered":"Integrating A2UI with AG-UI in Angular"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 5 of 6 in the series “Agentic Angular”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Understanding AG-UI: The Standard for Agentic User Interfaces<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. AG-UI in Practice: The SDK for TypeScript<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Implementing AG-UI with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. A2UI: How AI Generates Dynamic UIs at Runtime<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. Integrating A2UI with AG-UI in Angular<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    From the hardcoded example to a real agent connection via AG-UI.<\/em><\/p>\n

    In practice, A2UI messages don't come from static code, but from the responses of a real language model \u2013 and these first need to be transported from the agent to the client. AG-UI offers the right transport layer for this, but the official specification leaves open how A2UI is to be transmitted over it. This article shows a pragmatic solution and an Angular abstraction that connects both protocols.<\/p>\n

    This second part of the three-part series picks up where the first part left off, where we still ran A2UI and the Angular renderer with hardcoded messages.<\/p>\n

    \ud83d\udcc2 Source Code<\/a> (see branch a2ui-dynamic<\/code>)<\/p>\n

    How Do You Transmit A2UI Messages over AG-UI?<\/h2>\n

    So far we've looked at A2UI in isolation. In practice, however, the client communicates with the agent via HTTP calls. This is exactly where the protocol AG-UI<\/a>, mentioned in the previous article in this series, comes into play, standardizing the communication between frontend and agent.<\/p>\n

    We can elegantly embed A2UI into this world by transmitting the A2UI messages inside an AG-UI message of type ACTIVITY_SNAPSHOT<\/code>. The browser's developer tools show such a snapshot:<\/p>\n

    \"Browser<\/p>\n

    In textual form, the snapshot looks like this:<\/p>\n

    {\n  "type": "ACTIVITY_SNAPSHOT",\n  "messageId": "call_6mk44Dh0MNnmPDETq7tvjkON",\n  "activityType": "a2ui-surface",\n  "content": {\n    "operations": [\n      {\n        "version": "v0.9",\n        "createSurface": {\n          "surfaceId": "srf-france-confirm",\n          "catalogId": "https:\/\/a2ui.org\/specification\/v0_9\/basic_catalog.json"\n        }\n      },\n      {\n        "version": "v0.9",\n        "updateComponents": {\n          [...]\n        }\n      },\n      {\n        "version": "v0.9",\n        "updateDataModel": {\n          "surfaceId": "srf-france-confirm",\n          "path": "\/dummy",\n          "value": ""\n        }\n      }\n    ]\n  }\n}<\/code><\/pre>\n
    Unfortunately, there is no official definition for how A2UI messages are to be transmitted over AG-UI. The solution shown here, an ACTIVITY_SNAPSHOT<\/code> with a corresponding activityType<\/code>, fits well with the semantics of AG-UI and is also used in this way by the solution CopilotKit<\/a>. Since the makers of CopilotKit are among the initiators of AG-UI, their interpretation of the standard naturally carries significant weight.<\/p>\n
    As an alternative to an ACTIVITY_SNAPSHOT<\/code>, a server-side tool call would also be conceivable, especially since AG-UI informs the client about tool calls and their results. In this case, however, the client and agent would have to agree on the name of such a tool that delivers A2UI as its result.<\/p>\n
    Angular Abstraction for A2UI and AG-UI<\/h2>\n
    There is an Angular renderer for A2UI as well as a TypeScript SDK for AG-UI, but in practice this is not enough to seamlessly integrate both concepts into an application. For convenient use, an additional abstraction layer is required that encapsulates the protocol details.<\/p>\n
    In the example repository, this layer is found in the libs<\/code> folder. For the following considerations, we treat it as a black box and access it through @intern\/ag-ui-angular<\/code>.<\/p>\n
    This implementation guides the language model via prompting to produce A2UI structures \u2013 not directly for the client, however, but as input for a server-side tool. This tool plays a central role: it validates the A2UI messages generated by the LLM and ensures that only consistent and executable structures are processed further.<\/p>\n
    This is crucial, because LLMs are not guaranteed to deliver valid results. If validation fails, the feedback is sent back to the model so that it can try again. Only when a valid structure is available is it forwarded.<\/p>\n
    The server-side implementation then transforms the validated A2UI messages into an ACTIVITY_SNAPSHOT<\/code>. This becomes part of the regular AG-UI stream and can therefore be processed uniformly by the client abstraction.<\/p>\n
    A small but practical convention helps when dealing with charts: since A2UI itself does not provide a chart component, we explicitly instruct the LLM in the prompt to render charts via an Image component using a QuickChart<\/a> URL. This is a web service that takes the data to be displayed as URL parameters and returns an image with a chart. This way, the component catalog stays lean while the LLM is given a clear path for visual data.<\/p>\n
    \n
    Alternative Approach<\/strong><\/p>\n
    One possible simplification is to have the LLM not generate A2UI directly, but rather a reduced, use-case-specific DSL (Domain-Specific Language). The server-side tool takes care of translating this DSL into valid A2UI operations and thus acts as a central control instance. From the client's perspective, nothing changes. It still receives an ACTIVITY_SNAPSHOT<\/code> with regular A2UI.<\/p>\n
    The DSL makes generation considerably more robust for the LLM and is particularly suitable for weaker or more cost-effective models. At the same time, more logic shifts to the server, which increases control and stability. The price for this is an additional transformation layer as well as a lower expressiveness and flexibility compared to direct A2UI.<\/p>\n
    An implementation of this approach can be found in the example project on the branch a2ui-dsl<\/code>.<\/p>\n<\/blockquote>\n
    Client-Side Integration with agUiResource<\/code><\/h2>\n
    On the client side, the agUiResource<\/code> takes care of the connection to the agent. It manages the chat history, executes client-side tool calls, and provides the received messages. The consumer registers, among other things, the URL of the agent and the offered client tools with this resource:<\/p>\n
    import { agUiResource } from '@internal\/ag-ui-client';\n\n[...]\n\n@Injectable({ providedIn: 'root' })\nexport class TicketingChatService {\n  private readonly config = inject(ConfigService);\n  private readonly chatStore = inject(ChatRegistry);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private readonly chat = agUiResource({\n    url: this.config.agUiUrl,\n    model: this.config.model,\n    useServerMemory: true,\n    tools: [\n      findFlightsTool,\n      getLoadedFlightsTool,\n      toggleFlightSelectionTool,\n      getCurrentBasketTool,\n      displayFlightDetailTool,\n    ],\n  });\n\n  constructor() {\n    registerHandlers({\n      checkIn: (action) => checkInAction(action),\n      submitAnswer: (action) => submitAnswerAction(action, this.chat),\n    });\n\n    this.destroyRef.onDestroy(() => this.cleanupChat());\n  }\n\n  public init(): void {\n    this.chatStore.setChat(this.chat);\n  }\n\n  private cleanupChat(): void {\n    this.chat.dispose();\n    this.chatStore.clearChat();\n  }\n}<\/code><\/pre>\n
    The helper function registerHandlers<\/code> defines the event handlers and internally delegates to the onAction<\/code> property discussed in the first part. To send a message to the agent, the agUiResource<\/code> provides a sendMessage<\/code> method:<\/p>\n
    this.chat.sendMessage({\n  role: 'user',\n  content: 'Did I book my flight to France?',\n});<\/code><\/pre>\n
    NOTE<\/p>\n
    New: Agentic UI with Angular<\/h3>\n
    If you don\u2019t just want to integrate A2UI but embed it into a scalable architecture:
    \nIn my book Agentic UI with Angular, I cover the underlying patterns and trade-offs in depth.<\/p>\n
    \"Cover<\/a><\/p>\n
    Learn more about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n
    Displaying the Chat History and A2UI Surfaces in the Template<\/h3>\n
    The entire chat history is found in the value<\/code> of the AgUiResource<\/code>. It is a signal containing an array of AgUiChatMessages<\/code> and can be rendered in the Angular template:<\/p>\n
    @for (message of chat.value(); track message.id) {\n\n  @if (message.content) {\n    <div>{{ message.content }}<\/div>\n  }\n\n  @for (widget of message.widgets; track widget.id) {\n    <app-widget-container [widget]="widget" \/>\n  }\n\n  @for (toolCall of message.toolCalls; track toolCall.id) {\n    <div>Tool Call: {{ toolCall.name }}<\/div>\n  }\n\n}<\/code><\/pre>\n
    The agUiResource<\/code> evaluates the ACTIVITY_SNAPSHOT<\/code> messages and attaches the contained A2UI messages to the AgUiChatMessages<\/code>. The WidgetContainer<\/code>, also delivered by @intern\/ag-ui-angular<\/code>, delegates these messages to the A2UI renderer and displays the received surface. To do so, it uses the SurfaceComponent<\/code> of the Angular adapter for A2UI discussed in the first part of this series.<\/p>\n
    Connecting the Dashboard<\/h2>\n
    Connecting the dashboard shown in the previous article works in a very similar way. Here as well, the agUiResource<\/code> takes care of the communication with the agent:<\/p>\n
    @Component({ [...] })\nexport class Dashboard {\n  private readonly config = inject(ConfigService);\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly dashboardSpec = signal('');\n\n  protected readonly widgets = computed<AgUiWidget[]>(() =>\n    collectWidgets(this.chat.value()),\n  );\n\n  protected readonly dashboardResource = agUiResource({\n    url: this.config.agUiUrlFor('dashboardAgent'),\n    model: this.config.model,\n    useServerMemory: false,\n    tools: [],\n  });\n\n  constructor() {\n    registerHandlers({\n      checkIn: (action) => checkInAction(action),\n      dashboardFlightSearch: (action) => dashboardFlightSearchAction(action),\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.dashboardResource.dispose();\n    });\n  }\n\n  protected submit(): void {\n    const spec = this.dashboardSpec().trim();\n    if (!content) {\n      return;\n    }\n    this.clearRenderedSurfaces();\n    this.dashboardResource.reset();\n    this.dashboardResource.sendMessage({ role: 'user', spec });\n  }\n\n  [...]\n\n}<\/code><\/pre>\n
    Setting up the handlers for processing actions triggered by the dynamic UI also works in a similar way. However, since this example does not use a conversation but instead follows a request\/response pattern, the example resets the resource with reset<\/code> for every request.<\/p>\n
    To display the generated dashboard directly, the computed signal widgets<\/code> determines all generated widgets found in the agent\u2019s response messages. For this, it delegates to the helper function collectWidgets<\/code>:<\/p>\n
    function collectWidgets(\n  messages: AgUiChatMessage[]\n): AgUiWidget[] {\n  return messages.flatMap((message) => {\n    if (message.role !== 'assistant') {\n      return [];\n    }\n    if (message.widgets.length > 0) {\n      return message.widgets;\n    }\n    return [];\n  });\n}<\/code><\/pre>\n
    Rendering these dynamic A2UI-based widgets is again handled using the widget-container<\/code>:<\/p>\n
    @for (widget of widgets(); track widget.a2uiSurfaceId) {\n  <app-widget-container [widget]="widget" \/>\n}<\/code><\/pre>\n
    Providing a Catalog<\/h2>\n
    To provide the Basic Catalog, @internal\/ag-ui-client<\/code> offers the function provideA2uiCatalog<\/code>. In addition, a Markdown implementation has to be wired up via provideMarkdownRenderer<\/code> here as well:<\/p>\n
    import { provideMarkdownRenderer } from '@a2ui\/angular\/v0_9';\nimport { provideA2uiCatalog } from '@internal\/ag-ui-client';\n\n[...]\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideA2uiCatalog(),\n    provideMarkdownRenderer(async (markdown) =>\n      marked.parse(String(markdown ?? '')),\n    ),\n  ],\n};<\/code><\/pre>\n
    This bridges the gap between agent and A2UI renderer: the agent delivers its A2UI messages via AG-UI ACTIVITY_SNAPSHOT<\/code>s, the agUiResource<\/code> receives them, and the WidgetContainer<\/code> renders the contained surfaces. The individual components of our application don't need to know either the AG-UI or the A2UI protocol in detail.<\/p>\n
    Summary<\/h2>\n
    In combination with AG-UI, A2UI fits seamlessly into an existing agentic architecture. AG-UI handles the structured communication between client and agent, while A2UI transports the UI-specific content. The Angular abstraction shown, based on the agUiResource<\/code>, enables simple and idiomatic use in Angular.<\/p>\n
    A not-to-be-underestimated advantage of this architecture lies in the validation on the server side: it shields the client from inconsistent responses of the language model and ensures that only verified structures end up in the browser. The optional DSL variant additionally shows that the same mechanism can be balanced for differently powerful models.<\/p>\n
    The Next Step<\/h2>\n
    So far we have relied on the Basic Catalog \u2013 the next part shows how to extend it with your own domain-specific components as a Custom Catalog.<\/p>\n
    Next article \u2192<\/strong><\/a><\/p>\n
    Interested in production-ready Agentic UI architectures?<\/h2>\n
    In my workshop, we explore AG-UI, A2UI, MCP Apps, HITL patterns, and modern Angular architectures for building real-world agentic systems.<\/p>\n
    <\/a><\/p>\n
    English Version<\/a> | German Version<\/a><\/p>\n
    \n
    FAQ<\/h2>\n
    How do you transmit A2UI messages over AG-UI?<\/h3>\n
    There is no official definition. In practice, it has proven effective to transport the A2UI operations inside an AG-UI message of type ACTIVITY_SNAPSHOT<\/code> with its own activityType<\/code> (for example, a2ui-surface<\/code>). This variant fits the semantics of AG-UI and is also used by CopilotKit<\/a>.<\/p>\n
    Why is server-side validation part of this?<\/h3>\n
    Language models are not guaranteed to deliver valid A2UI structures. Server-side validation \u2013 for example, in a tool \u2013 catches faulty responses, returns feedback to the model, and ensures that only consistent and executable structures reach the client.<\/p>\n
    What does the agUiResource<\/code> do in Angular?<\/h3>\n
    The agUiResource<\/code> from the Angular abstraction manages the connection to the agent. It bundles the chat history, executes client-side tool calls, registers event handlers, and provides the received messages as a signal to the template. As a result, individual components don't need to know either AG-UI or A2UI in detail.<\/p>\n
    When does a custom DSL make sense instead of direct A2UI?<\/h3>\n
    A reduced, application-specific DSL can make generation considerably more robust for weaker or more cost-effective models. The server centrally translates it into A2UI. The price for this is an additional transformation layer and somewhat less expressiveness compared to direct A2UI.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 5 of 6 in the series “Agentic Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript Implementing AG-UI with Angular A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI in Angular Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs From […]<\/p>\n","protected":false},"author":25,"featured_media":33326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-33324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-agentic-angular"],"acf":[],"yoast_head":"\nIntegrating A2UI with AG-UI in Angular - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating A2UI with AG-UI in Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 5 of 6 in the series “Agentic Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript Implementing AG-UI with Angular A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI in Angular Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs From […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-01T19:28:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T10:43:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/series-1024x536.png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/series-1024x536.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"Integrating A2UI with AG-UI in Angular\",\"datePublished\":\"2026-05-01T19:28:26+00:00\",\"dateModified\":\"2026-05-13T10:43:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\"},\"wordCount\":1499,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\",\"name\":\"Integrating A2UI with AG-UI in Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg\",\"datePublished\":\"2026-05-01T19:28:26+00:00\",\"dateModified\":\"2026-05-13T10:43:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg\",\"width\":1000,\"height\":855},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrating A2UI with AG-UI in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating A2UI with AG-UI in Angular - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Integrating A2UI with AG-UI in Angular - ANGULARarchitects","og_description":"This is post 5 of 6 in the series “Agentic Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript Implementing AG-UI with Angular A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI in Angular Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs From […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-05-01T19:28:26+00:00","article_modified_time":"2026-05-13T10:43:25+00:00","og_image":[{"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/series-1024x536.png","type":"","width":"","height":""}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/series-1024x536.png","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"Integrating A2UI with AG-UI in Angular","datePublished":"2026-05-01T19:28:26+00:00","dateModified":"2026-05-13T10:43:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/"},"wordCount":1499,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/","name":"Integrating A2UI with AG-UI in Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg","datePublished":"2026-05-01T19:28:26+00:00","dateModified":"2026-05-13T10:43:25+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/shutterstock_293951399.jpg","width":1000,"height":855},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/integrating-a2ui-with-ag-ui-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Integrating A2UI with AG-UI in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=33324"}],"version-history":[{"count":5,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33324\/revisions"}],"predecessor-version":[{"id":33471,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33324\/revisions\/33471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/33326"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=33324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=33324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=33324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}