Generative UI

Superatom pioneered Generative UI. We were first to market with the ability to automatically generate interactive UI components from raw data sources.

The Problem

Business users need to see data in visual formats, but:

Building custom dashboards is expensive (10K+ per dashboard)
Each new question requires development work
Pre-built dashboards become stale as business needs change
Users are limited to what’s already been built

Traditional approach: Teams of BI developers building static dashboards. Superatom approach: AI generates the perfect visualization instantly for any query.

How Generative UI Works

Stage 1: Understanding Intent

The AI parses the natural language question to extract:

Element	Example	Purpose
Metric	”revenue”	What to measure
Dimension	”products”	How to group
Filter	”this quarter”	What to include
Sort	”top”	How to order
Limit	”10”	How many

Stage 2: Query Generation

SQL is generated and executed against your semantic model:

SELECT
    product_name,
    SUM(revenue) as total_revenue
FROM sales
WHERE sale_date >= DATE_TRUNC('quarter', CURRENT_DATE)
GROUP BY product_name
ORDER BY total_revenue DESC
LIMIT 10

Stage 3: Data Analysis

Before visualization, we analyze the result set:

Stage 4: Component Selection

Based on data characteristics, the optimal visualization is chosen:

Selection Logic
Component Library

Data Pattern	Selected Component	Reasoning
Single value	KPI Card	Clear metric display
Categorical + values	Bar Chart	Easy comparison
Time series	Line Chart	Shows trends
Part-to-whole	Pie/Donut Chart	Proportion visualization
Multi-dimensional	Radar Chart	Complex comparison
Geographic	Map Chart	Spatial context
Hierarchical	Treemap	Nested relationships
Detailed records	Data Table	Full information

Stage 5: Configuration

Each component is configured with:

Color schemes based on data semantics (red for negative, green for positive)
Axis labels derived from column names
Tooltips with relevant details
Legends for multi-series data
Interactivity (click, hover, drill-down)

Stage 6: Rendering

The final component is rendered as an interactive React component with:

Real-time responsiveness
Export capabilities (PNG, CSV)
Bookmark/save functionality
Drill-down options
Follow-up question suggestions

Visual Examples

From Question to Visualization

Customer Segmentation Analysis - automatically generated from query

This dashboard was generated from the question: “Analyze customer behavior and lifetime value across segments” The system automatically:

Selected a donut chart for customer distribution (categorical proportions)
Selected a bar chart for lifetime value comparison (categorical + values)
Created KPI cards for key segment metrics (single values)
Arranged components in a logical layout

The Intelligence Behind Selection

Decision Tree Example

Contextual Adaptation

The same data can be visualized differently based on context:

Question	Data	Visualization	Why
”What were sales last month?“	1.2M	KPI Card	Single metric emphasis
”How do regions compare?“	5 regions with values	Bar Chart	Comparison focus
”What’s the sales breakdown?“	5 regions with %	Pie Chart	Part-to-whole focus
”Show the trend”	12 months of data	Line Chart	Temporal pattern

Technical Implementation

Component Architecture

Technology Stack

Layer	Technology	Purpose
Framework	React 19	Modern reactive rendering
Charts	ECharts	High-performance visualization
Styling	Tailwind CSS	Consistent, responsive design
State	MobX	Reactive state management
Streaming	WebSocket	Real-time updates

Why This Matters

Business Impact

Zero Development Cost

No dashboard development needed. Every question gets a custom visualization instantly.

Unlimited Flexibility

Users aren’t limited to pre-built views. Any question, any visualization.

Always Current

No stale dashboards. Every visualization is generated fresh from live data.

Democratized Access

Business users don’t need to know SQL or BI tools. Just ask questions.

Competitive Advantage

Metric	Traditional BI	Superatom Generative UI
Time to new visualization	Days-weeks	Seconds
Cost per visualization	1,000-10,000	zero marginal
Required expertise	BI developer	None
Visualization variety	Limited to pre-built	Unlimited

Getting Started

Product

Architecture

Security & Data Privacy

Intellectual Property

Implementation

Use Cases

Case Studies

API Reference

Guides

The Problem

How Generative UI Works

Stage 1: Understanding Intent

Stage 2: Query Generation

Stage 3: Data Analysis

Stage 4: Component Selection

Stage 5: Configuration

Stage 6: Rendering

Visual Examples

From Question to Visualization

The Intelligence Behind Selection

Decision Tree Example

Contextual Adaptation

Technical Implementation

Component Architecture

Technology Stack

Why This Matters

Business Impact

Zero Development Cost

Unlimited Flexibility

Always Current

Democratized Access

Competitive Advantage

Next Steps

Tribal Knowledge

Platform: Chat Agent

​The Problem

​How Generative UI Works

​Stage 1: Understanding Intent

​Stage 2: Query Generation

​Stage 3: Data Analysis

​Stage 4: Component Selection

​Stage 5: Configuration

​Stage 6: Rendering

​Visual Examples

​From Question to Visualization

​The Intelligence Behind Selection

​Decision Tree Example

​Contextual Adaptation

​Technical Implementation

​Component Architecture

​Technology Stack

​Why This Matters

​Business Impact

Zero Development Cost

Unlimited Flexibility

Always Current

Democratized Access

​Competitive Advantage

​Next Steps

Tribal Knowledge

Platform: Chat Agent

The Problem

How Generative UI Works

Stage 1: Understanding Intent

Stage 2: Query Generation

Stage 3: Data Analysis

Stage 4: Component Selection

Stage 5: Configuration

Stage 6: Rendering

Visual Examples

From Question to Visualization

The Intelligence Behind Selection

Decision Tree Example

Contextual Adaptation

Technical Implementation

Component Architecture

Technology Stack

Why This Matters

Business Impact

Competitive Advantage

Next Steps