---
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`](/reference/angular/functions/provideCopilotKit#parameters) you registered with [`provideCopilotKit`](/reference/angular/functions/provideCopilotKit), exposes reactive runtime state as Angular [signals](https://angular.dev/guide/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`](/reference/angular/functions/registerFrontendTool), [`registerRenderToolCall`](/reference/angular/functions/registerRenderToolCall), and [`registerHumanInTheLoop`](/reference/angular/functions/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.

```ts title="src/app/status.component.ts"
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

```ts title="src/app/agents-panel.component.ts"
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

```ts title="src/app/runtime-switcher.component.ts"
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

```ts title="src/app/suggestions.component.ts"
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

<Cards>
  <Card
    title="provideCopilotKit"
    description="Register the configuration that this service reads to build its core."
    href="/reference/angular/functions/provideCopilotKit"
  />
  <Card
    title="registerFrontendTool"
    description="Register a client-side tool from a component, with automatic cleanup on destroy."
    href="/reference/angular/functions/registerFrontendTool"
  />
  <Card
    title="injectAgentStore"
    description="Subscribe to a single agent's reactive state (messages, running status, and more)."
    href="/reference/angular/functions/injectAgentStore"
  />
</Cards>