connectAgentContext
Angular function that adds reactive context for the agent and cleans it up automatically for @copilotkit/angular.
Overview
connectAgentContext registers context with the agent so it can read your application state. It accepts a static Context object or a zero-argument accessor. The internal Angular effect tracks any signals read by the accessor and updates the context when they change.
The registration is wrapped in an Angular effect, so the context is cleaned up automatically when the owning component or service is destroyed.
For a template-driven alternative, use the CopilotKitAgentContext directive.
Call this from an Angular injection context, such as a constructor or field initializer. The current implementation resolves the ambient injector before it reads the config, so passing config.injector does not make an outside-context call valid.
Signature
import { connectAgentContext } from "@copilotkit/angular";
import type { Injector } from "@angular/core";
import type { Context } from "@ag-ui/client";
interface ConnectAgentContextConfig {
injector?: Injector;
}
function connectAgentContext(
context: Context | (() => Context),
config?: ConnectAgentContextConfig,
): void;Parameters
Prop
Type
Prop
Type
Usage
Static context
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 an accessor
Pass an accessor that reads signals so the agent always sees the current value.
import { Component, 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[]>([]);
constructor() {
// Re-registers with the agent whenever the cart changes.
connectAgentContext(() => ({
description: "Current shopping cart",
value: JSON.stringify(this.items()),
}));
}
add() {
this.items.update((items) => [...items, "Item"]);
}
}Behavior
- Reactive updates. When an accessor reads signals, the context is removed and re-added whenever one of those signals changes.
- 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. Angular throws
NG0203when you call the function outside an injection context.