CopilotKit
The root Angular service that exposes CopilotKit agents, tools, runtime state, and suggestions as signals
Overview
CopilotKit is the central injectable service for @copilotkit/angular. It is providedIn: "root", so a single instance is shared across your application. It builds and owns the underlying CopilotKitCore from the CopilotKitConfig you registered with provideCopilotKit, exposes reactive runtime state as Angular signals, and provides methods to register tools, manage suggestions, and update the runtime connection.
This is the Angular equivalent of React's useCopilotKit(). In most apps you do not call its methods directly. The injectable functions such as registerFrontendTool, registerRenderToolCall, and registerHumanInTheLoop wrap it and add automatic cleanup. Inject the service when you need direct access to its signals or the core instance.
Accessing the service
Inject it from any injection context, for example a component or service.
import { Component, inject } from "@angular/core";
import { CopilotKit } from "@copilotkit/angular";
@Component({
selector: "app-status",
standalone: true,
template: `<p>Status: {{ copilotKit.runtimeConnectionStatus() }}</p>`,
})
export class StatusComponent {
protected readonly copilotKit = inject(CopilotKit);
}Signals
All reactive state is exposed as read-only Angular signals. Read a signal by calling it, for example copilotKit.agents().
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Properties
Prop
Type
Methods
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Usage
Read agents and connection status in a template
import { Component, inject } from "@angular/core";
import { CopilotKit } from "@copilotkit/angular";
@Component({
selector: "app-agents-panel",
standalone: true,
template: `
<p>Status: {{ copilotKit.runtimeConnectionStatus() }}</p>
<ul>
@for (id of agentIds(); track id) {
<li>{{ id }}</li>
}
</ul>
`,
})
export class AgentsPanelComponent {
protected readonly copilotKit = inject(CopilotKit);
protected readonly agentIds = () => Object.keys(this.copilotKit.agents());
}Switch the runtime URL at runtime
import { Component, inject } from "@angular/core";
import { CopilotKit } from "@copilotkit/angular";
@Component({
selector: "app-runtime-switcher",
standalone: true,
template: `<button (click)="useStaging()">Use staging</button>`,
})
export class RuntimeSwitcherComponent {
private readonly copilotKit = inject(CopilotKit);
protected useStaging(): void {
this.copilotKit.updateRuntime({
runtimeUrl: "https://staging.example.com/api/copilotkit",
});
}
}Reload suggestions for an agent
import { Component, inject } from "@angular/core";
import { CopilotKit } from "@copilotkit/angular";
@Component({
selector: "app-suggestions",
standalone: true,
template: `<button (click)="refresh()">Refresh suggestions</button>`,
})
export class SuggestionsComponent {
private readonly copilotKit = inject(CopilotKit);
protected refresh(): void {
this.copilotKit.reloadSuggestions("default");
}
}