@ngaf/chat

Drop-in chat for Angular agents.

chat-timeline + chat-debug + GenUI surfaces. Production-shaped from day one, themable to your design system, or use the headless primitives if you want full control.

Get startedSee it live →
MITVercel json-renderGoogle A2UI

Compositions

Opinionated shells, swappable parts.

chat-timeline is a drop-in conversation surface that handles streaming, tool calls, interrupts, branching, and time-travel. chat-debug ships devtools alongside — tool-call inspector, message replay, thread history.

  • chat-timeline — drop-in production surface
  • chat-debug — devtools alongside, ship-ready
  • Sidenav + history search palette
  • Themable via CSS vars or component overrides
chat-timeline
The conversation surface.
chat-debug
Tool-call devtools.
sidenav
Thread navigation.
See @ngaf/chat docs →
cockpit.threadplane.ai/chat-debug
streaming3 tools1 interrupt
tool · query_inventory · 240ms
{ items: 47, low_stock: 3, total_value: 12400 }
replay · 0:24 · paused on interrupt

Headless

Or skip the shell — use the primitives.

If you have a design system, use the headless primitives directly. They're the same building blocks the compositions are made of — bring your own DOM, keep our state machine.

  • Primitives stay unstyled
  • Bring your own design tokens
  • Compose with the streaming agent contract
  • No two-way coupling to the chat shell
message primitives
Streaming-aware atoms.
tool primitives
Tool-call lifecycle.
interrupt primitive
Approval gate.
Headless API →

Developer Experience

Full-featured chat in a few lines

Prebuilt Chat
import { agent } from '@ngaf/langgraph';
import { ChatComponent, a2uiBasicCatalog } from '@ngaf/chat';

@Component({
  template: `
    <chat
      [agent]="agent"
      [views]="views"
    />
  `,
})
export class MyChatPage {
  protected readonly agent = agent({ apiUrl: 'http://localhost:2024', assistantId: 'chat_agent' });
  protected readonly views = a2uiBasicCatalog();
}
Custom Theming
chat {
  --chat-bg: #f8f9fc;
  --chat-user-bg: #004090;
  --chat-user-color: #ffffff;
  --chat-assistant-bg: #f0f4ff;
  --chat-font-family: 'Inter', sans-serif;
  --chat-border-radius: 12px;
  --chat-input-border: 1px solid #e4e4e7;
}

Field report

The last-mile gap in Angular AI.

  • Six production-readiness dimensions for Angular AI
  • Concrete patterns — error boundaries, fallbacks, observability, deploy
  • No vendor pitch. Just what we learned shipping it.

Already on the list? Download the PDF directly.

angular-agent-readiness-guide.pdf
Field report · 18 pages
From Prototype to Production
Six production-readiness dimensions for Angular AI teams.
Agent UI for Angular

Stop stalling on agentic Angular.

Install the framework, read the docs, and have a streaming chat in your app this afternoon.

Try the demo →See each feature in action →

MIT · No signup required · App telemetry off by default