Serverless Inference Consumption Dashboard

A simple dashboard to view your DigitalOcean GenAI / serverless inference costs broken down by model and month.

Paste your DO API token (with billing:read scope), and the app fetches your invoices, filters for serverless inference line items, and renders stacked bar charts and a sortable breakdown table. Your token is never stored — it's only held in memory for the duration of your session.

Deploy to DigitalOcean

Features

• Cost breakdown by model and month (stacked bar chart)
• Summary cards: total spend, current month to date, top model
• Month range selector to filter the displayed period
• Sortable breakdown table
• Token never persisted — only held in React state

Tech Stack

• Next.js (App Router, TypeScript)
• Tailwind CSS
• Chart.js + react-chartjs-2

Local Development

npm install
npm run dev

Open http://localhost:3000 and enter a DigitalOcean API token with billing:read scope.

How It Works

1. You enter your DO API token in the browser
2. The token is sent via POST to /api/invoices (a Next.js API route)
3. The API route proxies requests to the DigitalOcean Billing API, fetching all invoices and their line items
4. Serverless inference items are filtered and aggregated by model and month
5. The dashboard renders the results — no data is stored server-side