Emerging

Composed dashboard

The agent assembles a layout of charts and panels answering the question just asked.

MAsk MilkyAnalytics

“Why did churn go up in Q3?”

MMilky built 4 panels from billing and onboarding data · 1 Oct, 09:12

Q3 churn

3.4%

▲ 1.3 pts from 2.1% in Q2

Finished setup in month one

41%

under 50 seats

78%

50 seats and over

Churn by account size, Q3

1–10 seats 5.2%

11–49 4.1%

50–199 1.6%

200+ 0.9%

Monthly churn 2026 2025

Try it: Open a panel's query to see what it runs, then save the view. It's kept as a spec that re-runs, not a one-off picture.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Power BI report page 'Sales Performance Across Territories' with KPI cards, line and bar charts, and the Copilot pane on the right listing suggested pages — Power BI Copilot
Copilot proposes a report outline, then builds a full page of KPI cards and charts for the chosen topic, which can be edited or undone from the pane.
Source: Microsoft Learn ↗

Hex Threads answer titled 'Top Sales Performers Analysis' with explanatory text and a bar chart of the top 10 account executives by closed-won ARR — Hex Threads
Asked a plain-language question, the Threads agent writes a short analysis and assembles charts from the semantic model, which can be saved as a project.
Source: Hex blog (launch video) ↗

When to use

Analytics and monitoring where the useful view differs with every question.

Seen in

Julius and Hex AI analyses, Power BI copilot pages, Salesforce dynamic dashboards.

For engineers

Emit a layout spec you can persist and re-run; keep the underlying query visible and editable.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Composed dashboard" pattern: `ComposedDashboard`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
The agent assembles a layout of charts and panels answering the question just asked.

Use it when: Analytics and monitoring where the useful view differs with every question.

## What to build
A grid of panels the agent assembled to answer one question, built from a layout spec that can be saved, re-run and shared. Every panel shows the query behind it, which a person can read and edit. It renders in an analytics workspace below the question.

### Props
- `question`: string, shown at the top.
- `layout`: { id?: string; generatedAt: Date; sources: string[]; panels: Array<{ id: string; type: "kpi" | "bar" | "line" | "table" | "text"; title: string; query: { text: string; language: string }; state: "loading" | "ready" | "empty" | "error" | "stale"; error?: string }> }, the persistable spec.
- `renderPanel(panel)`: (panel) => ReactNode, draws the chart or table; the dashboard owns layout and chrome only.
- `saved?`: { id: string; name: string }, set once the layout is saved.
- `savedViews?`: Array<{ id: string; name: string }>, plus `onOpenSaved(id)`.
- `onSave(name: string)`, `onEditQuery(panelId, query)`, `onRemovePanel(panelId)` and `onRerun()`: callbacks. The component never queries data itself.

### States it must render
- Assembling: one skeleton per panel in the spec, in final positions.
- Ready: panels with values, and a provenance line such as "Built 4 panels from billing and onboarding data, 1 Oct 09:12" in the AI accent.
- Query open: a panel's query is visible in a code block with Edit.
- Stale panel: after a query edit, the panel shows "Query changed, run to update" until re-run.
- Panel error or empty: that panel says why ("No rows", "No access to onboarding") with its query; other panels are unaffected.
- Saved: "Saved as Q3 churn drivers" and the view appears in the saved list, re-runnable.

### Interactions
- Each panel has a Query disclosure; Edit turns it into a text area, and Run calls `onEditQuery`.
- Save view asks for a name (prefilled from the question) and calls `onSave`.
- Remove panel calls `onRemovePanel`; Re-run calls `onRerun` and keeps the layout unchanged.

### Edge cases
- Re-running a saved view refreshes data and timestamp but never re-generates the layout.
- A panel whose query references data the person can't access shows a permission message, not an empty chart.
- Under 640 px panels stack in spec order, KPIs first.
- A layout with no panels: show the question with "No panels were produced" and Re-run.

## Must avoid
Generating a fresh throwaway layout every time, with no way to pin, save, or share the good one.

## Engineering constraint
Emit a layout spec you can persist and re-run; keep the underlying query visible and editable.

## Accessibility
- Each panel is a `region` labelled by its title; every chart has a short text summary or table alternative from `renderPanel`.
- Announce when all panels finish loading, not each one.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for generative ui

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Does generated UI stay inside your design system's vocabulary?
Can the agent only pick components you built and typed?
Is the generated surface addressable — linkable, savable, reviewable?
Does layout stay stable while content streams in?