{"id":33203,"date":"2026-04-20T14:57:18","date_gmt":"2026-04-20T12:57:18","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=33203"},"modified":"2026-04-20T20:30:30","modified_gmt":"2026-04-20T18:30:30","slug":"implementing-ag-ui-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/","title":{"rendered":"Implementing AG-UI with Angular"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 3 of 3 in the series “agentic”<\/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<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Using agents via AG-UI in Angular applications<\/em><\/p>\n

    AG-UI defines communication between frontend and agent and its SDK provides a low-level implementation. However, for Angular applications it does not provide a fully idiomatic abstraction. If you want to integrate AI agents into Angular, you need a wrapper that fits naturally into components, signals, and templates.<\/p>\n

    This is exactly where this article comes in. It shows how AG-UI can be used with a lean Angular-specific abstraction on top of the SDK so that agents, client-side tools, and widgets can be integrated cleanly into an Angular application.<\/p>\n

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

    Integrating AG-UI into Angular<\/h2>\n

    The AG-UI SDK discussed earlier provides a solid foundation for integration in Angular. However, to enable convenient use without unnecessary boilerplate code, an additional abstraction layer is needed. The accompanying demo project contains such an abstraction in the libs\/ag-ui-client<\/code> folder. To simplify imports, the tsconfig.json<\/code> includes a path mapping called @internal\/ag-ui-client<\/code> that points to it.<\/p>\n

    The centerpiece of this implementation is an agUiResource<\/code> used to communicate with the agent. It also provides a WidgetContainer<\/code> component that displays components requested by the agent, such as the flight card shown earlier. Its API design is heavily inspired by the Hashbrown<\/a> framework, which offers Angular developers a highly idiomatic way of working with LLMs, but currently does not yet include AG-UI integration.<\/p>\n

    This article treats that abstraction as a black box that should sooner or later be provided by a library. The source code can serve as a starting point for your own work.<\/p>\n

    Thanks to AG-UI, the Angular example is independent of server-side technologies and models. To keep execution as simple as possible, the demo application includes an agent built with the extremely convenient TypeScript-based agent framework Mastra<\/a>. Since the AG-UI SDK provides an adapter for Mastra<\/code>, agents built with it can easily be connected through AG-UI.<\/p>\n

    The client was tested with both OpenAI's GPT 5 and Google's Gemini 3. Details on how to set up and start the demo can be found in the README.<\/p>\n

    Connecting Agents via agUiResource<\/code> in Angular<\/h2>\n

    The agUiResource<\/code> provided by @internal\/ag-ui-client<\/code> implements Angular's Resource API and can therefore be used in a similar way to the familiar httpResource<\/code> or rxResource<\/code>:<\/p>\n

    import { agUiResource } from '@internal\/ag-ui-client';\n\n[...]\n\nexport class TicketingComponent {\n  private readonly chat = agUiResource({\n    url: 'http:\/\/localhost:3001\/ag-ui\/ticketingAgent',\n    useServerMemory: true,\n    tools: [\n      findFlightsTool,\n      getLoadedFlightsTool,\n      toggleFlightSelectionTool,\n      getCurrentBasketTool,\n      displayFlightDetailTool,\n      createShowComponentsTool([flightWidgetComponent]),\n    ],\n  });\n}<\/code><\/pre>\n
    The properties refer to the URL of the agent. With useServerMemory<\/code>, the caller indicates whether the agent stores the chat history. If it does not, the client must repeat the entire chat history with every request.<\/p>\n
    In the tools<\/code> list, the consumer registers all client-side tools that the agent is allowed to request. One special tool is showComponents<\/code>, which is created via a factory. This factory accepts the descriptions of possible components that the agent may embed when answering questions. In our case, only a flight card (flightWidget<\/code>) is available.<\/p>\n
    NOTE<\/p>\n
    Agentic UI with Angular<\/h3>\n
    Learn more about this topic in my eBook: Build scalable agentic UIs with Angular \u2014 using AG-UI, A2UI, and MCP Apps, open and free from vendor lock-in.<\/p>\n
    \"Cover<\/a><\/p>\n
    Learn more about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n
    The individual tools can be described using the defineAgUiTool<\/code> function:<\/p>\n
    import { defineAgUiTool } from '@internal\/ag-ui-client';\nimport { z } from 'zod';\n\n[...]\n\nexport const findFlightsTool = defineAgUiTool({\n  name: 'findFlights',\n  description: `Searches for flights and redirects the user to the result`,\n  schema: z.object({\n    from: z.string().describe('airport of departure'),\n    to: z.string().describe('airport of destination'),\n  }),\n  execute: async (args) => {\n    const store = inject(FlightStore);\n    const router = inject(Router);\n    store.updateFilter(args.from, args.to);\n    await router.navigate(['\/ticketing\/booking\/flight-search']);\n  },\n});<\/code><\/pre>\n
    Besides a name, a description, and parameter definitions based on Zod<\/code>, the tool definition also includes an execute<\/code> method. When the agent requests a tool, agUiResource<\/code> executes that method.<\/p>\n
    The args<\/code> parameter object conforms to the TypeScript type inferred from the Zod schema. In our case, that is an object with the properties from<\/code> and to<\/code>. The implementation shown triggers a flight search by passing these search criteria to the FlightStore<\/code> and then navigates the user to the results page.<\/p>\n
    Tools that gather data, such as local state or user responses, can report that data back to the model via their return value. One example is getLoadedFlightsTool<\/code>, which informs the agent about the flights currently displayed to the user by the application:<\/p>\n
    export const getLoadedFlightsTool = defineAgUiTool({\n  name: 'getLoadedFlights',\n  description: `Returns the currently loaded\/displayed flights`,\n  execute: () => {\n    const store = inject(FlightStore);\n    return store.flightsValue().map(toFlightInfo);\n  },\n});<\/code><\/pre>\n
    Defining components works similarly, but here the schema describes the offered inputs:<\/p>\n
    import { defineAgUiComponent } from '@internal\/ag-ui-client';\nimport { z } from 'zod';\n\nexport const flightWidgetComponent = defineAgUiComponent({\n  name: 'flightWidget',\n  description: `Displays a concrete flight as an interactive card.\nUse it when referring to one or more specific flights.`,\n  component: FlightWidget,\n  schema: z.object({\n    flight: flightSchema,\n    status: z.enum(['booked', 'other']).describe('Status of the flight'),\n  }),\n});<\/code><\/pre>\n
    In this example, the flight<\/code> property refers to another Zod schema:<\/p>\n
    const flightSchema = z.object({\n  id: z.number().describe('The flight id'),\n  from: z.string().describe('Departure city'),\n  to: z.string().describe('Arrival city'),\n  date: z.string().describe('Departure date in ISO format'),\n  delay: z.number().describe('Delay in minutes'),\n});<\/code><\/pre>\n
    To send a request to the agent, the client uses the sendMessage<\/code> method:<\/p>\n
    this.chat.sendMessage({\n  role: 'user',\n  content: 'Did I book my flight to France?',\n});<\/code><\/pre>\n
    At that point, the client only needs to display the response messages returned by the agent via AG-UI in the chat history.<\/p>\n
    Presenting the Chat History in Angular Templates<\/h2>\n
    The entire chat history is stored in the value<\/code> of AgUiResource<\/code>. It is a signal containing an array of AgUiChatMessages<\/code>:<\/p>\n
    @for (message of chat.value(); track message.id) {\n  @if (message.content) {\n    <div>{{ message.content }}<\/div>\n  }\n  @for (widget of message.widgets; track widget.id) {\n    <app-widget-container [widget]="widget" \/>\n  }\n  @for (toolCall of message.toolCalls; track toolCall.id) {\n    <div>Tool Call: {{ toolCall.name }}<\/div>\n  }\n}<\/code><\/pre>\n
    In addition to a textual response (content<\/code>), the iterated messages also contain a list of components (widgets<\/code>) and tools (toolCalls<\/code>). The widgets are components registered for the showComponents<\/code> tool and selected by the LLM. The WidgetContainer<\/code> offered by @internal\/ag-ui-client<\/code> can create these widgets dynamically and render them using the properties passed by the agent or the LLM.<\/p>\n
    The toolCalls<\/code> list provides information about the requested tools. Its entries can refer to both client-side and server-side tools and are displayed here for reasons of transparency. We do not need to take care of executing client-side tools ourselves, however, because agUiResource<\/code> handles that task automatically.<\/p>\n
    The streamed AG-UI messages can be inspected through the browser's developer tools:<\/p>\n
    \"Streamed<\/p>\n
    On the one hand, this makes the protocol tangible; on the other, it helps with troubleshooting.<\/p>\n
    Summary<\/h2>\n
    With a lean Angular abstraction such as agUiResource<\/code>, AG-UI can be integrated idiomatically into components, tools, and templates. The client describes the available tools and widgets, sends user requests to the agent, and processes streamed responses directly as a signal-based chat history.<\/p>\n
    FAQ<\/h2>\n
    How Can AG-UI Be Integrated into Angular?<\/h3>\n
    AG-UI is best integrated into Angular through a dedicated abstraction that encapsulates communication with the agent and fits cleanly into components, signals, and templates. In the example shown here, that role is fulfilled by an agUiResource<\/code>.<\/p>\n
    What Is agUiResource<\/code>?<\/h3>\n
    agUiResource<\/code> is an Angular-specific wrapper around the AG-UI SDK. It connects the agent to the Angular application, executes client-side tools, and exposes the chat history together with widgets and tool calls as a resource. The entire application can be found in the linked project.<\/p>\n
    Why Does Angular Need Another Abstraction on Top of the SDK?<\/h3>\n
    The AG-UI SDK is intentionally generic and low-level. An Angular-specific abstraction reduces boilerplate, aligns better with the Resource API, and makes integration into templates, stores, and routing easier.<\/p>\n
    How Do Tools and Widgets End Up in the Chat History?<\/h3>\n
    Before a run starts, the client registers the available tools and components with the agent. When the agent later requests tool calls or widgets, agUiResource<\/code> processes that information and exposes it to the template through the signal-based chat history.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 3 of 3 in the series “agentic” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript Implementing AG-UI with Angular Using agents via AG-UI in Angular applications AG-UI defines communication between frontend and agent and its SDK provides a low-level implementation. However, for Angular applications it […]<\/p>\n","protected":false},"author":25,"featured_media":33201,"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-33203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-agentic"],"acf":[],"yoast_head":"\nImplementing AG-UI with Angular - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.\" \/>\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\/implementing-ag-ui-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementing AG-UI with Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-20T12:57:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T18:30:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.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=\"7 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\/implementing-ag-ui-with-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"Implementing AG-UI with Angular\",\"datePublished\":\"2026-04-20T12:57:18+00:00\",\"dateModified\":\"2026-04-20T18:30:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\"},\"wordCount\":1027,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\",\"name\":\"Implementing AG-UI with Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg\",\"datePublished\":\"2026-04-20T12:57:18+00:00\",\"dateModified\":\"2026-04-20T18:30:30+00:00\",\"description\":\"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg\",\"width\":1000,\"height\":666},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementing AG-UI with 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":"Implementing AG-UI with Angular - ANGULARarchitects","description":"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.","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\/implementing-ag-ui-with-angular\/","og_locale":"en_US","og_type":"article","og_title":"Implementing AG-UI with Angular - ANGULARarchitects","og_description":"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-04-20T12:57:18+00:00","article_modified_time":"2026-04-20T18:30:30+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png","type":"image\/png"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"Implementing AG-UI with Angular","datePublished":"2026-04-20T12:57:18+00:00","dateModified":"2026-04-20T18:30:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/"},"wordCount":1027,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/","name":"Implementing AG-UI with Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg","datePublished":"2026-04-20T12:57:18+00:00","dateModified":"2026-04-20T18:30:30+00:00","description":"How can AG-UI be integrated into Angular applications? This article shows an Angular-specific abstraction on top of the SDK, `agUiResource`, client-side tools, and widgets in the chat history.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2567832395.jpg","width":1000,"height":666},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Implementing AG-UI with 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\/33203","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=33203"}],"version-history":[{"count":5,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33203\/revisions"}],"predecessor-version":[{"id":33233,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33203\/revisions\/33233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/33201"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=33203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=33203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=33203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}