Building an LLM API Cost Tracker Dashboard

Why You Need Cost Visibility Into LLM APIs

Claude API calls scale unpredictably. A single poorly-optimized agent loop can drain $500 in hours. Most indie developers only see final charges in their Anthropic dashboard—weeks after the damage is done.

A dedicated cost tracker gives you per-request visibility. You'll spot which features, users, or agent workflows are expensive. You'll catch runaway loops immediately. You'll make confident decisions about which AI features to ship versus deprecate.

Architecture: Logging Requests and Calculating Costs

Your tracker needs three layers: (1) middleware that intercepts Claude API calls and logs metadata, (2) a Supabase table storing tokens used + timestamps, (3) a Next.js dashboard querying and visualizing costs.

For each request, capture model, input tokens, output tokens, and user/feature identifier. Calculate cost using Anthropic's published pricing (e.g., Claude 3.5 Sonnet: $3/M input, $15/M output). Aggregate by day, user, or feature to find cost drivers.

// Middleware logging Claude calls
export async function logClaudeUsage(
  userId: string,
  feature: string,
  inputTokens: number,
  outputTokens: number
) {
  const costUSD = (inputTokens * 3 + outputTokens * 15) / 1_000_000;
  await supabase.from('claude_usage').insert({
    user_id: userId,
    feature,
    input_tokens: inputTokens,
    output_tokens: outputTokens,
    cost_usd: costUSD,
    created_at: new Date(),
  });
}

Building the Dashboard Query Layer

Your Next.js API routes will query Supabase to aggregate costs. Build endpoints for total spend, spend-by-feature, spend-by-user, and daily trends. Use SQL window functions to calculate running totals and month-over-month changes.

On the frontend, display metrics that matter: total spend this month, daily average, top 5 expensive features, projected month-end cost. Add filtering by date range and user segment.

Alerting and Budget Controls

Set soft and hard thresholds. Send Slack or email alerts when daily spend exceeds a target, or when projected monthly spend hits 80% of your budget. Consider implementing feature-level kill switches: if a specific feature's cost_per_request exceeds a threshold, disable it automatically.

Store budget limits in a config table. Query current spend against limits on each request. This prevents one runaway feature from tanking your month.

Open-Source Implementation: Pantheon

Rather than building from scratch, use Pantheon—a battle-tested starter kit for LLM cost tracking. It includes pre-built Supabase migrations, Next.js dashboard components, and middleware for Claude API logging.

Find it at github.com/lewisallena17/pantheon. The repo includes TypeScript types for token logging, a sample alerting integration, and documentation for deploying to Vercel + Supabase. Pantheon handles the scaffolding; you customize dashboards for your specific features.

Common Pitfalls to Avoid

Don't log at the response level only—log at request initiation too, so you catch retries and failures. Don't forget to account for context window reuse in multi-turn conversations. Don't set thresholds too tight or you'll spam your own alerts.

Test your logging in staging. Verify that cost calculations match Anthropic's usage dashboard before shipping to production. Set up a monthly reconciliation process to catch discrepancies early.

Open-source implementation

Everything in this article runs in pantheon — a production-ready Next.js + Supabase + Claude starter. Clone it, deploy to Vercel, run PM2. The dashboard auto-commits every agent edit and reverts itself if TypeScript breaks.