How do I create an AI dashboard?

Dashboards are real React and TypeScript applications rather than fixed chart templates. Sav can prepare a private handoff containing your dashboard request, while OpenCode investigates the data itself, writes multiple source files, and composes interactive cards, charts, tables, and responsive styling after you send the request in Code Mode.

A dashboard can fit almost any personal-finance workflow. For example, ask Code Mode to build a category budget from recent spending, a named home-project log, a subscription audit, a shared travel fund, or something completely different. The Finance AI home page includes coded examples with fictional data so you can see the range before you start.

You do not need to start with Sav. The empty Custom Dashboards screen has one Start Building action that creates My first dashboard and opens its empty canonical conversation directly in Code Mode. Until it is customized, the starter uses Finance AI's Namdhinggo heading and Inter body typography at the app's standard mobile sizes, and tells you to tap Edit and ask Sav, your coding agent, what to build. The coding agent can replace that styling when your requested design calls for it. Your first request therefore goes straight to OpenCode without a Sav message or generated brief.

OpenCode works inside a persistent, isolated Vercel Sandbox microVM where it can edit files and run the project commands. Finance AI independently requires TypeScript checks and a production build to pass before it stores the editable source and publishes the compiled dashboard.

When you ask Sav to make a dashboard, Sav does not create one, switch tabs, inspect your finances, or start coding. Regular chat shows a Launch Code Mode button while keeping the saved prompt private. Tapping it runs the same starter flow as Start Building, opens a separate persistent Code Mode conversation, and prefills the prompt without sending it. You can review or edit the request before the coding agent receives anything. If the handoff was accidental or you change your mind, tap its X to dismiss it and continue the same regular chat; no dashboard is created.

Code Mode keeps its back arrow, agent icon, title, dashboard name, and delete action aligned in one compact header row. The back arrow returns to the bound dashboard viewer, and there is no separate View dashboard control. Edit reopens the existing Code Mode conversation rather than starting over, and returning from that editor reloads the latest verified dashboard build without briefly removing the currently visible dashboard.

The dashboard coding agent retains its own persistent coding-session context. It can use almost all of Sav's user-scoped tools and skills, run finance queries, edit the saved source, rename the dashboard, check compilation, render top and scrolled-lower mobile previews, inspect both screenshots, and fix issues before answering you. When it first turns the generic My first dashboard starter into a specific experience, it chooses a concise relevant title unless you supplied one. You can also ask it to rename the dashboard at any time.

When you do not request a particular look, Code Mode prefers Finance AI's warm canvas, white bordered cards, restrained pink accent, Namdhinggo headings, Inter data and body type, mobile-first spacing, and accessible controls. This is a starting point, not a restriction: ask for any colors, fonts, density, layout, or visual style you want and the coding agent should follow your direction instead.

Code Mode streams workspace setup, file reads, searches, edits, Finance AI data calls, and visual verification as the same compact activity cards used by regular chat. Activity groups and their individual rows use the full available chat width, while status and tool titles wrap instead of collapsing or being cut off on narrow screens. Because opening the persistent OpenCode workspace can take about a minute, its first card says so and appears before Finance AI begins that potentially slow lookup. OpenCode's user-visible progress commentary stays in its actual chronological position between the cards, while its final answer remains after Finance AI's independent verification.

The regular chat agent and OpenCode do not have separate copies of Finance AI's backend tools. Both use the same typed backend registry and the same GraphQL executor for schema/query, memory, categorization, categories, support, institutions, and loaded skills. OpenCode reaches that shared backend through its local MCP transport; only recursive dashboard lifecycle tools and client-only interface tools are withheld.

Opening the center Dashboards tab immediately opens the dashboard you viewed most recently, without waiting for device storage or a server refresh and without briefly showing the Custom Dashboards page. Finance AI keeps the current destination in memory and stores the selection locally for each signed-in user. Once the server confirms that the account has no dashboards, that empty result overrides and clears any stale device selection. A stale viewer link also returns automatically to the real empty state instead of showing a NOT_FOUND error. If one saved dashboard is unavailable but others remain, the app opens the most recently updated dashboard instead.

Tap the dashboard title and chevron in the top-left to open the dashboard menu. Choose another dashboard to view it immediately, or choose Create another dashboard. Tap Edit in the top-right to continue the selected dashboard's existing Code Mode conversation.

To delete the dashboard you are editing, tap the trash icon in the top-right of Code Mode and confirm Delete. Finance AI warns that this is irreversible. The dashboard immediately disappears from your account, while Finance AI retains a soft-deleted record instead of destroying its code and build artifact.

Dashboard GraphQL runs on the Finance AI server through the same read-only data path used by Sav. Operations can read only explicitly approved financial fields, are limited to the signed-in user's records by row-level security, reject writes, and have server timeouts and result limits.

During coding, OpenCode has broad freedom inside its microVM, but the real model credential is injected only at Vercel's network boundary and database credentials are never placed in the sandbox. Finance tools are authenticated and executed by the Finance AI host. Every final code change must match fresh passing top and scrolled-lower mobile browser previews, in addition to the independent typecheck and production build. Desktop rendering is not part of dashboard verification because the dashboard viewer is mobile-only.

Once built, dashboard code runs in an isolated viewer without external network access, browser storage, cookies, the parent page DOM, or the app's login token. Its host bridge supports approved read-only GraphQL queries plus a narrow set of category and categorization actions. Every action shows a trusted Finance AI confirmation before it runs and uses the same validated, user-scoped handler as Sav.

Free accounts can keep one custom dashboard. Pro accounts, including an active Pro trial or paid-period grace access, can create more than one.

If a Free account chooses Create another dashboard, Finance AI opens a Pro upgrade screen explaining the additional-dashboard benefit and available trial or plans. The existing dashboard remains intact. Free users can keep editing or renaming it without upgrading, and Sav will not delete or overwrite it to bypass the limit.