@agentskit/angular — for agents

#Purpose

Angular binding for the ChatReturn contract from @agentskit/core. Exposes chat state as a WritableSignal<ChatState> for template binding and as an Observable<ChatState> for RxJS pipelines, with automatic teardown via ngOnDestroy.

#Install

npm install @agentskit/angular
# peers:
npm install @angular/core rxjs

#Primary exports

• AgentskitChat — @Injectable({ providedIn: 'root' }) service with:
  • init(config): ChatReturn — bootstrap the controller.
  • state: WritableSignal<ChatState> — template-friendly (Angular 17+ signals).
  • stream$: Observable<ChatState> — RxJS interop.
  • Actions: send, stop, retry, setInput, clear, approve, deny.
  • ngOnDestroy auto-unsubscribes.

#Minimal example

import { Component, inject } from '@angular/core'
import { AgentskitChat } from '@agentskit/angular'
import { anthropic } from '@agentskit/adapters'

const adapter = anthropic({ apiKey: import.meta.env['NG_APP_ANTHROPIC_KEY'], model: 'claude-sonnet-4-6' })

@Component({
  selector: 'ak-chat',
  standalone: true,
  template: `
    <div *ngFor="let m of chat.state()?.messages ?? []">{{ m.content }}</div>
    <input [value]="chat.state()?.input ?? ''" (input)="chat.setInput($any($event.target).value)">
    <button (click)="chat.send(chat.state()?.input ?? '')">Send</button>
  `,
})
export class ChatComponent {
  chat = inject(AgentskitChat)
  constructor() {
    // init() must be called in the constructor, before ngOnInit,
    // so the signal is populated before the first change-detection pass.
    this.chat.init({ adapter })
  }
}

#Common patterns

• Signal-based (Angular 17+ required): state is a WritableSignal — use chat.state() in templates. Angular 16 and below are not supported; the signals API is not available in those versions.
• Call init() in the constructor: Angular initialises signals during construction. Calling init() in ngOnInit causes a one-tick delay that can produce ExpressionChangedAfterItHasBeenCheckedError in dev mode.
• Standalone components recommended: AgentskitChat is provided in root and works with both module-based and standalone architectures, but standalone avoids the need to add the service to a module's providers array manually.
• RxJS interop: use stream$ when you need to pipe chat state through RxJS operators (e.g. debounceTime, distinctUntilKeyChanged) — ngOnDestroy handles unsubscription automatically so no takeUntilDestroyed boilerplate is needed.

#Related

• @agentskit/core — ChatReturn contract.
• @agentskit/adapters — provider adapters.
• @agentskit/react, @agentskit/ink, @agentskit/vue, @agentskit/svelte, @agentskit/solid, @agentskit/react-native — sibling bindings.

#Source

• npm: https://www.npmjs.com/package/@agentskit/angular
• repo: https://github.com/AgentsKit-io/agentskit/tree/main/packages/angular