docs: Document Custom Dashboards feature for AI-powered data visualization#1279
docs: Document Custom Dashboards feature for AI-powered data visualization#1279promptless[bot] wants to merge 1 commit intodevfrom
Conversation
![promptless[bot]](https://avatars.githubusercontent.com/in/979718?s=60&v=4){kind=small}
|
|
||
| `maskAllInputs` defaults to `true`, so form fields are masked unless you explicitly disable it. | ||
|
|
||
| ## Custom Dashboards |
There was a problem hiding this comment.
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
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Greptile SummaryThis PR documents the new Custom Dashboards feature introduced in PR #1243, updating However, cross-referencing the documentation against the actual implementation in
Confidence Score: 2/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User visits Dashboards page] --> B{Existing dashboards?}
B -- No --> C[Click New Dashboard]
B -- Yes --> G[Select existing dashboard]
C --> D[Enter dashboard name in FormDialog]
D --> E[Navigate to dashboard detail page]
E --> F[Chat panel opens automatically]
F --> H[User describes desired visualization in chat]
H --> I[AI generates TSX dashboard code]
I --> J[Dashboard renders in sandbox iframe]
J --> K{Unsaved changes?}
K -- Yes --> L[Save button appears in chat header]
L --> M[User clicks Save → persisted to project config]
K -- No --> N[Close chat panel with X]
G --> O[Chat panel closed by default]
O --> P[AI-generated Edit button inside sandbox calls dashboardEdit]
P --> F
Reviews (1): Last reviewed commit: "Document Custom Dashboards feature for A..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| 4. The AI updates the dashboard while preserving parts you didn't change | ||
| 5. Click **Done** when finished | ||
|
|
||
| Dashboards are automatically saved to your project. View and manage all saved dashboards from the **Dashboards** page. |
There was a problem hiding this comment.
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.
| 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. |
| 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 | ||
|
|
There was a problem hiding this comment.
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 viahandleEditToggle, which is wired throughwindow.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:
| 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** |
| 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 |
There was a problem hiding this comment.
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.
| 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 |
1 participant
Open this suggestion in Promptless to view citations and reasoning process
Adds documentation for the new Custom Dashboards feature from PR #1243. Documents how to create dashboards using natural language prompts, available features (metric cards, charts, tables, navigation), editing workflows, and automatic saving. Updates the Analytics overview, diagram, and best practices to include dashboards.
Trigger Events
stack-auth/stack-auth commit (dev): 8267ebc Custom dashboards and unified ai no playground (#1243)
Promptless Research (5 files, 1 GitHub PR)
.long_term_context/product_knowledge/product_overview.md.long_term_context/doc_workflow/client_instructions.md.long_term_context/style/client_style_guide.mddocs/content/docs/(guides)/apps/analytics.mdxdocs/content/docs/(guides)/meta.jsonAgent Response
Tip: Sort by Shortest Review in the Dashboard to find quick wins ⚡