Skip to content
Open
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
094414c
Document Custom Dashboards feature for AI-powered data visualization
promptless[bot] Mar 23, 2026
002b774
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 17, 2026
a3dfe32
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 17, 2026
1adea0f
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 17, 2026
4429d30
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
5a03b74
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
e8c94c3
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
2ba0f80
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
7812bb6
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
58a046f
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
0a9f169
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
da728f2
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
c178937
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 18, 2026
01e31d2
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
eac1890
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
6330cb2
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
2cbb082
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
a06aa05
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
16445cc
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
9ff1e2e
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
14cf734
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
0835f1d
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 19, 2026
ae4948d
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 20, 2026
129c935
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 20, 2026
8315962
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 20, 2026
3447411
Merge branch 'dev' into promptless/document-custom-dashboards
promptless[bot] Apr 20, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 37 additions & 2 deletions docs/content/docs/(guides)/apps/analytics.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ The Analytics app gives you direct access to your project's analytics dataset in

## Overview

Analytics is organized into three areas in the dashboard:
Analytics is organized into four areas in the dashboard:

- **Tables**: Browse event rows with sorting, search, and incremental loading
- **Queries**: Run and save reusable ClickHouse SQL queries
- **Replays**: Watch session replays and filter by user, team, duration, activity window, and click count
- **Dashboards**: Build custom data visualizations using natural language

## How Analytics Works

Expand All @@ -25,6 +26,7 @@ flowchart LR
C --> D[Tables view]
C --> E[SQL query runner]
C --> F[Session replay UI]
C --> G[Custom dashboards]
`} />

### What Gets Tracked
Expand Down Expand Up @@ -111,9 +113,42 @@ export const stackClientApp = new StackClientApp({

`maskAllInputs` defaults to `true`, so form fields are masked unless you explicitly disable it.

## Custom Dashboards
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Citation: Custom Dashboards feature introduced in this PR. Based on the implementation in apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/ and the AI prompts in apps/backend/src/lib/ai/prompts.ts which describe the dashboard creation workflow with metric cards, charts, tables, and navigation capabilities.
View source


Custom Dashboards let you build data visualizations using natural language. Describe what you want to see, and AI generates an interactive dashboard with charts, metrics, and tables.

### Creating a Dashboard

1. Go to **Dashboards** in the sidebar
2. Click **New Dashboard** or use the command palette (Cmd+K / Ctrl+K)
3. Describe what you want to visualize (e.g., "Show me user signups over the last 30 days with a breakdown by authentication method")
4. The AI generates an interactive dashboard
Comment on lines +122 to +125
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Missing dashboard name step in creation flow

The documented creation flow skips a required step. In page-client.tsx, clicking New Dashboard opens a FormDialog that prompts for a dashboard name (name: yup.string().defined().min(1, "Name is required")). Only after entering a name is the dashboard created and the user navigated to the detail page. The current step 3 ("Describe what you want to visualize") actually happens on the subsequent detail page, not in a prompt during creation.

Suggested change
1. Go to **Dashboards** in the sidebar
2. Click **New Dashboard** or use the command palette (Cmd+K / Ctrl+K)
3. Describe what you want to visualize (e.g., "Show me user signups over the last 30 days with a breakdown by authentication method")
4. The AI generates an interactive dashboard
1. Go to **Dashboards** in the sidebar
2. Click **New Dashboard** (or use the command palette with Cmd+K / Ctrl+K)
3. Enter a name for your dashboard and click **Create**
4. Describe what you want to visualize in the chat panel that opens (e.g., "Show me user signups over the last 30 days with a breakdown by authentication method")
5. The AI generates an interactive dashboard


### Dashboard Features

Custom dashboards support:

- **Metric cards**: key numbers like total users, signups, or conversion rates
- **Charts**: trends and distributions using bar charts, line charts, and more
- **Tables**: detailed data rows with sorting and filtering
- **Navigation**: links to other dashboard pages like Users or Teams

### Editing Dashboards

1. Open the dashboard you want to edit
2. Click the **Edit** button
3. Describe your changes in the chat panel (e.g., "Add a pie chart showing user distribution by country")
4. The AI updates the dashboard while preserving parts you didn't change
5. Click **Done** when finished

Comment on lines +138 to +143
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 "Edit" and "Done" buttons do not exist as described

The editing steps reference clicking an Edit button (step 2) and a Done button (step 5), but neither exists as a fixed UI element in the dashboard detail page. Looking at [dashboardId]/page-client.tsx:

  • The chat panel opens automatically for new, empty dashboards (via useState(!hasSource)) and can be toggled via handleEditToggle, which is wired through window.dashboardEdit() inside the AI-generated sandbox — it is not a standalone button in the outer dashboard UI.
  • There is no Done button anywhere. Users close the chat panel with the X icon, and must separately click Save if there are unsaved changes.

The steps should be updated to reflect the actual interaction model:

Suggested change
1. Open the dashboard you want to edit
2. Click the **Edit** button
3. Describe your changes in the chat panel (e.g., "Add a pie chart showing user distribution by country")
4. The AI updates the dashboard while preserving parts you didn't change
5. Click **Done** when finished
1. Open the dashboard you want to edit
2. Click **Edit** within the dashboard (or reopen the chat panel using the **X** toggle) to show the chat panel
3. Describe your changes in the chat panel (e.g., "Add a pie chart showing user distribution by country")
4. The AI updates the dashboard while preserving parts you didn't change
5. Click **Save** in the chat panel header to persist your changes, then close the panel with **X**

Dashboards are automatically saved to your project. View and manage all saved dashboards from the **Dashboards** page.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Dashboards are not automatically saved

The documentation states "Dashboards are automatically saved to your project," but the actual implementation requires an explicit save action. In [dashboardId]/page-client.tsx, the hasUnsavedChanges flag tracks unsaved state and a Save button (FloppyDiskIcon) only appears in the chat panel header when there are unsaved changes. There is no useEffect or other mechanism for auto-saving — handleSaveDashboard is only triggered by the user clicking Save.

Suggested change
Dashboards are automatically saved to your project. View and manage all saved dashboards from the **Dashboards** page.
Dashboards must be saved manually. When changes are pending, a **Save** button appears in the chat panel header — click it to persist your dashboard. View and manage all saved dashboards from the **Dashboards** page.


Use custom dashboards when you need quick, tailored visualizations without writing SQL.

## Best Practices

1. **Use Tables for quick incident triage**: the Tables UI is the fastest way to inspect recent `events` rows without writing SQL.
2. **Use Queries for repeatable analysis**: save important SQL in folders, and scope queries with filters/`LIMIT` so they stay within result and timeout limits.
3. **Use Replays for behavioral debugging**: start from an event pattern, then inspect matching session replays to understand what users actually did.
4. **Keep replay privacy defaults on**: leave `maskAllInputs` enabled unless you have a specific reason and a data-handling policy for unmasked inputs.
4. **Use Custom Dashboards for quick visualizations**: describe what you want in plain language to generate charts and metrics without writing code.
5. **Keep replay privacy defaults on**: leave `maskAllInputs` enabled unless you have a specific reason and a data-handling policy for unmasked inputs.
Loading