{"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-07-24T09:52:27","modified_gmt":"2026-07-24T07:52:27","slug":"implementing-ag-ui-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/","title":{"rendered":"Agentic UI with Angular, CopilotKit, and AG-UI"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 4 of 9 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. AG-UI End to End: Connecting Server and Client<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Agentic UI with Angular, CopilotKit, and AG-UI<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  5. A2UI: How AI Generates Dynamic UIs at Runtime<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Integrating A2UI with AG-UI and CopilotKit in Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. A2UI with a DSL: Controllable Dashboards Optimized for Performance<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Architecture as a Guardrail: Structurally Ruling Out Entire Classes of Errors<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

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

    AG-UI defines the communication between frontend and agent. With @copilotkit\/angular<\/code>, an Angular integration is now available too. It comes from the team behind CopilotKit, the same environment AG-UI itself originated from.<\/p>\n

    This is exactly where this article comes in. Whereas the previous part reached a result quickly with the ready-made chat control, from here on we use CopilotKit's flexible headless mode: it provides the state and behavior of the chat but leaves the presentation entirely to the application. On that basis, the article shows how agents can be connected to an Angular application with CopilotKit, how client-side tools and widgets are defined, and where a small self-written helper function is still needed today.<\/p>\n

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

    The Example Application<\/h2>\n

    As a running example throughout the series, we use a flight-booking application. It works perfectly fine in the conventional way; but when users get stuck or want to shorten individual work steps, they activate a sidecar<\/em>: a chat through which a server-side agent helps out. It answers questions with text, calls client- and server-side tools, and renders interactive components such as a flight card into the chat.<\/p>\n

    \"Sidecar<\/p>\n

    Integrating CopilotKit into Angular<\/h2>\n

    CopilotKit builds directly on the AG-UI SDK discussed earlier: on the client side, the agent is represented by an HttpAgent<\/code> from @ag-ui\/client<\/code>, which CopilotKit manages and whose streamed AG-UI events it translates into a signal-based chat history. The server-side implementation remains untouched by this \u2013 if you already have an AG-UI endpoint, you can keep using it unchanged.<\/p>\n

    Wiring it into the application happens as usual through a provider in app.config.ts<\/code>:<\/p>\n

    \/\/ src\/app\/app.config.ts\nimport { provideCopilotKit } from '@copilotkit\/angular';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    [...]\n    provideCopilotKit({}),\n  ],\n};<\/code><\/pre>\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 through an Agent Store<\/h2>\n
    The centerpiece of CopilotKit's Angular integration is the so-called agent store. It represents a concrete agent together with its chat history and execution state. The demo project encapsulates the setup of the ticketing agent in a function called injectTicketingAgentStore<\/code>:<\/p>\n
    \/\/ src\/app\/domains\/ticketing\/ai\/ticketing-agent-store.ts\nimport { injectAgentStore } from '@copilotkit\/angular';\nimport { initAgentStore } from '..\/..\/shared\/util-copilotkit\/init-agent-store';\n\n[...]\n\nconst AGENT_ID = 'ticketingAgent';\n\nexport function injectTicketingAgentStore() {\n  initAgentStore({\n    agentId: AGENT_ID,\n    url: 'http:\/\/localhost:3001\/ag-ui\/ticketingAgent',\n    useServerMemory: true,\n    frontendTools: [\n      findFlightsTool,\n      getLoadedFlightsTool,\n      toggleFlightSelectionTool,\n      getCurrentBasketTool,\n      displayFlightDetailTool,\n      flightWidget,\n    ],\n  });\n\n  return injectAgentStore(AGENT_ID);\n}<\/code><\/pre>\n
    The helper function initAgentStore<\/code> registers the agent together with its client-side tools with CopilotKit; its structure is discussed in the next section. After that, injectAgentStore<\/code> \u2013 provided by CopilotKit \u2013 returns the actual agent store: a Signal<AgentStore><\/code> that exposes, among other things, the chat history (messages<\/code>) and the execution state (isRunning<\/code>) as signals.<\/p>\n
    The configuration refers to the URL of the agent. Behind it sits a server-side ticketing agent<\/a> that supports travelers with their flight bookings. For this, it has tools for looking up booked flights as well as for booking and cancelling them (findBookedFlights<\/code>, bookFlight<\/code>, cancelFlight<\/code>). In our case it is implemented with the TypeScript framework Mastra; for the integration shown here, however, that does not matter \u2013 all that counts is that the agent supports AG-UI.<\/p>\n
    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 frontendTools<\/code> list, the consumer registers all client-side tools that the agent is allowed to request. Interestingly, this list also includes the widget flightWidget<\/code> \u2013 the flight card shown at the beginning. That is no coincidence: in CopilotKit, widgets are nothing but frontend tools that have an Angular component assigned for their presentation.<\/p>\n
    NOTE<\/p>\n
    Agentic UI with Angular<\/h3>\n
    If you don\u2019t just want to integrate AG-UI but embed it into a scalable architecture:
    \nIn my book Agentic UI with Angular, I cover exactly these patterns and trade-offs in depth.<\/p>\n
    \"Cover<\/a><\/p>\n
    Learn more about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n
    The Helper Function initAgentStore<\/code><\/h2>\n
    Currently, CopilotKit expects agents to be configured \u2013 and thus registered \u2013 when provideCopilotKit<\/code> is called during application startup. For lazy-loaded feature areas, that is impractical: their tools and widgets should only reach the browser together with the respective bundle instead of ending up in the main bundle.<\/p>\n
    This is exactly the gap initAgentStore<\/code> closes. It runs in an injection context and essentially does two things: it registers the agent at runtime as a so-called self-managed agent with CopilotKit and then registers all frontend tools for its agentId<\/code> (slightly shortened):<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/init-agent-store.ts\nimport { randomUUID } from '@ag-ui\/client';\nimport { inject } from '@angular\/core';\nimport { CopilotKit, registerFrontendTool } from '@copilotkit\/angular';\n\n[...]\n\nexport function initAgentStore(config: InitAgentStoreConfig): void {\n  const copilotKit = inject(CopilotKit);\n\n  const httpAgent = new AppHttpAgent(\n    {\n      agentId: config.agentId,\n      url: config.url,\n      threadId: randomUUID(),\n    },\n    { useServerMemory: config.useServerMemory },\n  );\n\n  copilotKit.updateRuntime({\n    selfManagedAgents: {\n      ...copilotKit.agents(),\n      [config.agentId]: httpAgent,\n    },\n  });\n\n  for (const tool of config.frontendTools ?? []) {\n    registerFrontendTool({\n      ...tool,\n      component: tool.component || FallbackToolCard,\n      agentId: config.agentId,\n    });\n  }\n\n  [...]\n}<\/code><\/pre>\n
    The call to updateRuntime<\/code> adds a new entry to the agents registered with CopilotKit. AppHttpAgent<\/code><\/a> is a lean subclass of the HttpAgent<\/code> from the AG-UI SDK. Among other things, it implements the useServerMemory<\/code> option: if the server remembers the chat history, AppHttpAgent<\/code> filters already transmitted messages out of the requests.<\/p>\n
    The subsequent loop registers the passed tools with CopilotKit using registerFrontendTool<\/code>. In doing so, it binds each tool to the agentId<\/code> \u2013 which keeps the tool definitions themselves agnostic and reusable. The FallbackToolCard<\/code> set as the default here is discussed further below.<\/p>\n
    A pleasant side effect: registerFrontendTool<\/code> remembers the current injection context and later runs the tool handlers within it. That is why the handlers may use Angular's inject<\/code>, as shown in the next section.<\/p>\n
    The rest of the function, hinted at by [...]<\/code>, takes care of displaying tool calls that the client does not execute itself \u2013 first and foremost the agent's server-side tools. We will look at it further below.<\/p>\n
    Defining Client-Side Tools<\/h2>\n
    The demo project describes the individual tools with the helper function createFrontendTool<\/code>:<\/p>\n
    \/\/ src\/app\/domains\/ticketing\/ai\/tools\/find-flights.tool.ts\nimport { inject } from '@angular\/core';\nimport { Router } from '@angular\/router';\nimport { z } from 'zod';\n\nimport { createFrontendTool } from '..\/..\/..\/shared\/util-copilotkit\/tool-definition';\n\n[...]\n\nexport const findFlightsTool = createFrontendTool({\n  name: 'findFlights',\n  description: `Searches for flights and redirects the user to the result`,\n  parameters: z.object({\n    from: z.string().describe('airport of departure'),\n    to: z.string().describe('airport of destination'),\n  }),\n  handler: async ({ from, to }) => {\n    const store = inject(FlightStore);\n    const router = inject(Router);\n    store.updateFilter(from, to);\n    await router.navigate(['\/ticketing\/booking\/flight-search']);\n    return { ok: true };\n  },\n});<\/code><\/pre>\n
    Besides a name, a description, and parameter definitions based on Zod<\/code>, the tool definition also includes a handler<\/code>. When the agent requests the tool, CopilotKit executes this handler \u2013 including a working inject<\/code> thanks to the injection context mentioned earlier.<\/p>\n
    The 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
    \/\/ src\/app\/domains\/ticketing\/ai\/tools\/get-loaded-flights.tool.ts\nexport const getLoadedFlightsTool = createFrontendTool({\n  name: 'getLoadedFlights',\n  description: `Returns the currently loaded\/displayed flights`,\n  parameters: z.object({}),\n  handler: async () => {\n    const store = inject(FlightStore);\n    return store.flightsValue().map(toFlightInfo);\n  },\n});<\/code><\/pre>\n
    The Inner Workings of createFrontendTool<\/code><\/h2>\n
    A look behind the scenes reveals that createFrontendTool<\/code> is a pure identity function at runtime. It takes the tool definition and returns it unchanged \u2013 it registers nothing and injects nothing:<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/tool-definition.ts\nimport { type FrontendToolConfig } from '@copilotkit\/angular';\n\nexport function createFrontendTool<Args extends Record<string, unknown>>(\n  tool: FrontendToolConfig<Args>,\n): FrontendToolConfig<Args> {\n  return tool;\n}<\/code><\/pre>\n
    The point of this pass-through lies in type inference: TypeScript derives the generic type parameter Args<\/code> from the Zod schema passed in parameters<\/code> and applies it to the entire definition. As a result, the handler<\/code> knows the types of its parameters \u2013 in the case of findFlights<\/code>, from<\/code> and to<\/code> as string<\/code> \u2013 without the tool definition having to annotate them explicitly.<\/p>\n
    Without the helper function, only less convenient alternatives would remain: typing the definition by hand as FrontendToolConfig<...><\/code> and thus maintaining the parameter types redundantly alongside the schema, or forgoing typing altogether and only noticing typos in the handler at runtime.<\/p>\n
    Widgets Are Tools with a Component<\/h2>\n
    For widgets such as the flight card, CopilotKit does not provide a dedicated concept \u2013 and does not need one. A widget is simply a frontend tool that has an Angular component assigned via the component<\/code> property. When the agent calls the tool, CopilotKit renders that component in the chat history and passes it the parameters supplied by the LLM:<\/p>\n
    \/\/ src\/app\/domains\/ticketing\/ui\/flight-widget.ts\nconst 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});\n\nconst flightWidgetSchema = z.object({\n  flight: flightSchema,\n  status: z.enum(['booked', 'other']).describe('Status of the flight'),\n});\n\nexport const flightWidget = createFrontendTool({\n  name: 'flightWidget',\n  description: `Displays a concrete flight as an interactive card.\nUse it when referring to one or more specific flights.`,\n  parameters: flightWidgetSchema,\n  component: FlightWidget,\n  followUp: false,\n  handler: async () => ({ shown: true }),\n});<\/code><\/pre>\n
    Here, the schema does not just describe the parameters of a function call but at the same time the data the component is supplied with. The option followUp: false<\/code> tells CopilotKit that no further roundtrip to the agent is needed after displaying the widget \u2013 the widget concludes the response.<\/p>\n
    Important to note: followUp: false<\/code> only controls the client. So that the model treats such calls as the end of its turn as well, createFrontendTool<\/code> in the demo project automatically appends a corresponding hint to the tool description and thus to the prompt.<\/p>\n
    The assigned component implements the ToolRenderer<\/code> interface and takes the tool call as an input. Through toolCall().args<\/code>, it accesses the values passed by the LLM and validated against the schema:<\/p>\n
    \/\/ src\/app\/domains\/ticketing\/ui\/flight-widget.ts\nimport { type AngularToolCall, type ToolRenderer } from '@copilotkit\/angular';\n\n@Component({\n  selector: 'app-flight-widget',\n  imports: [FlightCard, RouterLink],\n  template: `\n    @let flight = toolCall().args.flight;\n    @if (flight) {\n      <app-flight-card [item]="flight" [readonly]="true">\n        [...]\n      <\/app-flight-card>\n    }\n  `,\n})\nexport class FlightWidget implements ToolRenderer<FlightWidgetArgs> {\n  readonly toolCall = input.required<AngularToolCall<FlightWidgetArgs>>();\n  [...]\n}<\/code><\/pre>\n
    Sending Requests to the Agent<\/h2>\n
    The application's chat component \u2013 AssistantChat<\/code> in the demo project \u2013 obtains the agent store through the function shown earlier and derives its state from it:<\/p>\n
    \/\/ src\/app\/domains\/shared\/ui-assistant\/assistant-chat\/assistant-chat.ts\nimport { CopilotKit } from '@copilotkit\/angular';\n\n[...]\n\nexport class AssistantChat {\n  private readonly copilotKit = inject(CopilotKit);\n\n  protected readonly store = injectTicketingAgentStore();\n\n  protected readonly messages = computed(() => this.store().messages());\n  protected readonly isRunning = computed(() => this.store().isRunning());\n\n  protected submit(): void {\n    void sendMessage(this.copilotKit, this.store, this.message());\n  }\n}<\/code><\/pre>\n
    Sending is handled by the sendMessage<\/code> function. It adds the user message to the agent and then triggers a run through CopilotKit:<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/agent-store-helper.ts\nexport async function sendMessage(\n  copilotKit: CopilotKit,\n  store: Signal<AgentStore>,\n  content: string,\n): Promise<void> {\n  const agent = store().agent;\n  agent.addMessage({ id: randomUUID(), role: 'user', content });\n  await copilotKit.core.runAgent({ agent });\n}<\/code><\/pre>\n
    The detour via copilotKit.core.runAgent<\/code> is important: only this way do the previously registered frontend tools take part in the run. Now the client merely 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 resides in the agent store's messages<\/code> signal. The template iterates over the messages and, besides the textual response (content<\/code>), also renders the requested tool calls. The latter is handled by the RenderToolCalls<\/code> component provided by CopilotKit:<\/p>\n
    <!-- src\/app\/domains\/shared\/ui-assistant\/chat-messages\/chat-messages.html -->\n@for (message of messages(); track message.id) {\n  @if (message.content) {\n    <div>{{ message.content }}<\/div>\n  }\n  @if (message.role === 'assistant' && message.toolCalls?.length) {\n    <copilot-render-tool-calls\n      [message]="message"\n      [messages]="messages()"\n      [agentId]="'ticketingAgent'" \/>\n  }\n}<\/code><\/pre>\n
    For each tool call, RenderToolCalls<\/code> looks up the registered presentation component \u2013 for flightWidget<\/code>, this makes the interactive flight card appear. We do not need to take care of executing client-side tools ourselves, however, because CopilotKit handles that task without any further effort on our part.<\/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
    Time for a First Test<\/h2>\n
    With that, everything is in place to try out the solution; details on starting the client and the agent can be found in the README of the demo project. If we ask the assistant for flights from Graz to Hamburg, for example, the agent requests the frontend tool findFlights<\/code>, and the application navigates to the result list. Questions about concrete flights are answered with the flight card registered as a widget, directly in the chat history:<\/p>\n
    \"The<\/p>\n
    Looking up booked flights as well as booking and cancelling them is something the agent already handles too \u2013 backed by its server-side tools. How the chat displays such calls is covered in the next section.<\/p>\n
    Displaying Server-Side Tool Calls<\/h2>\n
    Frontend tools are executed by the client. The agent's server-side tools \u2013 such as bookFlight<\/code> and cancelFlight<\/code> \u2013 nevertheless also appear as tool calls in the chat history. There is nothing to execute on the client side here, but there is something to display. In the demo project, this task is handled by the FallbackToolCard<\/code> \u2013 the very component that initAgentStore<\/code> already used above as the default for frontend tools without their own presentation (component: tool.component || FallbackToolCard<\/code>). Here it additionally takes on the role of a wildcard renderer for all remaining tool calls.<\/p>\n
    Since the fallback has to cope with any arbitrary tool, the Zod schema for its arguments is correspondingly generic \u2013 a record with arbitrary keys and values:<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/fallback-tool-card.ts\nconst fallbackToolArgsSchema = z.record(z.string(), z.unknown());\n\nexport type FallbackToolArgs = z.infer<typeof fallbackToolArgsSchema>;<\/code><\/pre>\n
    As usual, the presentation component implements the ToolRenderer<\/code> interface. It displays the name of the call; on click, it reveals the passed parameters:<\/p>\n
    @Component({\n  selector: 'app-fallback-tool-card',\n  template: `\n    <button type="button" class="tool-call" (click)="toggle()">\n      <span class="tool-call-label">Tool Call: {{ toolName() }}<\/span>\n      <span class="tool-call-caret">{{ expanded() ? '\u25be' : '\u25b8' }}<\/span>\n    <\/button>\n    @if (expanded()) {\n      <pre class="tool-call-args">{{ prettyArgs() }}<\/pre>\n    }\n  `,\n})\nexport class FallbackToolCard implements ToolRenderer<FallbackToolArgs> {\n  readonly toolCall = input.required<AngularToolCall<FallbackToolArgs>>();\n\n  protected readonly expanded = signal(false);\n\n  protected readonly toolName = computed(\n    () => this.toolCall().name ?? 'unknown',\n  );\n\n  protected readonly prettyArgs = computed(() =>\n    JSON.stringify(this.toolCall().args ?? {}, null, 2),\n  );\n\n  protected toggle(): void {\n    this.expanded.update((value) => !value);\n  }\n}<\/code><\/pre>\n
    The helper function createRenderToolCall<\/code> combines schema and component into a registration object \u2013 like createFrontendTool<\/code>, an identity function that merely provides type safety. A handler<\/code> is deliberately missing: execution is handled by the server, and the component is pure presentation. The name '*'<\/code> marks the renderer as a wildcard and thus as a fallback:<\/p>\n
    export const fallbackToolCard = createRenderToolCall({\n  name: '*',\n  args: fallbackToolArgsSchema,\n  component: FallbackToolCard,\n});<\/code><\/pre>\n
    Registration is handled by the part of initAgentStore<\/code> that was hidden behind [...]<\/code> above:<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/init-agent-store.ts\nimport { registerRenderToolCall } from '@copilotkit\/angular';\n\n[...]\n\nexport function initAgentStore(config: InitAgentStoreConfig): void {\n  [...]\n\n  const registeredFallback = copilotKit\n    .toolCallRenderConfigs()\n    .find((renderer) => renderer.name === '*');\n  if (!registeredFallback) {\n    registerRenderToolCall(fallbackToolCard);\n  }\n\n  for (const toolCall of config.toolCallRenderer ?? []) {\n    registerRenderToolCall({ ...toolCall, agentId: config.agentId });\n  }\n}<\/code><\/pre>\n
    The function first checks whether a wildcard renderer is already registered and otherwise registers the fallbackToolCard<\/code>. After that, it registers the presentation components passed via the toolCallRenderer<\/code> property and binds them \u2013 just like the frontend tools \u2013 to the agentId<\/code>.<\/p>\n
    Another Test: Server-Side Tools in Action<\/h2>\n
    That makes a second look at the application worthwhile: if we ask the assistant whether we have already booked a flight to Paris, the agent reaches for findBookedFlightsTool<\/code> \u2013 a server-side tool. Its execution takes place entirely on the server; the client merely visualizes the call through the registered toolCallRenderer<\/code> as an expandable card including its parameters. The agent then presents the answer with the familiar flight widget:<\/p>\n
    \"The<\/p>\n
    This way, every server-side tool call remains transparently traceable for users.<\/p>\n
    Summary<\/h2>\n
    With @copilotkit\/angular<\/code>, AG-UI can easily be integrated into Angular. Client-side tools and widgets are described uniformly as frontend tools, with widgets merely bringing along an additional presentation component. Server-side tool calls appear in the chat history as well \u2013 rendered by a default renderer registered as a wildcard. The agent store exposes the chat history as a signal, and the included RenderToolCalls<\/code> component brings the registered components to the screen within the chat.<\/p>\n
    The Next Step<\/h2>\n
    With AG-UI, the communication between frontend and agent is settled \u2013 the next series shows how the LLM itself can compose the UI from layout, display, and input primitives, without shipping new frontend code for every use case.<\/p>\n
    Next article \u2192<\/strong><\/a><\/p>\n
    \n
    <\/p>\n
    Interested in production-ready Agentic UI architectures?<\/h3>\n
    In my workshop, we dig into AG-UI, A2UI, MCP Apps, HITL patterns, and modern Angular architectures for real-world agentic systems.<\/p>\n
    \"Workshop:<\/a><\/p>\n
    See all details \u2192<\/a>\n<\/div>\n<\/p>\n
    FAQ<\/h2>\n
    How Can AG-UI Be Integrated into Angular?<\/h3>\n
    With @copilotkit\/angular<\/code>, an Angular integration is available that builds directly on the AG-UI SDK. It manages the agent, executes client-side tools, and exposes the chat history as a signal-based agent store.<\/p>\n
    What Is an Agent Store?<\/h3>\n
    The agent store represents a concrete agent together with its state. injectAgentStore<\/code> returns it as a Signal<AgentStore><\/code> that offers, among other things, the chat history (messages<\/code>) and the execution state (isRunning<\/code>) as signals.<\/p>\n
    What Is the Helper Function initAgentStore<\/code> For?<\/h3>\n
    CopilotKit currently offers no way to initialize agent stores for lazy-loaded feature areas after the fact. initAgentStore<\/code> closes this gap: it registers the agent at runtime as a self-managed agent and registers the frontend tools for its agentId<\/code>.<\/p>\n
    How Do Widgets End Up in the Chat History?<\/h3>\n
    Widgets are frontend tools with an assigned Angular component. When the agent requests such a tool, the CopilotKit component RenderToolCalls<\/code> renders the registered component in the chat history and supplies it with the parameters passed by the LLM and validated against the Zod schema.<\/p>\n
    How Can Server-Side Tool Calls Be Visualized?<\/h3>\n
    Server-side tool calls also appear in the chat history, even though the client does not execute them. A wildcard renderer described with createRenderToolCall<\/code> (name: '*'<\/code>) displays them by default as an expandable card including its parameters; further presentation components can be passed through the toolCallRenderer<\/code> property of initAgentStore<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 4 of 9 in the series “Agentic Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript AG-UI End to End: Connecting Server and Client Agentic UI with Angular, CopilotKit, and AG-UI A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI and CopilotKit […]<\/p>\n","protected":false},"author":25,"featured_media":33201,"comment_status":"open","ping_status":"open","sticky":true,"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-angular"],"acf":[],"yoast_head":"\nAgentic UI with Angular, CopilotKit, and AG-UI - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"Implementing AG-UI with Angular and CopilotKit"description: "How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.\" \/>\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=\"Agentic UI with Angular, CopilotKit, and AG-UI - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Implementing AG-UI with Angular and CopilotKit"description: "How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.\" \/>\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-07-24T07:52:27+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=\"16 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\":\"Agentic UI with Angular, CopilotKit, and AG-UI\",\"datePublished\":\"2026-04-20T12:57:18+00:00\",\"dateModified\":\"2026-07-24T07:52:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/\"},\"wordCount\":2312,\"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\":\"Agentic UI with Angular, CopilotKit, and AG-UI - 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-07-24T07:52:27+00:00\",\"description\":\"Implementing AG-UI with Angular and CopilotKit\\\"description: \\\"How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.\",\"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\":\"Agentic UI with Angular, CopilotKit, and AG-UI\"}]},{\"@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":"Agentic UI with Angular, CopilotKit, and AG-UI - ANGULARarchitects","description":"Implementing AG-UI with Angular and CopilotKit\"description: \"How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.","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":"Agentic UI with Angular, CopilotKit, and AG-UI - ANGULARarchitects","og_description":"Implementing AG-UI with Angular and CopilotKit\"description: \"How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.","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-07-24T07:52:27+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":"16 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":"Agentic UI with Angular, CopilotKit, and AG-UI","datePublished":"2026-04-20T12:57:18+00:00","dateModified":"2026-07-24T07:52:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/implementing-ag-ui-with-angular\/"},"wordCount":2312,"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":"Agentic UI with Angular, CopilotKit, and AG-UI - 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-07-24T07:52:27+00:00","description":"Implementing AG-UI with Angular and CopilotKit\"description: \"How can AG-UI be integrated into Angular applications? This article shows the Angular integration of CopilotKit: agent stores, client-side tools, widgets in the chat history, and a small helper function for lazy-loaded agents.","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":"Agentic UI with Angular, CopilotKit, and AG-UI"}]},{"@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":10,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33203\/revisions"}],"predecessor-version":[{"id":34477,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33203\/revisions\/34477"}],"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}]}}