Angular

@copilotkit/angular provides providers, prebuilt chat components, a CopilotKit service, and standalone functions for Angular applications. Everything is built on the AG-UI agent protocol.

Installation

npm install @copilotkit/angular @angular/cdk

@angular/cdk and rxjs are peer dependencies. If your agent connects directly over AG-UI, also install @ag-ui/client.

Styling

When using the prebuilt UI components, import the stylesheet once in your global styles. It is self-contained, so the chat renders without any other CSS.

@import "@copilotkit/angular/styles.css";

Provider setup

Add provideCopilotKit to your application providers and configure the runtime connection there. The root CopilotKit service reads this application-level configuration.

import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular";

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: "/api/copilotkit",
    }),
  ],
};

To connect directly to an AG-UI agent without a runtime, pass selfManagedAgents instead of runtimeUrl:

import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular";
import { HttpAgent } from "@ag-ui/client";

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      selfManagedAgents: {
        default: new HttpAgent({ url: "http://localhost:8000/" }),
      },
    }),
  ],
};

Then drop the chat into a standalone component's template:

import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CopilotChat],
  template: `<copilot-chat />`,
})
export class AppComponent {}

Angular conventions

CopilotKit follows Angular's dependency-injection and signal patterns:

• Register provideCopilotKit in application providers.
• Read reactive state by calling signals such as agentStore().messages().
• Call injectable helpers from a constructor, field initializer, or another injection context.
• Import standalone components in the component imports array.
• Customize UI with component inputs, templates, directives, and content projection.

Lifecycle and rendering environments

Injectable helpers bind their effects, subscriptions, runtime registrations, timers, and observers to the owning Angular DestroyRef. Call them from a field initializer, constructor, or explicit injection context. Do not cache an injected controller beyond that injector's lifetime. Application-owned work started inside a tool handler, such as a fetch, remains the application's responsibility to cancel.

CopilotKit's main chat components use signals and support zoneless change detection. Browser-only behavior is inert during server rendering and activates after hydration. Keep configuration and initial model/input values identical for the server and the first client render, avoid running agents or tools on the server, and place application-owned DOM work behind an Angular platform guard or afterNextRender.

A2UI, Open Generative UI, audio capture, and MCP Apps can be present in an SSR tree, but their custom elements, media APIs, sandboxes, and iframes become interactive only in the browser. See Angular production and lifecycle for the full setup, cleanup, error, SSR, hydration, and zoneless contract.

API Reference