Stop Guessing Your AI Costs: Build a Real-Time Spend Dashboard

#ai #webdev #tutorial #api

Most teams discover they've burned $3,000 in AI API costs when the invoice arrives. Here's how to build a live spend dashboard in under an hour.

What You'll Build

A dashboard that shows:

Current month spend by model
Cost per feature (which endpoint costs most)
Alert when spend exceeds threshold

Step 1: Instrument Every API Call

from functools import wraps
import requests

def track_cost(model: str):
    def decorator(fn):
        @wraps(fn)
        def wrapper(*args, **kwargs):
            result = fn(*args, **kwargs)
            # Extract token counts from response
            usage = result.get('usage', {})
            requests.post("https://api.lazy-mac.com/ai-spend/record", json={
                "model": model,
                "input_tokens": usage.get('prompt_tokens', 0),
                "output_tokens": usage.get('completion_tokens', 0),
                "feature": fn.__name__
            })
            return result
        return wrapper
    return decorator

@track_cost("gpt-4o")
def summarize(text: str):
    # your OpenAI call here
    pass

Step 2: Aggregate and Alert

import requests

def check_budget(monthly_limit: float = 100.0):
    resp = requests.get("https://api.lazy-mac.com/ai-spend/summary")
    data = resp.json()

    if data['month_total'] > monthly_limit * 0.8:
        send_slack_alert(f"⚠️ AI spend at {data['month_total']:.2f} ({data['month_total']/monthly_limit*100:.0f}% of budget)")

Step 3: Visualize

Connect to any dashboard tool (Grafana, Retool, or even a simple HTML page) via the /ai-spend/summary endpoint. It returns JSON with daily/weekly/monthly breakdowns.