Analytics & BI
Natural language queries. Real-time dashboards.
Your users ask questions in plain English. The agent queries, visualizes, and streams results — all inside your Angular app.
The problem
Why this is hard today.
BI tools users won't adopt
Complex dashboards with steep learning curves. Business users want answers, not another tool to learn.
Static reports, stale data
Pre-built dashboards can't answer ad-hoc questions. By the time a report is built, the question has changed.
Chat-only AI interfaces
Text answers aren't enough for data. Users need charts, tables, and interactive visualizations — streamed in real time.
Architecture
How the three libraries compose.
Three libraries turn your LangGraph agent into a conversational BI surface your business users will actually use.
Agent
@threadplane/langgraphStreams query results token-by-token as the LangGraph agent reasons over your data. Thread persistence means users can refine questions without re-running expensive queries.
See Agent docs →json-render
@threadplane/renderThe agent emits chart specs, data tables, and KPI cards as structured render specs. Your Angular components render them with streaming JSON patches — live-updating visualizations as data arrives.
See json-render docs →Chat
@threadplane/chatGenerative UI surfaces render charts and tables inline with the conversation. Users ask follow-up questions and see updated visualizations without leaving the chat.
See Chat docs →What you ship
Capabilities the framework delivers.
No SQL required — the agent generates queries from natural-language input
Token-level updates as the agent reasons over your data — first results visible before completion
Charts, tables, and KPI cards rendered into the conversation as Angular components you already own
In practice
What it looks like in your codebase
dashboard.component.ts — the view catalog
import { ChatComponent, views } from '@threadplane/chat';
import { injectAgent } from '@threadplane/langgraph';
// Your components, keyed by the name the agent uses in its spec.
// Nothing here knows what question the user will ask.
const analyticsViews = views({
bar_chart: BarChartComponent,
data_table: DataTableComponent,
kpi_card: KpiCardComponent,
});
export class DashboardComponent {
protected readonly agent = injectAgent();
protected readonly analyticsViews = analyticsViews;
}dashboard.component.html
<!-- ChatComponent detects a JSON spec in the AI message and renders it
through the catalog. Partial specs render as they stream, so the first
chart appears before the query has finished. -->
<chat [agent]="agent" [views]="analyticsViews" />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
Turn your data into conversations
Download the field report or start a pilot. Ship a conversational BI experience in weeks, not quarters.