Understanding the AI-Generated UI — Metrics, Tables, Charts & Dropdowns

Unsheet's AI generates apps using four component types, each optimised for a specific kind of data:

📊 Metric Cards

Large, prominent numbers that display key totals or KPIs. The AI identifies cells with =SUM() or similar aggregation formulas and creates metrics for them. Each metric card references a specific cell (e.g., D15) and updates in real-time as the underlying data changes.

📋 Interactive Tables

Your core data in a clean, scannable table. Number and currency columns are editable — change a value and watch formulas cascade. String columns are read-only, and enum-like columns get styled badges. Tables display up to 50 rows.

📈 Charts

Bar or line charts that visualise numeric columns. The AI picks the best column for labels (x-axis) and one or more numeric columns for values (y-axis). Charts support multiple series and update live when data changes. Up to 20 data points are displayed.

🔽 Dropdowns

Filter controls for categorical columns. When you select a value, it writes to a specific cell in the spreadsheet engine, potentially triggering formula recalculation. Perfect for scenario modelling and "what-if" analysis.

When you upload a file, Gemini receives:

• Column names and data types — "Item" (string), "Quantity" (int64), "Price" (float64), "Total" (float64)
• The first 5 rows of sample data
• Total row count

From this context, the AI determines:

• Which columns should be table columns (and their display type: string, number, currency, enum)
• Where summary/total rows exist (for metric cards)
• Which numeric columns make sense as chart data
• Whether any columns have few distinct values (for dropdowns)

The result is a UISchema — a JSON structure that tells the frontend exactly what to render and how.

The AI also generates a CSS gradient that matches the "vibe" of your data. A financial spreadsheet might get a deep blue gradient, while a marketing tracker might get a vibrant purple-to-pink scheme.

This gradient is applied to the top section of your app, giving each Unsheet a unique visual identity.