Introducing Angular support for CopilotKit: bring any Agent into your app

CopilotKit has released Angular support, an open-source client that brings any AG-UI agent into Angular apps with pre-built chat components, generative UI, shared state, and human-in-the-loop features. The integration, built by Rainer Hahnekamp and Murat Sari, uses the Agent-User Interaction Protocol to stream an agent's lifecycle as events, keeping the Angular app and agent in sync.

Angular apps can now run any agent, with the streaming, tool calls, and shared state already handled. Today we're releasing Angular support for CopilotKit https://www.copilotkit.ai/angular , an open source client that brings any AG-UI https://github.com/ag-ui-protocol/ag-ui agent into your Angular app. It's built with Angular's own patterns, standalone components, dependency injection and signals. You get the building blocks for agent-native apps in Angular: pre-built chat components or a fully headless setup, generative UI, shared state, human-in-the-loop, multimodal attachments, threads and more. Use the CLI to scaffold a full starter Angular app with a Google ADK agent. npx copilotkit@latest init --framework adk-angular Let's see how to set everything up, then go through each of the pieces and give your agent the context. Quickstart docs are on docs.copilotkit.ai/angular https://docs.copilotkit.ai/angular . Rainer Hahnekamp Angular GDE, NgRx core and Murat Sari helped build the integration and are now taking on its ongoing maintenance. Everything runs on Agent-User Interaction Protocol AG-UI https://github.com/ag-ui-protocol/ag-ui , the open protocol that connects agents to user-facing apps. It streams an agent's entire lifecycle as events, the messages, the tool calls, the state changes, which is what keeps your Angular app and the agent in sync. That matters because the agent becomes a choice you can change. The runtime can point at a BuiltInAgent , LangGraph, Google ADK, Mastra, Pydantic AI, Claude Agents SDK or any framework that speaks AG-UI and your Angular code doesn't change. Here's the architecture. ┌──────────────────────────┐ ┌──────────────────────────┐ │ ANGULAR APP │ │ COPILOT RUNTIME Node │ │ │ │ │ │ provideCopilotKit │ ─────► │ holds your model keys │ │ <copilot-chat / │ AG-UI │ connects to your agent │ │ tools · context · state │ ◄───── │ streams events back │ └──────────────────────────┘ └──────────────┬───────────┘ │ ▼ ┌───────────────────────────┐ │ YOUR AGENT + MODEL │ │ LangGraph · ADK · Mastra │ │ OpenAI or a local model │ └───────────────────────────┘ Your Angular app is the browser half. The runtime is a small Node server that keeps your model credentials off the client. Everything below the AG-UI line is swappable, including running the model locally. The CLI scaffolds all three parts for you, including a runtime server with a Google ADK agent, already wired with generative UI and threads. npx copilotkit@latest init --framework adk-angular --name my-angular-adk-app Let's also do it manually, since it's just four steps and it shows you where each piece goes. Install the client along with Angular's CDK. Make sure the CDK version matches your Angular major version. npm install @copilotkit/angular @angular/cdk Angular configures services through providers, so that's where CopilotKit goes. Point it at a Copilot Runtime https://docs.copilotkit.ai/backend/copilot-runtime endpoint, which is where your agent runs. js // src/app/app.config.ts import { ApplicationConfig, provideZonelessChangeDetection } from "@angular/core"; import { provideCopilotKit, provideCopilotChatConfiguration } from "@copilotkit/angular"; export const AGENT ID = "default"; export const appConfig: ApplicationConfig = { providers: provideZonelessChangeDetection , provideCopilotKit { runtimeUrl: "http://localhost:8200/api/copilotkit", } , // owns the active thread that the threads drawer drives provideCopilotChatConfiguration { agentId: AGENT ID } , , }; Now import the stylesheet. It comes with everything the chat needs, so you don't have to write any CSS. / src/styles.css / @import "@copilotkit/angular/styles.css"; You can drop in the ready-made chat, compose it from smaller pieces, or go fully headless and build your own UI. js // src/app/app.ts import { Component } from "@angular/core"; import { CopilotChat, CopilotThreadsDrawer, CopilotChatMessageView, CopilotChatInput, } from "@copilotkit/angular"; import { AGENT ID } from "./app.config"; @Component { selector: "app-root", imports: CopilotChat, CopilotThreadsDrawer, CopilotChatMessageView, CopilotChatInput , template: < -- pre-built chat component -- <copilot-chat agentId ="AGENT ID" / < -- or compose the pieces into your own panel -- <aside class="copilot-panel" <copilot-threads-drawer / <copilot-chat-message-view / <copilot-chat-input / </aside , } export class App { protected readonly AGENT ID = AGENT ID; } For a fully custom UI, injectAgentStore gives you the agent's messages and run state as signals, and you render everything yourself. I've covered this in-depth in the shared state section. The last piece is the runtime. js // server.ts import "dotenv/config"; import { createServer } from "node:http"; import { BuiltInAgent, CopilotRuntime } from "@copilotkit/runtime/v2"; import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; const runtime = new CopilotRuntime { agents: { default: new BuiltInAgent { model: "openai:gpt-5.5", prompt: "You are a helpful assistant inside an Angular app.", } , }, } ; createServer createCopilotNodeListener { runtime, basePath: "/api/copilotkit", cors: true } , .listen 8200, = { console.log "Copilot Runtime on http://localhost:8200/api/copilotkit" ; } ; The agent is named default on purpose, since that's the AGENT ID the chat is pointed at. That's the whole setup. It streams responses, renders tool calls, and keeps conversation state. Read more on the docs.copilotkit.ai/angular https://docs.copilotkit.ai/angular . Generative UI lets the agent build interfaces in real time. That ranges from the agent picking components you already wrote, to assembling them from a catalog you define, to generating a whole surface on its own. If you are interested, read more on the Generative UI Spectrum blog https://www.copilotkit.ai/blog/generative-ui-explained-how-agents-now-ship-their-own-interfaces that covers all the approaches with the tradeoffs. The simplest version is the first one, where you write the components and the agent decides which one to render and what data to pass. Start with a normal standalone component that reads the tool call as a signal input. js // src/app/weather-card.ts import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core"; import { z } from "zod"; import type { AngularToolCall, ToolRenderer } from "@copilotkit/angular"; export const weatherArgs = z.object { location: z.string } ; type WeatherArgs = z.infer<typeof weatherArgs ; @Component { selector: "app-weather-card", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: <div class="wc" <h3 {{ location }}</h3 <div class="temp" 70°</div <p Clear skies</p </div , styles: .wc { border-radius: 12px; padding: 16px; color: fff; background: 6366f1; width: fit-content; } .wc h3 { margin: 0; text-transform: capitalize; } .temp { font-size: 30px; font-weight: 700; } , , } export class WeatherCard implements ToolRenderer<WeatherArgs { readonly toolCall = input.required<AngularToolCall<WeatherArgs ; protected readonly location = computed = this.toolCall .args?.location ?? "Weather", ; } Now register it as the renderer for a tool the agent calls. The cleanest way is declaratively, in the provider config. js // src/app/app.config.ts import { provideCopilotKit } from "@copilotkit/angular"; import { WeatherCard, weatherArgs } from "./weather-card"; provideCopilotKit { runtimeUrl: "http://localhost:8200/api/copilotkit", // when the agent calls get weather, render WeatherCard with its args renderToolCalls: { name: "get weather", args: weatherArgs, component: WeatherCard }, , } ; You can also register it from inside a component with registerRenderToolCall { name, args, component } , which is handy when the renderer only makes sense on one page. For example: ask about the weather in Tokyo and the card appears in the chat. The agent decides when to render it, and your app decides how it looks. You can also use A2UI Agent-to-UI https://docs.copilotkit.ai/generative-ui/a2ui , Google's schema-driven spec for agent-authored interfaces. The agent describes a surface with a schema, and Angular renders it as real components, so it can go beyond the components you registered ahead of time. Murat Sari published a tutorial on building an A2UI app in Angular on a local 12B model https://soverius.ai/blog/inside-macroquest-agent-generated-ui-in-angular-on-a-local-12b-model , which is worth a read if you want to see it end to end. Real users don't just type. Let them send images, audio, video, and documents to the agent alongside their message. It's one input on <copilot-chat . Pass an AttachmentsConfig and the composer gets an attach button, drag and drop, previews, and validation. js // src/app/app.ts import { Component } from "@angular/core"; import { CopilotChat, type AttachmentsConfig } from "@copilotkit/angular"; import { AGENT ID } from "./app.config"; @Component { selector: "app-root", imports: CopilotChat , template: <copilot-chat agentId ="AGENT ID" attachments ="attachments" / , } export class App { protected readonly AGENT ID = AGENT ID; protected readonly attachments: AttachmentsConfig = { enabled: true, accept: "image/ ", // MIME filter, defaults to all files maxSize: 10 1024 1024, // bytes, defaults to 20MB }; } With just { enabled: true } , files are encoded inline and sent along with the message, which is fine while you're building. In production, you don't want a 10MB base64 blob in every request, so hand large files to your own storage with onUpload and give the agent a URL instead. protected readonly attachments: AttachmentsConfig = { enabled: true, accept: "image/ ,application/pdf", maxSize: 20 1024 1024, // upload to your bucket, hand the agent a URL instead of base64 onUpload: async file = { const url = await uploadToStorage file ; // your S3, GCS, whatever return { type: "url", value: url, mimeType: file.type }; }, onUploadFailed: error = console.error error.reason, error.message , }; The attachment travels with the message content, so a vision-capable model reads the image the user sent and can act on it through your tools. Some critical actions shouldn't run on their own like deleting a record or sending an email, so it's important to configure human-in-the-loop. It pauses the agent mid-run and waits for your approval before it continues. The component reads the paused tool call, shows the controls, and calls respond to unblock the agent. Whatever you pass to respond becomes the tool result, so the approve and cancel paths send different messages. js // src/app/delete-confirm.ts import { Component, inject, input } from "@angular/core"; import type { HumanInTheLoopToolCall } from "@copilotkit/angular"; import { TaskStore } from "./task-store"; @Component { selector: "app-delete-confirm", standalone: true, template: @if toolCall .status === "complete" { <div class="resolved" {{ toolCall .result }}</div } @else { <div class="confirm" <p Delete "{{ toolCall .args.title }}"?</p <button class="danger" click ="approve " Delete</button <button click ="cancel " Keep it</button </div } , } export class DeleteConfirm { private store = inject TaskStore ; readonly toolCall = input.required<HumanInTheLoopToolCall<{ id: string; title: string } ; approve : void { const { id, title } = this.toolCall .args as { id: string; title: string }; this.store.remove id ; this.toolCall .respond?. Deleted "${title}". ; } cancel : void { this.toolCall .respond?. "User kept the task." ; } } Register it as a human-in-the-loop tool. There's no handler here, unlike a frontend tool, because the component is the handler. The outcome depends on what the person clicks. js // inside a component's constructor injection context import { registerHumanInTheLoop } from "@copilotkit/angular"; import { z } from "zod"; import { DeleteConfirm } from "./delete-confirm"; registerHumanInTheLoop { name: "delete task", description: "Delete a task. Requires user confirmation.", parameters: z.object { id: z.string , title: z.string } , component: DeleteConfirm, } ; Now, if you ask the agent to delete something, the agent will stop the run and ask for your confirmation before proceeding. State flows between your app and the agent in two ways, and the difference is who owns it. Either the agent owns the state and syncs it both directions, or your app owns it and exposes it for the agent to read. The snippets use zod https://zod.dev for schemas, so install it alongside the client with npm install zod . The agent owns a piece of state, your UI reads it, and your UI can write back to it. injectAgentStore gives you that state as a signal, so components re-render when the agent changes something, and setState sends your changes the other way. setState replaces the whole state object instead of merging, so spread what's already there and change only the key you need. js // src/app/proverbs.ts import { Component, computed } from "@angular/core"; import { injectAgentStore } from "@copilotkit/angular"; import { AGENT ID } from "./app.config"; interface AgentState { proverbs?: string ; } @Component { selector: "app-proverbs", standalone: true, template: @for proverb of proverbs ; track $index { <div class="proverb" <span {{ proverb }}</span <button click ="remove $index " ✕</button </div } , } export class Proverbs { readonly store = injectAgentStore AGENT ID ; // READ: the agent's state as a signal protected readonly proverbs = computed<string = this. store .state as AgentState | undefined ?.proverbs ?? , ; // WRITE: spread the existing state, setState replaces the whole object protected remove index: number : void { const state = this. store .state as AgentState | undefined ?? {}; this. store .agent.setState { ...state, proverbs: this.proverbs .filter , i = i == index , } ; } } If you only need the agent to see what's on screen, use connectAgentContext . You pass a function that reads your state, so it works with whatever you already use, plain signals, a service, or a store like NgRx. js // src/app/tasks.ts import { Component, computed, inject } from "@angular/core"; import { connectAgentContext } from "@copilotkit/angular"; import { TaskStore } from "./task-store"; @Component { selector: "app-tasks", standalone: true, template: ... } export class Tasks { private store = inject TaskStore ; constructor { connectAgentContext computed = { description: "The user's current task list.", value: JSON.stringify this.store.tasks , } , ; } } Now the agent can see the tasks and reference one by its ID. But it can only read, so let's add a frontend tool that lets it act on the context. To let the agent take action based on that context, we need to add a frontend tool. You give it a Zod schema so the arguments are typed, and a handler that runs in the browser. js // inside a component's constructor import { registerFrontendTool } from "@copilotkit/angular"; import { z } from "zod"; registerFrontendTool { name: "add task", description: "Add a task to the list.", parameters: z.object { title: z.string } , handler: async { title } = this.store.add title , } ; Now the user can say "add a task to record the demo video" and the agent calls add task , your handler adds it to the store, and the dashboard updates. That's the whole loop. The agent sees your state, changes it through tools, renders UI for the result, and pauses for a person when it matters. @copilotkit/angular is open source in the CopilotKit GitHub Repo https://github.com/CopilotKit/copilotkit , running on Angular 19, 20, and 21. Rainer Hahnekamp and Murat Sari helped build the integration, with Soverius AI https://soverius.ai/blog/soverius-ai-is-now-maintaining-copilotkit-for-angular now taking on its ongoing maintenance in collaboration with CopilotKit. Angular 22 is next, along with more docs and examples as the SDK closes the remaining gaps with React. If something's missing, open an issue on the CopilotKit repo and we'll pick it up. Connect with me on GitHub https://github.com/Anmol-Baranwal , Twitter https://x.com/Anmol Codes , LinkedIn https://www.linkedin.com/in/Anmol-Baranwal/ . thanks for reading Follow CopilotKit on Twitter https://go.copilotkit.ai/socials-twitter . If you get stuck, reach out to the team on the CopilotKit https://go.copilotkit.ai/discord and AG-UI https://go.copilotkit.ai/AG-UI-Discord communities.