{"slug":"data-dashboard","title":"How to vibe code a data dashboard with Xpersona","shortTitle":"Data dashboard","goal":"build a data dashboard","description":"Use Xpersona to plan data sources, metrics, filters, tables, charts, loading states, and trustworthy dashboard checks.","audience":"Builders making analytics pages for revenue, usage, operations, marketing, or product metrics.","searchIntents":["vibe code data dashboard","build analytics dashboard with AI","OpenCode data dashboard prompt","AI coding guide for metrics dashboard"],"firstPrompt":"Help me build a data dashboard with Xpersona. Define data sources, metric definitions, filters, tables, charts, empty states, and first OpenCode task.","buildPlan":["Define each metric in plain language and name the source table or API.","Ask Xpersona for the query shape, filters, edge cases, and how to validate sample values.","Build one table or metric card with real data before adding more charts.","Add date ranges, empty states, and a sanity-check note for each metric."],"pitfalls":["Charting numbers before defining exactly what they mean.","Skipping empty and no-data states.","Trusting a dashboard without sample-row validation."],"faq":[{"question":"What should a data dashboard show first?","answer":"Show the metric or table that helps the user make one decision. Add more views only when they answer new questions."},{"question":"How do I avoid wrong dashboard numbers?","answer":"Ask Xpersona to write the metric definition, source query, sample rows, and a manual sanity check before you trust the chart."}],"canonicalUrl":"https://www.xpersona.co/vibe-coding/data-dashboard","machineUrl":"https://www.xpersona.co/api/v1/guides/vibe-coding/data-dashboard","provider":{"name":"Xpersona","baseUrl":"https://www.xpersona.co/v1","defaultOpenCodeModel":"xpersona/xpersona-frieren-coder","displayModelName":"Xpersona Frieren 1"},"setupSteps":[{"name":"Describe the end goal","ui":"Guide input","description":"Write the thing you want to create in plain language. Keep it concrete: app, website, chatbot, dashboard, bug fix, or feature."},{"name":"Try the chat plan","ui":"Xpersona chat","description":"Open chat and ask Xpersona for the first build plan, files to edit, risks, and a tiny first milestone."},{"name":"Start usage based billing","ui":"Pricing","description":"When the plan is useful, start usage based billing so one subscription can cover chat, setup keys, OpenCode, and /v1 clients."},{"name":"Create the setup key","ui":"Dashboard key page","description":"Create one private setup key. Treat it like a password and paste it only into tools you control."},{"name":"Choose Xpersona in OpenCode","ui":"OpenCode provider picker","description":"Open the provider screen, choose Xpersona, paste the setup key, and pick xpersona/xpersona-frieren-coder."},{"name":"Run the first repo prompt","ui":"OpenCode prompt","description":"Ask OpenCode for the smallest useful implementation step. Review the diff, run checks, and continue from the result."},{"name":"Check usage and keep iterating","ui":"Usage dashboard","description":"Use the dashboard to inspect requests, tokens, spend, and status after each real run."}],"recommendedLinks":{"guide":"https://www.xpersona.co/vibe-coding/data-dashboard","hub":"https://www.xpersona.co/vibe-coding","chat":"https://www.xpersona.co/chat","pricing":"https://www.xpersona.co/pricing?checkoutTier=payg","opencode":"https://www.xpersona.co/opencode","dashboardOnboarding":"https://www.xpersona.co/dashboard/onboarding","usageDashboard":"https://www.xpersona.co/dashboard/usage","llms":"https://www.xpersona.co/llms.txt","llmsFull":"https://www.xpersona.co/llms-full.txt"}}