CopilotKit

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().

<PropertyReference name="agents" type="Signal<Record<string, AbstractAgent>>"> The agents currently registered, keyed by agent id. Updated when the core's agents change. </PropertyReference> <PropertyReference name="runtimeConnectionStatus" type="Signal<CopilotKitCoreRuntimeConnectionStatus>"> The current runtime connection status: `Disconnected`, `Connecting`, `Connected`, or `Error`. </PropertyReference> <PropertyReference name="runtimeUrl" type="Signal<string | undefined>"> The current runtime URL, or `undefined` when none is configured. </PropertyReference> <PropertyReference name="runtimeTransport" type="Signal<CopilotRuntimeTransport>"> The active runtime transport: `"rest"`, `"single"`, or `"auto"`. Defaults to `"auto"`. </PropertyReference> <PropertyReference name="headers" type="Signal<Record<string, string>>"> The HTTP headers currently sent with runtime requests. </PropertyReference> <PropertyReference name="suggestionsByAgent" type="Signal<Record<string, CopilotKitCoreGetSuggestionsResult>>"> Suggestions keyed by agent id. Each value is `{ suggestions: Suggestion[]; isLoading: boolean }`. </PropertyReference> <PropertyReference name="toolCallRenderConfigs" type="Signal<RenderToolCallConfig[]>"> All registered tool call renderers, including built-in renderers (for example A2UI). </PropertyReference> <PropertyReference name="clientToolCallRenderConfigs" type="Signal<FrontendToolConfig[]>"> All registered client (frontend) tools, including built-in tools (for example the open generative UI tool when enabled). </PropertyReference> <PropertyReference name="humanInTheLoopToolRenderConfigs" type="Signal<HumanInTheLoopConfig[]>"> All registered human-in-the-loop tool configs. </PropertyReference> <PropertyReference name="activityMessageRenderConfigs" type="Signal<RenderActivityMessageConfig[]>"> All registered activity message renderers, including built-in renderers. </PropertyReference>

Properties

<PropertyReference name="core" type="CopilotKitCore"> The underlying `CopilotKitCore` instance from `@copilotkit/core`. Use it for lower-level operations that the service does not wrap, such as adding context or subscribing to core events. </PropertyReference>

Methods

<PropertyReference name="addFrontendTool" type="(tool: FrontendToolConfig & { injector: Injector }) => void"> Register a client-side tool. The handler is rebound to run inside the provided `injector`, so it can use `inject()`. Prefer [`registerFrontendTool`](/reference/angular/functions/registerFrontendTool), which supplies the injector and removes the tool on destroy. </PropertyReference> <PropertyReference name="addRenderToolCall" type="(renderConfig: RenderToolCallConfig) => void"> Register a renderer for a tool call. Prefer [`registerRenderToolCall`](/reference/angular/functions/registerRenderToolCall) for automatic cleanup. </PropertyReference> <PropertyReference name="addRenderActivityMessage" type="(renderConfig: RenderActivityMessageConfig) => void"> Register a renderer for an agent activity message type. </PropertyReference> <PropertyReference name="addHumanInTheLoop" type="(humanInTheLoopTool: HumanInTheLoopConfig) => void"> Register a human-in-the-loop tool. The tool pauses the run until the user responds. Prefer [`registerHumanInTheLoop`](/reference/angular/functions/registerHumanInTheLoop) for automatic cleanup. </PropertyReference> <PropertyReference name="addSuggestionsConfig" type="(config: SuggestionsConfig) => string"> Add a suggestions configuration and return its id. </PropertyReference> <PropertyReference name="removeSuggestionsConfig" type="(id: string) => void"> Remove a previously added suggestions configuration by id. </PropertyReference> <PropertyReference name="getSuggestions" type="(agentId: string) => CopilotKitCoreGetSuggestionsResult"> Return the current suggestions for an agent as `{ suggestions, isLoading }`. Reads from `suggestionsByAgent` first, falling back to the core. </PropertyReference> <PropertyReference name="reloadSuggestions" type="(agentId: string) => void"> Regenerate the suggestions for an agent. </PropertyReference> <PropertyReference name="clearSuggestions" type="(agentId: string) => void"> Clear the current suggestions for an agent. </PropertyReference> <PropertyReference name="removeTool" type="(toolName: string, agentId?: string) => void"> Remove a tool by name (optionally scoped to an `agentId`) and drop its matching client tool, human-in-the-loop, and tool call render configs. </PropertyReference> <PropertyReference name="getAgent" type="(agentId: string) => AbstractAgent | undefined"> Return the agent registered under `agentId`, or `undefined`. </PropertyReference> <PropertyReference name="updateRuntime" type="(options) => void"> Update the runtime connection at runtime. `options` may include `runtimeUrl`, `runtimeTransport`, `headers`, `properties`, `agents`, and `selfManagedAgents`. Only the fields you pass are applied; `runtimeUrl`, `runtimeTransport`, and `headers` also update the corresponding signals. </PropertyReference>

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");
  }
}