CopilotKit.mdx

title	CopilotKit
description	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().

The agents currently registered, keyed by agent id. Updated when the core's agents change. The current runtime connection status: `Disconnected`, `Connecting`, `Connected`, or `Error`. The current runtime URL, or `undefined` when none is configured. The active runtime transport: `"rest"`, `"single"`, or `"auto"`. Defaults to `"auto"`. The HTTP headers currently sent with runtime requests. Suggestions keyed by agent id. Each value is `{ suggestions: Suggestion[]; isLoading: boolean }`. All registered tool call renderers, including built-in renderers (for example A2UI). All registered client (frontend) tools, including built-in tools (for example the open generative UI tool when enabled). All registered human-in-the-loop tool configs. All registered activity message renderers, including built-in renderers.

Properties

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.

Methods

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. Register a renderer for a tool call. Prefer [`registerRenderToolCall`](/reference/angular/functions/registerRenderToolCall) for automatic cleanup. Register a renderer for an agent activity message type. 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. Add a suggestions configuration and return its id. Remove a previously added suggestions configuration by id. Return the current suggestions for an agent as `{ suggestions, isLoading }`. Reads from `suggestionsByAgent` first, falling back to the core. Regenerate the suggestions for an agent. Clear the current suggestions for an agent. 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. Return the agent registered under `agentId`, or `undefined`. 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.

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

Related