Angular

@copilotkit/angular brings CopilotKit to Angular. It ships a set of providers, prebuilt chat components, a CopilotKit service, and standalone functions that mirror the React SDK. 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

CopilotKit is configured through Angular's dependency injection rather than a wrapper component. Add provideCopilotKit to your application providers and configure the runtime connection there. Every component, service, and function reads this configuration through the injector, so they must be used within an application (or component) that has the provider in scope.

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

A few patterns recur across this reference and differ from the React SDK:

• Setup is a provider, not a component. Where the React SDK wraps your app in <CopilotKit>, the Angular SDK registers provideCopilotKit in your application or component providers.
• State is exposed as signals. Where React hooks return values that trigger re-renders, the Angular SDK exposes Angular signals. Read them by calling the signal, for example agentStore().messages().
• Functions run in an injection context. Functions such as injectAgentStore, registerFrontendTool, and connectAgentContext use Angular's inject() under the hood. Call them from a constructor, a field initializer, or another injection context. They clean themselves up when the owning component or service is destroyed.
• Components are standalone. Import the component class into your imports array and use its element selector in the template, for example <copilot-chat> for CopilotChat.
• Templates and directives replace render props. Where the React SDK uses render props or children, the Angular components accept Angular templates and content projection for the same customization.

API Reference