Track your Claude Code spending, visualize Anthropic API token usage, and monitor billing windows — all from a local web dashboard. No account needed, no data sent anywhere.
A web UI for ccusage — the Claude Code usage analyzer. See your Claude costs by day, month, session, and 5-hour billing block with interactive charts and per-model breakdowns, instead of re-running terminal commands.
| Daily view | Monthly view |
|---|---|
| Sessions view | Blocks view |
|---|---|
The ccusage CLI is great for quick one-off checks. The web dashboard gives you something persistent and visual to keep open alongside your work.
| Feature | ccusage CLI |
ccusage-web |
|---|---|---|
| Spend over time | Text table | Interactive area/bar charts |
| Model cost breakdown | --breakdown flag |
Always-visible bar chart + legend |
| Token type split (input / output / cache) | Not shown by default | Donut chart on every view |
| Navigate between time ranges | Re-run command each time | Click tabs — Daily · Monthly · Sessions · Blocks |
| Keep watching usage | Manual reruns | Auto-refreshes every 2 minutes |
| Zero typing once open | Every check needs a new command | One browser tab |
- Daily view — Claude Code spend per day with a trend chart, per-model badges, and a full breakdown table
- Monthly view — bar chart of month-over-month Claude API spend with top-model callouts
- Sessions view — per-project session costs sorted by recency
- Blocks view — 5-hour billing window tracking (the same windows Claude Code uses for rate limiting), with an active-block indicator
Each view includes:
- Overview stat cards: total cost, total tokens, cache read %, cache write tokens
- Cost-by-model bar chart with color-coded model labels (Opus, Sonnet, Haiku)
- Token distribution donut (cache read · cache write · output · input)
- Node.js 18+
ccusageinstalled globally, ornpxavailable (falls back automatically)- Claude Code must have run at least once so
~/.claude/projects/exists with usage data
# Run directly without installing (builds on first run, ~30s)
npx ccusage-web
# Or install globally for instant starts
npm install -g ccusage-web
ccusage-webYour browser opens automatically at http://localhost:4242.
git clone https://github.com/hamzaahmedkhan/ccusage-web
cd ccusage-web
npm install
npm run dev # hot-reload dev server on localhost:3000
npm run screenshots # re-capture docs/ screenshots (requires server running)The dashboard runs entirely on your machine. A single API route (/api/usage) shells out to ccusage <view> --json and normalises the output for the frontend. No data leaves your machine — it reads the same ~/.claude/projects/*.jsonl files that ccusage uses.
- Next.js 16 · shadcn/ui · Recharts · ccusage
- ccusage — the CLI this dashboard is built on top of
- Claude Code — the AI coding tool whose usage this tracks
MIT