Production agent chat UI in days, not sprints
The batteries-included Angular chat library. Built on the agent framework, Vercel's json-render spec, and Google's A2UI spec. Every feature included — debug, theming, generative UI, streaming — from day one.
Every team rebuilds the same chat UI. It takes 4-6 weeks and delays the real agent work.
- ✗ Message rendering from scratch
- ✗ Streaming indicators from scratch
- ✗ Input handling from scratch
- ✗ Accessibility added as afterthought
- ✗ Generative UI bolted on later
- ✗ Debug tooling usually skipped
Fully featured from day one. No feature backlog.
- ✓ Pre-built accessible components
- ✓ Vercel json-render spec via @ngaf/render
- ✓ Google A2UI spec — 18 built-in components, v0.9 CheckRule validation
- ✓ Consumer-extensible action handlers for both specs
- ✓ Debug tooling + CSS custom property theming included
- ✓ Every feature ships together — not incrementally
Features
Every chat capability, production-ready
Messages
Streaming message display with token-by-token rendering. Markdown support, auto-scroll, and accessible message list.
Input
Chat input with send and interrupt controls. Keyboard shortcuts, disabled state during streaming, accessible labels.
Generative UI
Inline spec rendering in conversation. Vercel json-render specs and Google A2UI surfaces render as native Angular components — 18 built-in A2UI components, v0.9 CheckRule validation, and consumer-extensible action handlers.
Theming
CSS custom property theming that integrates with your design system. Swap colors, fonts, spacing without touching component code.
Debug
Agent state inspector for development. View messages, tool calls, interrupts, and streaming state in real time.
Developer Experience
Full-featured chat in a few lines
import { agent } from '@ngaf/langgraph';
import { ChatComponent } from '@ngaf/chat';
@Component({
template: `
<chat
[agent]="agent"
[registry]="registry"
/>
`,
})
export class MyChatPage {
protected readonly agent = agent({ apiUrl: 'http://localhost:2024', assistantId: 'chat_agent' });
registry = inject(RenderRegistry);
}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;
}Head to Head
Incrementally building chat vs @ngaf/chat
Chat Guide
The Enterprise Guide to Agent Chat Interfaces in Angular
Five chapters covering the sprint tax, batteries-included components, theming and design system integration, generative UI with Vercel json-render, Google A2UI support, and debug tooling.
Part of the Cacheplane Angular Agent Framework.
↓ Download PDFOptional — Get notified of updates
The Cacheplane Stack
This library is part of a cohesive three-layer architecture.
Ready when you are
Ready to ship your agent chat?
Production chat UI in days, not sprints. Start with a conversation.
App deployment license · $20,000 · 3-month co-pilot engagement