@agentskit/angular

@agentskit/angular

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

How this fits the ecosystem

@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.
• AKOS: run the same concepts with enterprise deployment, governance, and observability at akos.agentskit.io.

Docs: package guide · agent handoff

Why

• One contract, every framework — AgentskitChat service surfaces the exact same shape as the React / Vue / Svelte / Solid / RN / Ink bindings.
• 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 — all core features work identically to @agentskit/react.

Install

npm install @agentskit/angular @agentskit/adapters

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

Quick example

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' }),
    })
  }
}

The headless components compile in JIT (inline templates). Most Angular apps are JIT-capable in dev/test; for fully AOT-only prod builds, render via the AgentskitChat service + your own templates (an ng-packagr/AOT build of these components is tracked for a future release).

init(config) wires the controller and returns a ChatReturn snapshot; read live state from the state Signal (chat.state()) or the stream$ Observable.

API

• 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. Actions: send(text), setInput(v), stop, retry, clear, approve, deny, edit, regenerate, destroy.
• Headless standalone components at parity with @agentskit/react (data-ak-* only): ChatContainerComponent (<ak-chat-container>), MessageComponent, InputBarComponent, MarkdownComponent, CodeBlockComponent, ToolCallViewComponent, ThinkingIndicatorComponent, ToolConfirmationComponent.

Ecosystem

Package	Role
@agentskit/core	ChatReturn contract
@agentskit/adapters	LLM providers
@agentskit/tools	Built-in + integration tools
@agentskit/memory	Chat + vector backends
@agentskit/react · vue · svelte · solid · react-native · ink	Same contract, different host

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub