@threadplane/chat · chat compositions
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.
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.
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.
Developer Experience
Full-featured chat in a few lines
import { injectAgent, provideAgent } from '@threadplane/langgraph';
import { ChatComponent, a2uiBasicCatalog } from '@threadplane/chat';
@Component({
imports: [ChatComponent],
providers: [
provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'chat_agent' }),
],
template: `
<chat
[agent]="agent"
[views]="views"
/>
`,
})
export class MyChatPage {
protected readonly agent = injectAgent();
protected readonly views = a2uiBasicCatalog();
}chat {
--chat-bg: #f8f9fc;
--chat-user-bg: #15253E;
--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
17 pages
Streaming, persistence, tool calls, approvals, generative UI, testing
the six chapters
No vendor pitch — what we learned shipping it
free
Stop stalling on agentic Angular.
Install the framework, read the docs, and have a streaming chat in your app this afternoon.