{"id":34617,"date":"2026-08-03T18:44:30","date_gmt":"2026-08-03T16:44:30","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=34617"},"modified":"2026-08-03T19:17:13","modified_gmt":"2026-08-03T17:17:13","slug":"copilotkit-the-missing-link-for-agentic-ui-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/","title":{"rendered":"CopilotKit: The Missing Link for Agentic UI with Angular"},"content":{"rendered":"<p><em>Why consuming agents needs a real client library \u2014 and how to get started in minutes.<\/em><\/p>\n<p>The server side of Agentic AI is booming: agent frameworks, tool calling, memory, orchestration. But the moment an Angular application is supposed to integrate an agent \u2014 displaying its answers, calling client-side tools, rendering real UI instead of walls of text \u2014 the ecosystem gets surprisingly quiet. <a href=\"https:\/\/www.copilotkit.ai\/\">CopilotKit<\/a> for Angular fills exactly this gap. Using an example, this article shows how to use this popular library together with open standards.<\/p>\n<p>\ud83d\udcc2 <a href=\"https:\/\/github.com\/manfredsteyer\/copilotkit-intro\">Source Code<\/a><\/p>\n<h2>We Need a Library for Consuming Agents<\/h2>\n<p>Talking to an agent is simple in theory: send a question, receive an answer. In reality, the client has to process a stream of events. Examples are text fragments, tool calls including their arguments and results, approvals by the user, or error signals.<\/p>\n<p>That is infrastructure code \u2014 and infrastructure code has no business living in application code. What we need is a library that owns the details mentioned above, so application code can focus on what makes the product special.<\/p>\n<h2>AG-UI: No Lock-in on the Server Stack<\/h2>\n<p>The second requirement is independence. Whether the backend team builds its agents with LangGraph or LangChain, with Mastra, with Spring AI, or with the Microsoft Agent Framework should be irrelevant to the frontend.<\/p>\n<p>This is exactly what <a href=\"https:\/\/ag-ui.com\/\">AG-UI<\/a> delivers: an open, lightweight protocol between agents and user interfaces. The client receives a standardized stream of events \u2014 run started, tool call, text fragment, run finished \u2014 and does not need to know which framework produces them.<\/p>\n<h2>Three Standards, One Frontend<\/h2>\n<p>AG-UI is not the only standard the frontend has to care about. Two more are emerging right next to it, each covering a complementary concern:<\/p>\n<ul>\n<li><strong>A2UI<\/strong> lets an agent describe user interfaces declaratively, so it can compose its answer out of real UI components instead of prose.<\/li>\n<li><strong>MCP Apps<\/strong> extend the Model Context Protocol so that third-party tools can ship their own visualizations along with their capabilities.<\/li>\n<\/ul>\n<p>These standards don't contradict each other either; they can be combined: an agent streamed over AG-UI that answers with A2UI surfaces and embeds MCP Apps from third parties. Someone has to bring these pieces into one coherent programming model \u2014 and that someone should not be every project team on its own.<\/p>\n<h2>Standards Alone Are Not Enough<\/h2>\n<p>There is a second gap: ease of use and developer experience (DX). The official SDKs for these standards are a solid first step, but they are deliberately low-level. They do provide concepts like event streams or renderers, but the wiring is left to us. That would mean infrastructure code inside the application \u2014 exactly what we want to avoid.<\/p>\n<p>This is precisely where CopilotKit comes in. Built by the same team that initiated AG-UI, it packages these standards into a frontend SDK with two operating modes: a polished chat component for quick wins, and a headless mode that grants direct access to the received events and hence more freedom. With <code>@copilotkit\/angular<\/code>, all of this arrives as an Angular-native package: providers, signals, and components that feel like the rest of your application.<\/p>\n<p>In short: AG-UI, A2UI, and MCP Apps standardize the communication with the agent; CopilotKit provides a convenient way to integrate agents over these protocols and hence is a missing link for Agentic UI with Angular.<\/p>\n<h2>Creating a Demo<\/h2>\n<p>The demo consists of a regular Angular application with a Mastra-based agent living right next to it. <a href=\"https:\/\/mastra.ai\/\">Mastra<\/a> is a popular TypeScript framework for building agents. Two commands scaffold both parts:<\/p>\n<pre><code class=\"language-bash\">ng new angular-copilot-demo\ncd angular-copilot-demo\nnpx mastra@latest init<\/code><\/pre>\n<p>The Mastra wizard adds an <code>src\/mastra<\/code> folder with a working example agent and asks for an LLM provider and API key along the way, which it stores in an <code>.env<\/code> file.<\/p>\n<p>We use Mastra here because it was built for TypeScript from the ground up and is refreshingly lightweight. For our purposes, however, the choice barely matters: the frontend will only ever see AG-UI. Any agent that speaks AG-UI \u2014 built with LangGraph, CrewAI, Pydantic AI, LlamaIndex, or the Microsoft Agent Framework, to name a few \u2014 could be connected in exactly the same way.<\/p>\n<h2>The Server-Side Agent<\/h2>\n<p>The scaffolded Mastra agent is a weather assistant with a single tool that looks up the weather for a given city \u2014 essentially the &quot;Hello World&quot; of Agentic AI. The file <code>weather-agent.ts<\/code> brings together everything an agent needs \u2014 prompt, model, tools, and memory:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/mastra\/agents\/weather-agent.ts\nimport { Agent } from &#039;@mastra\/core\/agent&#039;;\nimport { Memory } from &#039;@mastra\/memory&#039;;\nimport { weatherTool } from &#039;..\/tools\/weather-tool&#039;;\n\nexport const weatherAgent = new Agent({\n  id: &#039;weather-agent&#039;,\n  name: &#039;Weather Agent&#039;,\n  instructions: `You are a helpful weather assistant [...]`,\n  model: &#039;openai\/gpt-5.6-terra&#039;,\n  tools: { weatherTool },\n  memory: new Memory(),\n});<\/code><\/pre>\n<p>The <code>instructions<\/code> hold the system prompt that defines the agent's role and behavior. For the <code>model<\/code>, a single identifier consisting of provider and model name is enough \u2014 Mastra's model router takes care of the rest, and it expects the matching API key as an environment variable.<\/p>\n<p>Thanks to the configured <code>Memory<\/code> instance, the conversation history stays on the server, so the client only ever has to send the newest message. The scaffold generated by <code>mastra init<\/code> uses a local SQLite database for this.<\/p>\n<p>With schemas based on the popular Zod library, the registered <code>weatherTool<\/code> describes its parameters and results:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/mastra\/tools\/weather-tool.ts\nimport { createTool } from &#039;@mastra\/core\/tools&#039;;\nimport { z } from &#039;zod&#039;;\n\nexport const weatherTool = createTool({\n  id: &#039;get-weather&#039;,\n  description: &#039;Get current weather for a location&#039;,\n  inputSchema: z.object({\n    location: z.string().describe(&#039;City name&#039;),\n  }),\n  outputSchema: z.object({\n    temperature: z.number(),\n    conditions: z.string(),\n    location: z.string(),\n    [...]\n  }),\n  execute: async (inputData) =&gt; {\n    return await getWeather(inputData.location);\n  },\n});<\/code><\/pre>\n<p>On the one hand, these schemas provide the TypeScript types for the program code. On the other hand, Mastra derives a JSON Schema from the <code>inputSchema<\/code> at runtime and sends it to the model together with the name and the <code>description<\/code>. Based on this information, the model decides on its own when to call the tool and which arguments to pass. The <code>outputSchema<\/code>, by contrast, stays on the server: it validates and types the tool result.<\/p>\n<p>The <code>execute<\/code> method holds the tool implementation, which in the case at hand merely delegates to a public weather API via <code>getWeather<\/code>.<\/p>\n<h3>Exposing the Agent via AG-UI<\/h3>\n<p>So far, the agent only speaks Mastra. The bridge to AG-UI is the <code>MastraAgent<\/code> adapter from <code>@ag-ui\/mastra<\/code>: it runs the Mastra agent and translates its streaming events into AG-UI events. A custom route makes this available over HTTP \u2014 the following, slightly simplified handler publishes every registered agent under <code>\/ag-ui\/:agentId<\/code> and streams the AG-UI events back as Server-sent Events:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/mastra\/server\/ag-ui-route.ts\nimport { registerApiRoute } from &#039;@mastra\/core\/server&#039;;\nimport { MastraAgent } from &#039;@ag-ui\/mastra&#039;;\nimport type { RunAgentInput } from &#039;@ag-ui\/core&#039;;\nimport { streamSSE } from &#039;hono\/streaming&#039;;\nimport { concatMap, lastValueFrom } from &#039;rxjs&#039;;\n\nexport const agUiRoute = registerApiRoute(&#039;\/ag-ui\/:agentId&#039;, {\n  method: &#039;POST&#039;,\n  handler: async (c) =&gt; {\n    const mastra = c.get(&#039;mastra&#039;);\n    const agent = mastra.listAgents()[c.req.param(&#039;agentId&#039;)];\n    const input = (await c.req.json()) as RunAgentInput;\n\n    const aguiAgent = new MastraAgent({ agent, resourceId: &#039;anonymous&#039; });\n\n    return streamSSE(c, async (sse) =&gt; {\n      const send = (data: unknown): Promise&lt;void&gt; =&gt;\n        sse.writeSSE({ data: JSON.stringify(data) });\n\n      await lastValueFrom(aguiAgent.run(input).pipe(concatMap(send)), {\n        defaultValue: undefined,\n      });\n    });\n  },\n});<\/code><\/pre>\n<p>The handler reads the <code>RunAgentInput<\/code> \u2014 the payload AG-UI clients send, including thread id and new messages \u2014 and hands it to the adapter, whose <code>run<\/code> method returns an observable of AG-UI events. The rest is pleasantly boring: since Mastra's server builds on <a href=\"https:\/\/hono.dev\/\">Hono<\/a>, its <code>streamSSE<\/code> helper takes care of the SSE headers and framing. <code>concatMap<\/code> forwards the events in order through <code>send<\/code>, and <code>lastValueFrom<\/code> keeps the callback \u2014 and with it the stream \u2014 open until the observable completes.<\/p>\n<p>The central <code>Mastra<\/code> instance registers the agent as well as the route and enables CORS via middleware:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/mastra\/index.ts\nimport { Mastra } from &#039;@mastra\/core\/mastra&#039;;\n\nimport { weatherAgent } from &#039;.\/agents\/weather-agent&#039;;\nimport { agUiRoute } from &#039;.\/server\/ag-ui-route&#039;;\n\nexport const mastra = new Mastra({\n  agents: { weatherAgent },\n  server: {\n    apiRoutes: [agUiRoute],\n    cors: { origin: &#039;*&#039; },\n  },\n  [...]\n});<\/code><\/pre>\n<p>For the demo, the generous <code>origin: &#039;*&#039;<\/code> is fine; a real application would restrict the allowed origins. That's the entire server side: a scaffolded agent, one route, one config entry.<\/p>\n<h3>Even Shorter: The CopilotKit Runtime<\/h3>\n<p>For the sake of completeness: the server side can be even shorter. CopilotKit ships its own runtime that takes care of publishing agents \u2014 with it, you don't have to write the AG-UI route at all. Registering the Mastra agent and serving it boils down to a few lines:<\/p>\n<pre><code class=\"language-typescript\">const runtime = new CopilotRuntime({\n  agents: { weatherAgent: new MastraAgent({ agent: weatherAgent }) },\n});\n\nconst app = createCopilotHonoHandler({ runtime, basePath: &#039;\/&#039; });\n\nserve({ fetch: app.fetch, port: 4555 }, (info) =&gt; {\n  console.log(`CopilotKit runtime listening on http:\/\/localhost:${info.port}`);\n});<\/code><\/pre>\n<p>I deliberately did not take this shortcut for our demo: to me, it is important to show that our Angular client works with any server that speaks AG-UI \u2014 no matter whether CopilotKit is involved on the server side or not. The hand-written route makes exactly this point.<\/p>\n<p><div style=\"\nmargin: 8px 0;\npadding: 22px;\nborder: 1px solid #e5e7eb;\nborder-radius: 14px;\nbackground: #f8fafc;\n\">NOTE<\/p>\n<h3 style=\"margin-top:0\">New: Agentic UI with Angular<\/h3>\n<p>If you don\u2019t just want to connect an agent but embed Agentic UI into a scalable architecture:<br \/>\nIn my book Agentic UI with Angular, I cover the underlying patterns and trade-offs in depth.<\/p>\n<p><a href=\"https:\/\/agentic-angular.com\/\"><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/cover.png\" width=\"400\" alt=\"Cover of the eBook Agentic UI with Angular\" style=\"cursor:pointer !important\"><\/a><\/p>\n<p><a style=\"cursor:pointer !important\" href=\"https:\/\/agentic-angular.com\/\">More about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n<h2>The Client<\/h2>\n<p>Time for the missing link: CopilotKit for Angular. It is installed via npm:<\/p>\n<pre><code class=\"language-bash\">npm i @copilotkit\/angular<\/code><\/pre>\n<p>The function <code>provideCopilotKit<\/code> in <code>app.config.ts<\/code> connects the application to our agent:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/app.config.ts\nimport { ApplicationConfig, provideBrowserGlobalErrorListeners } from &#039;@angular\/core&#039;;\nimport { provideCopilotKit } from &#039;@copilotkit\/angular&#039;;\nimport { HttpAgent } from &#039;@ag-ui\/client&#039;;\n\nconst AG_UI_URL = &#039;http:\/\/localhost:4111\/ag-ui\/weatherAgent&#039;;\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideBrowserGlobalErrorListeners(),\n    [...]\n    provideCopilotKit({\n      agents: {\n        default: new HttpAgent({ url: AG_UI_URL }),\n      },\n    }),\n  ],\n};<\/code><\/pre>\n<p>CopilotKit simply expects an AG-UI agent. The <code>HttpAgent<\/code> from the AG-UI client SDK points at our <code>\/ag-ui\/weatherAgent<\/code> endpoint \u2014 no CopilotKit runtime, no additional middleware in between, and not a single line of Mastra-specific code in the browser. The key <code>default<\/code> is the client-side name components use to refer to this agent.<\/p>\n<p>The user interface is a one-liner. The <code>CopilotChat<\/code> component brings the message list, input field, and streaming display along:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/app.ts\nimport { CopilotChat } from &#039;@copilotkit\/angular&#039;;\n\n@Component({\n  selector: &#039;app-root&#039;,\n  imports: [CopilotChat],\n  templateUrl: &#039;.\/app.html&#039;,\n  styleUrl: &#039;.\/app.css&#039;,\n})\nexport class App {}<\/code><\/pre>\n<pre><code class=\"language-html\">&lt;!-- src\/app\/app.html --&gt;\n&lt;main class=&quot;chat-host&quot;&gt;\n  &lt;copilot-chat agentId=&quot;default&quot; \/&gt;\n&lt;\/main&gt;<\/code><\/pre>\n<p>That's it \u2014 a complete, streaming chat over a real agent, without a single line of event-handling code in the application.<\/p>\n<h2>Trying It Out<\/h2>\n<p>Running the demo takes two terminals in the project root. The <code>.env<\/code> file created by the Mastra wizard has to contain the LLM key \u2014 for OpenAI, that's <code>OPENAI_API_KEY<\/code>. The first terminal starts the Mastra dev server, which listens on port <code>4111<\/code>:<\/p>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>The second one starts the Angular dev server on port <code>4200<\/code>:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Now we ask about the weather in Vienna \u2014 the answer streams in word by word, and behind the scenes the agent has already geocoded the city and called its weather tool:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/copilotkit-chat.png\" alt=\"The CopilotKit chat component answering a weather question backed by the Mastra agent\" \/><\/p>\n<p>Thanks to the server-side memory, follow-up questions like <code>Is it warmer than in Paris?<\/code> work as well: both questions belong to the same conversation thread, so the agent knows what &quot;it&quot; refers to.<\/p>\n<h2>Headless Mode<\/h2>\n<p>The prebuilt chat component is the fastest way to a running result. But real applications quickly outgrow it: the chat has to match the design system, custom widgets should appear in the conversation \u2014 and not everything is a chat. An agent may just as well drive a form, a dashboard, or an entire workflow. This flexibility is where CopilotKit's headless mode comes in: it provides state and behavior, and leaves every pixel of the rendering to us.<\/p>\n<p>The demo project contains a hand-rolled chat component that consumes the same agent through the headless API:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/headless-chat\/headless-chat.ts\nimport { Component, computed, inject } from &#039;@angular\/core&#039;;\nimport { CopilotKit, injectAgentStore } from &#039;@copilotkit\/angular&#039;;\nimport { randomUUID } from &#039;@copilotkit\/shared&#039;;\n\n@Component({\n  selector: &#039;app-headless-chat&#039;,\n  [...]\n})\nexport class HeadlessChat {\n  private readonly copilotKit = inject(CopilotKit);\n  private readonly store = injectAgentStore(&#039;default&#039;);\n\n  protected readonly isRunning = computed(() =&gt; this.store().isRunning());\n\n  protected readonly visibleMessages = computed(() =&gt;\n    this.store()\n      .messages()\n      .filter((m) =&gt; m.role === &#039;user&#039; || m.role === &#039;assistant&#039;)\n      .map((m) =&gt; [...])\n  );\n\n  protected async send(content: string) {\n    const agent = this.store().agent;\n    agent.addMessage({ id: randomUUID(), role: &#039;user&#039;, content });\n    await this.copilotKit.core.runAgent({ agent });\n  }\n}<\/code><\/pre>\n<p>The function <code>injectAgentStore<\/code> returns a signal-based store for the registered agent: <code>messages()<\/code> holds the conversation, <code>isRunning()<\/code> the execution state \u2014 both plain Angular signals that plug directly into <code>computed<\/code> and the template. Sending a message is just as explicit: add the user message to the agent, then start a run via <code>runAgent<\/code>. The store updates while the events stream in, so the UI re-renders continuously.<\/p>\n<p>The template is entirely ours \u2014 a plain list and a form, styled however we like:<\/p>\n<pre><code class=\"language-html\">&lt;!-- src\/app\/headless-chat\/headless-chat.html --&gt;\n&lt;ol class=&quot;log&quot; aria-live=&quot;polite&quot;&gt;\n  @for (message of visibleMessages(); track message.id) {\n    &lt;li [attr.data-role]=&quot;message.role&quot;&gt;\n      &lt;span&gt;{{ message.role === &#039;user&#039; ? &#039;You&#039; : &#039;Agent&#039; }}&lt;\/span&gt;\n      &lt;p&gt;{{ message.text }}&lt;\/p&gt;\n    &lt;\/li&gt;\n  }\n&lt;\/ol&gt;\n\n&lt;form (submit)=&quot;[...]&quot;&gt;\n  [...]\n&lt;\/form&gt;<\/code><\/pre>\n<h2>Next Steps<\/h2>\n<p>What we've built here is only the entry point. For full-blown Agentic UIs, we need more, for instance:<\/p>\n<ul>\n<li><strong>Client-side tools<\/strong>, so the agent can automate tasks inside the application and learn about the current user context \u2014 what is selected, which screen is open, what the user is working on.<\/li>\n<li><strong>Client-side visualizations picked by the agent<\/strong>: instead of answering with a wall of text, the agent should choose from the application's components dynamically.<\/li>\n<li><strong>A2UI support<\/strong>, so the agent can compose its answers as declarative UI on the fly.<\/li>\n<li><strong>MCP Apps support<\/strong>, so third-party tools can be integrated and visualized inside our application.<\/li>\n<li><strong>Human-in-the-loop patterns beyond simple approvals<\/strong>, so users stay in control of what the agent does.<\/li>\n<\/ul>\n<p>An example of where this leads: a dynamic dashboard whose content is controlled by the agent:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/dashboard.png\" alt=\"A dynamic dashboard driven by the agent, built step by step in the blog series\" \/><\/p>\n<p>CopilotKit covers this ground as well \u2014 and my blog series takes each of these steps in turn, building, among other things, exactly this dashboard:<\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/understanding-ag-ui-the-standard-for-agentic-user-interfaces\/\" class=\"button\" style=\"text-decoration:none !important\"><strong>To the blog series \u2192<\/strong><\/a><\/p>\n<hr \/>\n<p><div style=\"\nmargin: 8px 0;\npadding: 22px;\nborder: 1px solid #e5e7eb;\nborder-radius: 14px;\nbackground: #f8fafc;\n\"><\/p>\n<h3 style=\"margin-top:0\">Interested in production-ready Agentic UI architectures?<\/h3>\n<p>In my workshop, we dive into AG-UI, A2UI, MCP Apps, HITL patterns, and modern Angular architectures for real-world agentic systems.<\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/agentic-ai-with-angular-architecture-patterns\/\"><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/05\/sujet-workshop-en.png\" width=\"400\" alt=\"Workshop: Agentic AI with Angular \u2013 AG-UI, A2UI, MCP Apps & HITL patterns\" style=\"cursor:pointer !important\"><\/a><\/p>\n<p><a style=\"cursor:pointer !important\" href=\"https:\/\/www.angulararchitects.io\/en\/training\/agentic-ai-with-angular-architecture-patterns\/\">See all details \u2192<\/a>\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why consuming agents needs a real client library \u2014 and how to get started in minutes. The server side of Agentic AI is booming: agent frameworks, tool calling, memory, orchestration. But the moment an Angular application is supposed to integrate an agent \u2014 displaying its answers, calling client-side tools, rendering real UI instead of walls [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":34613,"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-34617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.\" \/>\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\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-03T16:44:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-03T17:17:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-sujet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\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\/08\/social-sujet.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=\"12 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\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"CopilotKit: The Missing Link for Agentic UI with Angular\",\"datePublished\":\"2026-08-03T16:44:30+00:00\",\"dateModified\":\"2026-08-03T17:17:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\"},\"wordCount\":1825,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\",\"name\":\"CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png\",\"datePublished\":\"2026-08-03T16:44:30+00:00\",\"dateModified\":\"2026-08-03T17:17:13+00:00\",\"description\":\"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CopilotKit: The Missing Link for Agentic 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":"CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects","description":"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.","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\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/","og_locale":"en_US","og_type":"article","og_title":"CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects","og_description":"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-08-03T16:44:30+00:00","article_modified_time":"2026-08-03T17:17:13+00:00","og_image":[{"width":2400,"height":1260,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-sujet.png","type":"image\/png"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-sujet.png","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"CopilotKit: The Missing Link for Agentic UI with Angular","datePublished":"2026-08-03T16:44:30+00:00","dateModified":"2026-08-03T17:17:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/"},"wordCount":1825,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/","name":"CopilotKit: The Missing Link for Agentic UI with Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png","datePublished":"2026-08-03T16:44:30+00:00","dateModified":"2026-08-03T17:17:13+00:00","description":"CopilotKit is the missing link for Agentic UI with Angular: native AG-UI, a bridge to A2UI and MCP Apps, and a streaming chat in minutes.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/08\/social-bg.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/copilotkit-the-missing-link-for-agentic-ui-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"CopilotKit: The Missing Link for Agentic 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\/34617","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=34617"}],"version-history":[{"count":6,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/34617\/revisions"}],"predecessor-version":[{"id":34627,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/34617\/revisions\/34627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/34613"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=34617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=34617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=34617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}