connectAgentContext

Angular function that adds reactive context for the agent and cleans it up automatically for @copilotkit/angular.

Overview

connectAgentContext registers a piece of context with the agent so the agent can read your application state. It accepts a static Context object or a Signal<Context>. When you pass a signal, the registered context updates reactively as the signal changes, and the previous context is removed and the new one added.

The registration is wrapped in an Angular effect, so the context is cleaned up automatically when the owning component or service is destroyed.

This is the function-based equivalent of React's useAgentContext(). For a template-driven alternative, use the CopilotKitAgentContext directive.

Call this from an Angular injection context (a constructor or a field initializer). If you cannot, pass an injector in the config. If neither is available, it throws.

Signature

import { connectAgentContext } from "@copilotkit/angular";
import type { Signal, Injector } from "@angular/core";
import type { Context } from "@ag-ui/client";

interface ConnectAgentContextConfig {
  injector?: Injector;
}

function connectAgentContext(
  context: Context | Signal<Context>,
  config?: ConnectAgentContextConfig,
): void;

Parameters

Prop

Type

Prop

Type

Usage

Static context

src/app/preferences.component.ts

import { Component } from "@angular/core";
import { connectAgentContext } from "@copilotkit/angular";

@Component({
  selector: "app-preferences",
  standalone: true,
  template: `<!-- ... -->`,
})
export class PreferencesComponent {
  constructor() {
    connectAgentContext({
      description: "User preferences",
      value: JSON.stringify({ theme: "dark", locale: "en-US" }),
    });
  }
}

Reactive context with a signal

Pass a Signal<Context> so the agent always sees the current value.

src/app/cart.component.ts

import { Component, computed, signal } from "@angular/core";
import { connectAgentContext } from "@copilotkit/angular";

@Component({
  selector: "app-cart",
  standalone: true,
  template: `<button (click)="add()">Add item</button>`,
})
export class CartComponent {
  readonly items = signal<string[]>([]);

  // Re-registers with the agent whenever the cart changes.
  readonly cartContext = connectAgentContext(
    computed(() => ({
      description: "Current shopping cart",
      value: JSON.stringify(this.items()),
    })),
  );

  add() {
    this.items.update((items) => [...items, "Item"]);
  }
}

Passing an explicit injector

When you call connectAgentContext outside an injection context, pass an injector.

src/app/late-context.service.ts

import { inject, Injectable, Injector } from "@angular/core";
import { connectAgentContext } from "@copilotkit/angular";

@Injectable({ providedIn: "root" })
export class LateContextService {
  private readonly injector = inject(Injector);

  register(value: string) {
    connectAgentContext(
      { description: "Late context", value },
      { injector: this.injector },
    );
  }
}

Behavior

Reactive updates. When given a Signal<Context>, the context is removed and re-added whenever the signal value changes, so the agent always sees the current value.
Automatic cleanup. Registration runs inside an Angular effect; the context is removed when the effect is torn down, which happens when the owning component, service, or injector is destroyed.
Injection context required. Throws if called outside an injection context without an injector in the config.

connectAgentContext

Overview

Signature

Parameters

Usage

Static context

Reactive context with a signal

Passing an explicit injector

Behavior

Related

CopilotKitAgentContext directive

injectAgentStore

CopilotKit service