How do I create an AI dashboard?

Dashboards are real React and TypeScript applications rather than fixed chart templates. Your Little Accountant 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 My Little Accountant home page includes coded examples with fictional data so you can see the range before you start.

The first-run tab tour includes a scripted dashboard preview after Net Worth. It highlights Start Building, shows a simulated Code Mode request for Build me a monthly budget, and reveals a polished example Monthly Budget dashboard. The preview uses fictional values, is identical for every onboarding, and does not create a dashboard or consume a chat on the user's account.

You do not need to start with Your Little Accountant. The empty Custom Dashboards screen presents Build your first dashboard directly on the page without a surrounding card border, followed by a light-blue Start Building action. It creates My first dashboard and opens its canonical conversation directly in Code Mode. If you leave before sending the first message, the unfinished dashboard keeps the explanation and Start Building button centered in the viewer. Once you have sent a message, that entry becomes Continue Building so it is clear that tapping it resumes the same Code Mode conversation. Until the first dashboard is built, the viewer uses a light-blue Start Building button centered in the viewer instead of the top-right Edit button. After the build finishes, Edit appears in the top-right. The starter uses My Little Accountant's Mukta heading and Inter body typography at the app's standard mobile sizes, and the coding agent can replace that styling when your requested design calls for it. Your first request therefore goes straight to OpenCode without an assistant message or generated brief.

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

When you ask Your Little Accountant to make a dashboard, Your Little Accountant 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, dashboard name, Code Mode label, and delete action aligned in one compact header row without a divider line underneath it. The dashboard name is the primary title, and the main app tabs stay hidden while the focused builder is open, then return when you leave it. Opening Code Mode immediately presents a full-screen stable blue destination layout above the tab bar, then keeps the same header and mascot position in place until the conversation and current plan allowance are ready. Once ready, that blue destination layer fades smoothly into the white Code Mode chat instead of disappearing in a single frame. The mascot gently looks around as the only full-page loading symbol without fading or blinking between the launch and destination screens; full-page loading states throughout the mobile app use this treatment without a spinner or loading sentence. The full mascot remains visible as one complete image while only its eyes move, so facial details never draw in separately. A fresh Code Mode conversation centers the assistant mascot above a clean white composer with one soft light-blue full-box glow and no outline or divider effects. The composer stays anchored when the keyboard opens unless the keyboard would cover it; in that case, it lifts only enough to remain visible with a small gap. The send control stays aligned with the top of the multiline composer as the request grows, and one tap sends even while the keyboard is open. Reduce Motion keeps a soft glow visible without pulsing it. After your first message, the composer moves to the bottom while keeping that same simple treatment. After the coding agent finishes and verifies a real dashboard artifact successfully, a prominent light-blue View Dashboard button appears above the composer and returns to the bound dashboard viewer. Stopping an unfinished build pauses Code Mode and shows Resume Building instead, so you can continue the same request without opening an empty starter dashboard or spending another Free chat. The header back arrow remains available too. 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. While the coding agent is working, the loading mark keeps turning continuously beside one short, light-gray, regular-weight description of the current activity, such as reviewing files, checking finance data, building, or previewing the dashboard. The loading text slowly fades in and out through a clearly visible but calm pulse. Each description remains long enough to read before the latest activity replaces it, and streamed responses follow the bottom without stacking competing scroll animations. Code Mode does not repeat the same tool activity elsewhere in the transcript. Regular Chat and onboarding retain their playful money phrases.

The dashboard coding agent retains its own persistent coding-session context. It can use almost all of Your Little Accountant'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 My Little Accountant's warm canvas, white bordered cards, restrained blue accent, Mukta 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.

Regular Chat, Dashboard Code Mode, and onboarding categorization keep the current loading description pinned directly above the bottom controls while the assistant is working. Tap the loading row to see the user-facing tools in the current working stretch, including a tool that is still running; tap it again to collapse the list. Streaming content follows the bottom automatically, bottom overscroll is disabled during the run, and no large spacer is left beneath the loading row. As soon as each tool-work group finishes, its quiet Worked for summary appears with that group's elapsed time even while the assistant continues working. Tap that summary to expand or hide the individual actions; the arrow points upward while the actions are open. Rich results that are useful to keep, such as charts, transaction details, and support tickets, remain visible in their actual chronological position.

Before the first message, regular Chat and Code Mode show the assistant mascot in a gentle idle state. Each fresh regular Chat opens with the mascot above the same centered clean composer and soft light-blue glow, without starter-prompt cards. The centered composer stays anchored when the keyboard opens unless it would be covered, then lifts only by the overlap. Tap the blank page outside the composer to close the keyboard without clearing the draft; after a conversation starts, the keyboard also follows the native drag-to-dismiss gesture. After you send the first message, regular Chat returns the composer to its standard position and appearance at the bottom. The idle animation keeps the full mascot in one image and moves only its eyes, while devices with Reduce Motion enabled show the still logo.

The regular chat agent and OpenCode do not have separate copies of My Little Accountant'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. Code Mode also has dashboard-scoped storage for durable user-created goals, plans, notes, checklists, and logs, so those experiences can stay in sync across devices instead of relying on one browser or phone.

Generated dashboard controls acknowledge the first tap immediately. Safe local interactions such as checklist items, selections, and notes update optimistically while dashboard storage saves in the background, then roll back and show an error if saving fails. Controls use mobile-sized tap targets and avoid making a successful first tap appear ignored.

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. My Little Accountant 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. My Little Accountant warns that this is irreversible. The dashboard immediately disappears from your account, while My Little Accountant retains a soft-deleted record instead of destroying its code and build artifact.

Dashboard GraphQL runs on My Little Accountant's server through the same read-only data path used by Your Little Accountant. 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 My Little Accountant's 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, dashboard-scoped JSON storage, and a narrow set of category and categorization actions. Stored dashboard items are isolated to the signed-in user and current dashboard, have size and rate limits, and can synchronize across devices. Financial actions show a trusted My Little Accountant confirmation before they run and use the same validated, user-scoped handler as Your Little Accountant; saving ordinary dashboard-owned state does not require that financial-action confirmation.

Free accounts can use one custom dashboard. Pro accounts, including legacy accounts whose previously started trial is still active and paid-period grace access, can use multiple custom dashboards.

When an account moves from Pro to Free, My Little Accountant preserves every dashboard, keeps the most recently opened dashboard unlocked, and locks the others. Opening a locked dashboard or choosing Create another dashboard shows the Pro upgrade screen; upgrading unlocks the preserved dashboards again.