CopilotKitAgentContext

Overview

CopilotKitAgentContext is a standalone Angular directive that shares a piece of context with the agent from your template. Apply it to any element. It adds a complete context when the element initializes, updates an existing registration when its inputs change, and removes it when the element is destroyed.

You can supply the context either as a single object via the directive selector input, or as separate description and value inputs. The context object takes precedence when both are provided.

This is the template-based alternative to connectAgentContext.

Import

The directive is standalone. Import the class into your component's imports array, then use the copilotkitAgentContext attribute selector in the template.

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

@Component({
  selector: "app-profile",
  standalone: true,
  imports: [CopilotKitAgentContext],
  template: `
    <div copilotkitAgentContext
         description="User profile"
         [value]="profileJson">
    </div>
  `,
})
export class ProfileComponent {
  profile = { name: "Ada", plan: "pro" };
  profileJson = JSON.stringify(this.profile);
}

Selector

[copilotkitAgentContext]

It is an attribute directive, so apply it to any element.

Inputs

Usage

Separate inputs

<div copilotkitAgentContext
     description="User preferences"
     [value]="userSettingsJson">
</div>

Context object

Pass a complete { description, value } object through the selector input.

<div [copilotkitAgentContext]="contextObject"></div>

Updating a registered context

The directive re-registers a context when inputs change after a complete context was registered during initialization. Supply both fields at initialization.

<div [copilotkitAgentContext]="formContext"></div>

If the initial object or separate value is missing, a later input change does not create the first registration. Render the directive only after the complete context is available, or use connectAgentContext for a reactive accessor.

Behavior

• Adds on init. The context is registered with the agent in ngOnInit.
• Updates an existing registration. When copilotkitAgentContext, description, or value changes after initialization registered a context, the directive removes the previous context and adds the new one.
• Does not add after an empty initialization. If initialization has no complete context, later input changes do not create the first registration.
• Removes on destroy. The context is removed when the host element is destroyed.
• Object input precedence. When the copilotkitAgentContext object input is set, it is used and the separate description and value inputs are ignored. Otherwise, the context is built from description and value, and is only registered when both are set.

Related