Dashboard kits

Two domains a model can build dashboards in. Browse the gallery, generate one from a sentence, or read the prompt the model gets.

Sales, marketing efficiency, profit, customers and cohorts, merchandising, and checkout for a direct-to-consumer brand. 31 data tools

Contribution profit hero against plan (or the prior period, or last year) with the Fall sale, what changed, supporting KPIs, the profit waterfall beside the monthly goal, the sales breakdown, the purchase funnel, top products, channel mix, and countries. Hand-written · no model needed Click a chart point to ask why

Store overview

Period

Sales channel

Compare with

What changed

Most important first

Contribution margin: where each dollar of net sales went, against the comparison

Monthly goal

October sales against the pace needed to reach the goal

Total sales breakdown

From gross sales to what the store collected

Session to purchase, store and app

Top products

By net sales, with change

Where sales come from

By channel, then by country; select a channel to filter the dashboard

0 tool calls · no renderer errors

Tool calls

openui-lang program

root = Dashboard([header, section])
header = DashboardHeader("Store overview", kpis.periodLabel)
$range = "30d"
$channel = "all"
$compare = "plan"
section = Section([heroRow, kpiRow, profitRow, flowRow, whereRow], filters)
filters = FilterBar([rangeFilter, channelFilter, compareFilter])
rangeFilter = FilterSelect("range", "Period", [{value: "7d", label: "Last 7 days"}, {value: "30d", label: "Last 30 days"}, {value: "90d", label: "Last 90 days"}, {value: "mtd", label: "Month to date"}], $range)
channelFilter = FilterSelect("channel", "Sales channel", [{value: "all", label: "All channels"}, {value: "online", label: "Online store"}, {value: "app", label: "Mobile app"}, {value: "amazon", label: "Amazon"}], $channel)
compareFilter = FilterSelect("compare", "Compare with", [{value: "plan", label: "Plan"}, {value: "previous_period", label: "Prior period"}, {value: "last_year", label: "Last year"}], $compare)
kpis = Query("get_store_kpis", {range: $range, channel: $channel, compare: $compare}, {periodLabel: "", hero: {label: "Loading", value: "—"}, heroTrend: {labels: [], current: []}, metrics: []})
insights = Query("get_store_insights", {range: $range, channel: $channel, compare: $compare}, {insights: []})
heroRow = CardRow([heroCard, insightCard])
heroCard = LargeCard([hero])
$metric = ""
hero = HeroMetric(kpis.hero, kpis.heroTrend, kpis.metrics, $metric)
insightCard = MediumCard([insightHeader, insightList])
insightHeader = DashboardCardHeader("What changed", "Most important first")
insightList = InsightList(insights.insights, 3)
kpiRow = CardRow([kpiCard])
kpiCard = LargeCard([kpiStrip, kpiRules])
kpiStrip = KpiStrip(kpis.metrics, $metric)
kpiRules = RuleChips(kpis.rules)
profit = Query("get_profit_bridge", {range: $range, channel: $channel, compare: $compare}, {periodLabel: "", comparisonLabel: "", lines: [], grossMargin: "—", contributionMargin: "—", profitPerOrder: "—", breakEvenRoas: 0, byChannel: []})
goal = Query("get_sales_goal", {channel: $channel}, {label: "", goal: 0, labels: [], cumulative: []})
profitRow = CardRow([profitCard, goalCard])
profitCard = LargeCard([profitHeader, profitChart])
profitHeader = DashboardCardHeader(profit.contributionMargin, "Contribution margin: where each dollar of net sales went, against the comparison", "number")
profitChart = ProfitWaterfall(profit.lines, profit.comparisonLabel)
goalCard = MediumCard([goalHeader, goalPace])
goalHeader = DashboardCardHeader("Monthly goal", "October sales against the pace needed to reach the goal")
goalPace = GoalPace(goal)
breakdown = Query("get_sales_breakdown", {range: $range, channel: $channel}, {lines: []})
journey = Query("get_purchase_journey", {range: $range}, {steps: [], conversionRate: "—"})
top = Query("get_product_performance", {range: $range, channel: $channel, limit: 5}, {products: []})
flowRow = CardRow([breakdownCard, journeyCard, topCard])
breakdownCard = MediumCard([breakdownHeader, breakdownChart])
breakdownHeader = DashboardCardHeader("Total sales breakdown", "From gross sales to what the store collected")
breakdownChart = MoneyBreakdown(breakdown.lines)
journeyCard = MediumCard([journeyHeader, journeyFunnel])
journeyHeader = DashboardCardHeader(journey.conversionRate, "Session to purchase, store and app", "number")
journeyFunnel = ConversionFunnel(journey.steps)
topCard = MediumCard([topHeader, leaderboard])
topHeader = DashboardCardHeader("Top products", "By net sales, with change")
leaderboard = ProductLeaderboard(top.products, 5)
byChannel = Query("get_sales_by", {range: $range, channel: $channel, dimension: "channel"}, {labels: [], totalSales: [], orders: [], items: [], overTime: {labels: [], series: []}})
byCountry = Query("get_sales_by", {range: $range, channel: $channel, dimension: "country"}, {labels: [], totalSales: [], orders: [], items: [], overTime: {labels: [], series: []}})
whereRow = CardRow([whereCard])
whereCard = LargeCard([whereHeader, channelShare, countryList])
whereHeader = DashboardCardHeader("Where sales come from", "By channel, then by country; select a channel to filter the dashboard")
channelShare = ShareBar(byChannel.items, "currency", $channel)
countryList = BarList(byCountry.items, "currency", 6, "By country")