Widgets

​

Overview

Widgets are the building blocks of dashboards. Each dashboard rendered in chat or agent sessions is composed of individual widgets — KPI cards, charts, tables, progress bars, and layout containers. The Widgets page in Agent Brain lets you browse all available components and see live previews with mock data. Dashboard widgets use a single CREAO design system so dashboards stay visually consistent across chat, agent sessions, and saved run views.

​

Widget categories

​

Layout

Layout widgets control how other widgets are arranged:

​

Data Display

Data widgets show values, text, and structured information:

​

Charts

Chart widgets visualize time-series and categorical data:

​

Design system

Dashboard widgets use CREAO’s product design system: warm canvas surfaces, cream cards, near-black ink, hairline rules, sharp corners, and restrained semantic color. Oxblood marks important negative or signature states, while green is reserved for running or positive status signals. The design is fixed by the product so previously generated dashboards and new dashboards render with the same visual language. Dashboard data and layout remain defined by the widget tree.

​

How dashboards use widgets

When the agent generates a dashboard (in chat or during an agent run), it assembles widgets into a tree structure:

1. A layout widget (Stack or Grid) at the root organizes the sections
2. Card widgets wrap each metric or data group
3. Data widgets (Heading, Badge, Text) display values inside cards
4. Chart widgets render visualizations at full width
5. Table and Alert widgets add structured data and callouts

The agent decides which widgets to use based on the data it gathered. The dashboard template (captured when you create an agent) preserves the layout structure so future runs produce consistent output.