AI Agent Dashboard Template
Most "AI dashboard" templates are static Figma exports — charts with fake numbers. This is the real thing: a working Next.js dashboard where the agent runs, its tool calls stream in live, and every run is stored, traced and billed.
AgentShipKit
AgentRunsBillingPlan
Pro
The agent console from the kit, replaying a real two-step run — it picks the tool, reads the result, and re-plans. Every call is traced.
Live tool traces
Every tool call the agent makes — input, output, running/returned state — streamed into the UI as it happens. When the agent does something weird, your user opens the trace instead of opening a support ticket.
Run history
Every execution stored with its steps, status and token count. The dashboard reads it straight from Postgres with row-level security, so a user can only ever see their own runs.
Token accounting
Total tokens per run, persisted on completion. The number your costs scale with, visible to the people generating it.
Quota & billing built in
A plan badge, a usage meter, and an upgrade path wired to Polar. Free users hit a real, race-safe quota enforced in Postgres — not a client-side suggestion.
What it's built with
Next.js 16 (App Router), Tailwind CSS v4, TypeScript, the Vercel AI SDK v5 (streamText + useChat), Supabase for auth and Postgres, Polar for payments. No component library to fight, no chart library rendering fake data — around 50 files you can read in an afternoon.
Get it
One payment, lifetime updates. Honest comparison with the alternatives — including when not to buy this.