14 Flutter widgets for rendering AI agent artifacts — charts, metrics, code, JSON, math, SVG and status cards.
Drop them into any Flutter app standalone, or wire them into a live AG-UI agent stream so your agent decides at runtime what to render and with what data.
Most Flutter apps that integrate AI today display agent responses as raw text in a chat bubble. But agents can reason about what to show — a revenue chart, a live metric grid, a syntax-highlighted code block, a LaTeX formula. The missing piece is a set of ready-made Flutter widgets the agent can target by name, passing structured data instead of prose.
That is what this package provides. Your agent says "render a BarChart with this data" — Flutter renders it natively, fully themed, with no extra code on your side.
| Group | Widget | AG-UI type key | What it shows |
|---|---|---|---|
| Charts | AgBarChart |
BarChart |
Grouped / stacked bar chart |
AgLineChart |
LineChart |
Multi-series line chart | |
AgPieChart |
PieChart |
Pie / donut chart with legend | |
AgAreaChart |
AreaChart |
Filled area chart | |
AgRadarChart |
RadarChart |
Spider / radar chart | |
| Data | AgMetricCard |
MetricCard |
Single KPI with delta and trend |
AgStatGrid |
StatGrid |
Responsive grid of KPI cards | |
AgKeyValue |
KeyValue |
Key–value table with highlight rows | |
| Code | AgCodeBlock |
CodeBlock |
Syntax-highlighted code with copy |
AgJsonViewer |
JsonViewer |
Collapsible JSON tree | |
| Status | AgStatusCard |
StatusCard |
Success / warning / error / info card |
AgTimeline |
Timeline |
Step timeline with status icons | |
| Math | AgLatex |
Latex |
LaTeX math via flutter_math_fork |
| SVG | AgSvg |
Svg |
Inline SVG diagram |
Every widget accepts a plain Map<String, dynamic> props — no custom data classes required.
# pubspec.yaml
dependencies:
agentivity_artifacts: ^0.1.0import 'package:agentivity_artifacts/agentivity_artifacts.dart';
// A KPI grid — four metrics in one row
AgStatGrid(props: {
'columns': 4,
'metrics': [
{'title': 'Revenue', 'value': '\$12.4 k', 'delta': '+8 %', 'trend': 'up'},
{'title': 'Orders', 'value': '348', 'delta': '+12 %', 'trend': 'up'},
{'title': 'Refunds', 'value': '4', 'delta': '−2', 'trend': 'down'},
{'title': 'Margin', 'value': '34 %', 'delta': 'flat', 'trend': 'flat'},
],
})
// A syntax-highlighted code block
AgCodeBlock(props: {
'title': 'main.dart',
'language': 'dart',
'code': 'void main() => runApp(const MyApp());',
})
// A LaTeX formula
AgLatex(props: {
'title': 'Euler's identity',
'tex': r'e^{i\pi} + 1 = 0',
'display': true,
})Register the full widget catalogue in one call and let your agent decide what to render:
import 'package:agentivity_ag_ui/agentivity_ag_ui.dart';
import 'package:agentivity_artifacts/agentivity_artifacts.dart';
AgUiGenerativeView(
controller: AgUiGenerativeController(
events: channel.events,
widgetRegistry: AgArtifactsBundle.registry(
// Add your own custom widgets alongside the built-ins
extra: {'MyCard': (context, props) => MyCard(props: props)},
),
),
registry: AgArtifactsBundle.registry(),
)Your agent then emits a CUSTOM ag-ui:render event:
{
"type": "CUSTOM",
"name": "ag-ui:render",
"value": {
"type": "BarChart",
"props": {
"title": "Weekly sales",
"labels": ["Mon","Tue","Wed","Thu","Fri"],
"datasets": [{"label": "Units", "data": [12, 18, 9, 24, 15]}]
}
}
}Flutter receives it and renders AgBarChart — no redeploy, no hardcoded routes.
All widgets inherit from ThemeData automatically. Go further with the built-in AgArtifactsTheme extension:
MaterialApp(
theme: ThemeData(
extensions: [
AgArtifactsThemeData(
chartPalette: ['#6366f1', '#10b981', '#f59e0b', '#ef4444'],
cardRadius: 10,
codeFontFamily: 'JetBrains Mono',
),
],
),
)Switch theme with a single string — great for showcases and demos:
MaterialApp(
theme: AgArtifactsThemes.themeDataFor('Noir'), // or any name below
)| Name | Mood | Brightness |
|---|---|---|
Agentivity |
Indigo / default | ☀️ Light |
Noir |
Near-black, crisp whites | 🌑 Dark |
Ember |
Amber + charcoal | 🌑 Dark |
Candy |
Pink + sky | ☀️ Light |
Glacier |
Ice blue + slate | ☀️ Light |
Paper |
Off-white, serif feel | ☀️ Light |
Brutalist |
Stark black + yellow | ☀️ Light |
Aurora |
Teal + violet | 🌑 Dark |
Neon |
Electric green + black | 🌑 Dark |
Sakura |
Blush pink | ☀️ Light |
Ocean |
Deep blue | 🌑 Dark |
The example/ folder contains a full-featured showcase with 7 animated demos. Each demo streams its sections in one by one, simulating a live agent response:
| Demo | Theme suggestion | What it shows |
|---|---|---|
| Financial Intelligence | Noir | KPIs, candlestick-style line chart, bar + pie, radar portfolio risk, key-value |
| Ops Dashboard | Ember | Metrics, status cards, timeline, bar chart, JSON payload |
| E-commerce Burst | Candy | GMV KPIs, revenue area chart, bar chart, fulfilment timeline |
| AI Code Review | Glacier | Diff code blocks, test stats, PR timeline, key-value |
| Scientific Report | Paper | LaTeX formulas, trigonometric line chart, Python code, Black-Scholes params |
| Architecture | Brutalist | SVG diagram, TypeScript + YAML code, key-value, milestone timeline |
| Agent Activity Log | Aurora | Run metrics, status cards, execution timeline, JSON tool call, generated code |
cd example && flutter run -d chrome| Prop | Type | Description |
|---|---|---|
title |
String? |
Card header |
labels |
List<String> |
X-axis / category labels |
datasets |
List<Map> |
Each map: label, data: List<num>, optional color |
height |
num? |
Override chart area height (px) |
| Prop | Type | Description |
|---|---|---|
metrics |
List<Map> |
Each map: title, value, delta?, trend? (up/down/flat), subtitle? |
columns |
int? |
Force column count (responsive fallback applies on narrow screens) |
| Prop | Type | Description |
|---|---|---|
code |
String |
Source code to display |
language |
String? |
Highlight language (dart, python, typescript, yaml, …) |
title |
String? |
Card header |
maxLines |
int? |
Scrollable viewport height (lines) |
| Prop | Type | Description |
|---|---|---|
events |
List<Map> |
Each map: label, time?, status (success/running/pending/warning/error), note? |
title |
String? |
Card header |
| Prop | Type | Description |
|---|---|---|
tex |
String |
LaTeX source (raw string recommended) |
display |
bool? |
true = display (block) mode, false = inline |
title |
String? |
Card header |
| Prop | Type | Description |
|---|---|---|
title |
String |
Card title |
status |
String |
success / warning / error / info |
message |
String? |
Body text |
details |
List<String>? |
Bullet points below the message |
labs.agentivity.io is our open research and engineering lab — where we explore what it means to build production-grade interfaces for AI agents.
Our mission is to make agentic AI accessible to everyone — from individuals exploring what agents can do, to teams running complex workflows, to large organisations embedding agents into their core operations. Not just accessible to engineers: accessible to anyone who wants to work alongside AI agents, understand what they are doing, and stay in control.
We believe the bottleneck is not model capability — it is the lack of a mature ecosystem around it. Agentivity's core product is a visual platform for designing, composing, and operating agentic systems: teams of agents that are modifiable, reusable, and deployable at any scale. The open-source work published here is part of that ecosystem — the building blocks we open up so the broader community can build on the same foundation.
What we publish:
- Open-source libraries — Flutter SDKs, protocol implementations, and UI toolkits for agentic applications.
agentivity_ag_uihandles the AG-UI protocol; this package handles the artifact widgets. - Live demos — fully working, themed examples you can browse directly in your browser, built on the same packages you install from pub.dev.
- Technical articles — walkthroughs, architecture decisions, and patterns we encounter building real agentic products.
Issues and PRs are welcome. For major changes, open an issue first to align on direction.
Built and maintained by Agentivity — the platform for AI agent orchestration and monitoring.
MIT © Agentivity