Profile: concise-package

Angular 18+ service (Signal + RxJS) + headless chat components. Same ChatReturn contract every AgentsKit framework binding ships.

Tags: ai · agents · llm · agentskit · angular · signals · rxjs · chat · streaming

• Package metadata and tests live under packages/angular/.
• Package guide: https://www.agentskit.io/docs/reference/packages/angular
• Stability map: docs/STABILITY.md

@agentskit/angular brings the shared AgentsKit chat contract to Angular with Signals, RxJS, streaming, tools, and memory.

• AgentsKit: compose it with the other packages in this repo to build agents from small, swappable parts.
• Registry: look for ready agents and templates that already use this layer at registry.agentskit.io.
• Playbook: learn the production patterns behind this layer at playbook.agentskit.io.

Docs: package guide · agent handoff

• One controller contract, framework-specific views — AgentskitChat exposes shared chat state/actions; component props remain Angular-specific.
• Angular-native reactivity — state exposed as Signal; events as RxJS Observable.
• Headless by default — components emit data-ak-* attributes; style with your design system.
• Streaming, tools, HITL — the shared state/action contract follows @agentskit/react; component props and exports are Angular-specific, not full parity.

npm install @agentskit/angular @agentskit/adapters

Peers: @angular/core ^18 || ^19 || ^20 || ^21, rxjs ^7.

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

@Component({
  standalone: true,
  imports: [ChatContainerComponent, MessageComponent],
  template: `
    <ak-chat-container>
      @for (m of chat.state()?.messages ?? []; track m.id) {
        <ak-message [message]="m" />
      }
    </ak-chat-container>
    <form (submit)="$event.preventDefault(); chat.send(chat.state()?.input ?? '')">
      <input [value]="chat.state()?.input ?? ''" (input)="chat.setInput($any($event.target).value)" />
    </form>
  `,
})
export class ChatWidget {
  protected readonly chat = inject(AgentskitChat)

  constructor() {
    this.chat.init({
      adapter: anthropic({ apiKey: process.env['NG_APP_ANTHROPIC_API_KEY']!, model: 'claude-sonnet-4-6' }),
    })
  }
}

Published as partial-Ivy AOT via ng-packagr (APF FESM2022 + .d.ts, ESM-only). Works in AOT production apps — no JIT-only caveat. The package intentionally does not ship dual CJS; Angular Package Format is ESM.

init(config) wires the controller and returns a ChatReturn snapshot; read live state from the state Signal (chat.state()) or the stream$ Observable. Async actions return the underlying controller Promises. Call destroy() (or rely on ngOnDestroy) to unsubscribe + stop; both are idempotent and safe to re-init.

• AgentskitChat service — DI-friendly. init(config) returns a ChatReturn snapshot and starts the session; state: Signal<ChatState | null> and stream$: Observable<ChatState | null> expose live state. Full action surface: send(text), setInput(v), stop, retry, clear, approve, deny(id, reason?), edit, regenerate, proposeToolCall, destroy.
• The default service instance is single-session. For independent chats, add AgentskitChat to each component's providers array to scope a controller per component subtree.
• Headless standalone components (data-ak-* only): ChatContainerComponent (<ak-chat-container>), MessageComponent, InputBarComponent, MarkdownComponent, CodeBlockComponent, ToolCallViewComponent, ThinkingIndicatorComponent, ToolConfirmationComponent.

MIT — see LICENSE.

Full documentation · GitHub

• Stability: beta — see docs/STABILITY.md
• Node.js 20+ and TypeScript strict mode
• Published as @agentskit/angular

See CONTRIBUTING.md and the monorepo LICENSE.