What Changed
AI chat just evolved beyond text.
ONE Platform’s premium chat now generates fully interactive React components on the fly. Ask for sales data? Get a live chart. Need a comparison? Get an interactive table. Want to explore trends? Get a dashboard—all rendered directly in chat.
This isn’t text with screenshots. This is executable UI generated by AI.
Before and After
Before:
- User: “Show me sales trends”
- AI: “Here’s a description of your sales: Revenue increased from $10k in January to $25k in June…”
- User: tries to visualize text in their head
After:
- User: “Show me sales trends”
- AI: generates and renders interactive line chart with hover tooltips
- User: explores data visually, immediately
Time to insight: 30 seconds → 3 seconds. Cognitive load: High → Zero.
Why This Matters
The Interface Revolution
Traditional AI: Text in, text out.
Generative UI: Intent in, application out.
You’re not just chatting with AI. You’re commanding it to build interfaces tailored to your exact need, in real-time, with zero code.
From Chat to Canvas
Every conversation becomes a dynamic workspace:
User: "Compare Q3 vs Q4 revenue by product category"
AI generates:
✓ Bar chart with Q3/Q4 comparison
✓ Interactive legend (click to toggle)
✓ Hover tooltips with exact values
✓ Responsive layout (works on mobile)
✓ Dark mode support (automatic)
Time elapsed: 2 seconds
No dashboard builder. No drag-and-drop. No configuration screens.
Just natural language → production UI.
Real-World Use Cases
Sales Analytics:
- “Show revenue by region” → Interactive pie chart
- “Compare this month to last month” → Multi-series line chart
- “Display top 10 products” → Sorted bar chart with labels
Data Exploration:
- “Break down user signups by source” → Doughnut chart with percentages
- “Show conversion funnel” → Area chart with trend line
- “Compare pricing tiers” → Table with sortable columns
Business Intelligence:
- “Visualize monthly growth” → Line chart with annotations
- “Show product mix” → Stacked bar chart
- “Analyze retention cohorts” → Heat map table
The pattern: Natural language question → Purpose-built visualization. Every time.
How It Works
The Architecture
Three-stage pipeline:
- AI Generation - Model writes structured JSON defining the component
- Stream Detection - Client extracts UI payloads from response
- React Rendering - Components materialize in real-time
Critically: This runs client-side on Cloudflare Workers. No server-side rendering. No backend complexity. Pure edge computing.
The Generation Pattern
AI writes this:
Based on your data, here's the revenue trend:
```ui-chart
{
"chartType": "line",
"title": "Q3 Revenue Trends",
"labels": ["July", "August", "September"],
"datasets": [
{
"label": "Revenue",
"data": [45000, 52000, 61000],
"color": "#3b82f6"
}
]
}
```
As you can see, revenue grew 36% over the quarter.
Client detects:
- Markdown code block with
ui-chartlanguage - JSON payload inside the block
- Valid chart structure
React renders:
<Card>
<CardHeader>
<CardTitle>Q3 Revenue Trends</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="Revenue"
stroke="#3b82f6"
strokeWidth={2}
/>
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
Result: Professional data visualization in the chat window. Indistinguishable from a hand-built dashboard.
Supported Component Types
Charts (Recharts):
- Line charts (trends, time series)
- Bar charts (comparisons, rankings)
- Pie charts (distribution, composition)
- Doughnut charts (proportions with center metric)
- Area charts (cumulative trends)
Data Display:
- Tables (sortable, filterable)
- Cards (KPI metrics, summaries)
- Lists (ordered, unordered, nested)
Interactive Elements:
- Buttons (actions, triggers)
- Forms (input collection)
- Timelines (event sequences)
All components:
- ✓ Fully responsive (mobile-first)
- ✓ Dark mode compatible
- ✓ Accessible (ARIA labels, keyboard nav)
- ✓ Themeable (shadcn/ui design system)
- ✓ Interactive (tooltips, legends, hover states)
Technical Deep Dive
Client-Side Detection (Cloudflare Workers Compatible):
// Stream parsing
const parseStreamChunk = (line: string) => {
// Extract code blocks
const chartMatch = line.match(/```ui-chart\s*\n([\s\S]*?)\n```/);
if (chartMatch) {
const payload = JSON.parse(chartMatch[1]);
// Generate unique ID for React key
const componentId = crypto.randomUUID();
// Create UI component
return {
type: 'ui',
component: 'chart',
data: payload,
id: componentId
};
}
// Return text content
return { type: 'text', content: line };
};
Component Rendering:
// Automatic routing based on type
{messages.map(msg => {
if (msg.type === 'ui') {
return (
<GenerativeUIRenderer
key={msg.id}
payload={msg.data}
/>
);
}
return <MessageText key={msg.id} content={msg.content} />;
})}
Why This Architecture Works:
- No Backend Lock-In - Works with any LLM (OpenAI, Anthropic, Groq, local models)
- Edge-Native - Runs on Cloudflare Workers (no Node.js required)
- Progressive Enhancement - Falls back to text if components fail
- Type-Safe - Full TypeScript validation for payloads
- Extensible - Add new component types without backend changes
What You Can Build
1. Analytics Dashboard in Chat
Scenario: CEO needs quarterly review.
Chat conversation:
User: "Show me Q3 highlights"
AI: "Here are your key metrics for Q3 2024:"
[GENERATES: 3 metric cards showing Revenue, Users, NPS]
User: "Break down revenue by product line"
AI: [GENERATES: Stacked bar chart with 4 product lines]
User: "Which products are growing fastest?"
AI: "Mobile apps show 143% growth."
[GENERATES: Line chart comparing growth rates]
Result: Executive dashboard built through conversation. No BI tool. No SQL queries. Just questions and answers.
2. Sales Pipeline Visualization
User: “Show me our sales pipeline status”
AI generates:
- Funnel chart (leads → closed deals)
- Table (top 10 opportunities by value)
- Line chart (win rate trend over 6 months)
- Button (“Export to CSV”)
Time to build manually: 2-3 hours Time with Generative UI: 15 seconds
3. Customer Analytics Explorer
User: “I need to understand our customer segments”
AI generates sequence:
- Pie chart (customer distribution by tier)
- Table (segment characteristics)
- Bar chart (revenue per segment)
- Timeline (segment growth over time)
Each component: Interactive, filterable, exportable.
4. Product Performance Report
User: “Compare our top 5 products this month”
AI generates:
- Bar chart (revenue comparison)
- Line chart (daily sales trends)
- Table (detailed metrics: sales, returns, ratings)
- Cards (winner/loser highlights)
The power: Ask follow-up questions, get instant visualizations. No dashboards to configure. No reports to set up.
The Technical Advantage
Why Our Implementation Works
Most “Generative UI” demos fail in production because:
- Server-side rendering breaks on serverless platforms
- React hydration fails with streaming responses
- Component state doesn’t survive re-renders
- Dark mode breaks chart colors
- Mobile layouts don’t adapt
ONE Platform solves these:
✅ Client-side fallback - Detects and renders charts even when server streaming fails
✅ Unique component IDs - crypto.randomUUID() ensures React keys never collide
✅ Cloudflare Workers compatible - No Node.js APIs, pure edge execution
✅ Theme integration - Charts read CSS variables (hsl(var(--muted-foreground)))
✅ Responsive by default - ResponsiveContainer adapts to any screen
Performance Characteristics
Bundle size: +127KB for Recharts (lazy loaded) Render time: <16ms (60fps) Memory usage: ~2MB per chart instance Streaming latency: Zero (components render immediately on detection)
Trade-off: Slightly larger initial bundle. Benefit: Unlimited visualizations without backend round-trips.
Extensibility
Adding new component types takes 3 steps:
- Define payload schema:
interface TablePayload {
columns: string[];
rows: string[][];
sortable?: boolean;
}
- Create React component:
export function DynamicTable({ data }: { data: TablePayload }) {
return <Table>...</Table>;
}
- Register in renderer:
case 'table':
return <DynamicTable data={payload.data} />;
That’s it. AI can now generate tables with \“ui-table`.
What’s Next
Coming This Month
Real-Time Data Binding:
User: "Show revenue (live)"
AI: [Generates chart that updates every 5 seconds]
Interactive Filters:
User: "Show sales by region"
AI: [Generates chart with region dropdown]
User: [Selects "EMEA" from dropdown]
Chart: [Updates without re-asking AI]
Export Actions:
AI: [Generates chart with "Export PNG" button]
User: [Clicks button]
Browser: [Downloads high-res chart image]
Composite Dashboards:
User: "Build me a weekly review dashboard"
AI: [Generates 6-component layout with KPIs, trends, tables]
AI: "I've created a dashboard. Want me to save it?"
User: "Yes"
AI: [Persists layout, generates shareable URL]
Coming This Quarter
Custom Visualizations:
- Network graphs (relationships, hierarchies)
- Heat maps (correlations, distributions)
- Gantt charts (timelines, schedules)
- Geographic maps (regional data)
AI-Suggested Views:
- “I notice a correlation between X and Y. Want to see it charted?”
- “This data might look better as a pie chart. Should I regenerate?”
- “You asked about trends 3 times. Should I create a dashboard?”
Collaboration Features:
- “Share this chart” → Generates public link
- “Add to report” → Saves to document builder
- “Schedule email” → Sends chart daily/weekly
The Bigger Picture
Why This Is Revolutionary
Traditional BI workflow:
- Extract data from database (SQL)
- Load into BI tool (Tableau, PowerBI)
- Design dashboard (drag-and-drop)
- Configure filters and parameters
- Publish and share
- Time: Hours to days
Generative UI workflow:
- Ask question in natural language
- Time: Seconds
ROI calculation:
- Average dashboard build time: 3 hours
- Generative UI time: 15 seconds
- Speed increase: 720x
- Cost reduction: 99.7%
The Convergence
We’re witnessing the convergence of:
- Natural language understanding (LLMs)
- Reactive UI frameworks (React)
- Edge computing (Cloudflare Workers)
- Component-based design (shadcn/ui)
- Real-time data (Convex)
Result: Interfaces that generate themselves based on user intent.
This is the future of software:
- No UI builders
- No dashboard designers
- No configuration screens
Just conversation → application.
Who This Is For
Analysts: Skip the dashboard builder. Ask questions, get visualizations.
Founders: Build investor decks through conversation. No design tools.
Teams: Collaborate in chat. Charts auto-generate as you discuss.
Developers: Prototype dashboards in seconds. Iterate with natural language.
Anyone: If you can ask a question, you can build a dashboard.
Try It Now
Get Started (2 Minutes)
# Install ONE Platform
npx oneie@latest init
# Start premium chat
cd web && bun run dev
# Navigate to premium chat
open http://localhost:4321/chat/premium
Example Prompts
Try these in premium chat:
"Show me a line chart of monthly revenue"
"Compare product sales in a bar chart"
"Create a pie chart of user segments"
"Display top customers in a table"
"Build a timeline of recent events"
Watch: Charts materialize as AI responds. Interact with them. Explore data visually.
Example Datasets
Sales data:
"Show me sales trends for these months:
Jan: $45k
Feb: $52k
Mar: $61k
Apr: $58k
May: $67k
Jun: $73k"
Product comparison:
"Compare these products:
- Widget A: 1250 sales, 4.5 rating
- Widget B: 890 sales, 4.8 rating
- Widget C: 2100 sales, 4.2 rating"
User growth:
"Visualize user growth:
Week 1: 245 signups
Week 2: 312 signups
Week 3: 289 signups
Week 4: 401 signups"
The Bottom Line
Generative UI isn’t about replacing dashboards.
It’s about making dashboards obsolete.
Why build interfaces when AI can generate them exactly when needed, exactly as needed?
Traditional software: Pre-built UIs for predicted use cases.
Generative UI: On-demand interfaces for actual needs.
ONE Platform just made building software conversational.
Live now in Premium Chat:
- npm: https://www.npmjs.com/package/oneie
- Web: https://web.one.ie
- GitHub: https://github.com/one-ie/one
Report issues: https://github.com/one-ie/one/issues
Built with:
- React 19 (UI framework)
- Recharts (data visualization)
- Cloudflare Workers (edge computing)
- Astro 5 (web framework)
- shadcn/ui (component library)
Stop building dashboards. Start generating them.
🎨 ONE Platform - Where AI Builds Interfaces