AI Usage Dashboard

A monitoring dashboard for AI API consumption. Displays three KPI stat cards (requests, tokens, cost), a bar chart of request volume over time using an inline SVG renderer, and a sortable per-model usage breakdown table.

Total requests (May 2026)

14.8K

Total tokens

3.2M

Estimated cost

$12.4800

Requests over time

04-2504-2604-2704-2804-2904-3005-01

Usage by model

Model	Tokens	Cost
gpt-4o	1.8M	$9.0000
gpt-4o-mini	900.0K	$1.8000
claude-3-5-sonnet	500.0K	$1.6800

import { AIUsageDashboard } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add ai-usage-dashboard

Import

import.tsx

import { AIUsageDashboard } from "@aetherstack/blocks"

Usage

ai-usage-dashboard.tsx

import { AIUsageDashboard } from "@aetherstack/blocks"

export function UsagePage() {
  return (
    <AIUsageDashboard
      stats={{
        totalRequests: 14820,
        totalTokens: 3_200_000,
        estimatedCost: 12.48,
        period: "May 2026",
      }}
      tokensByModel={[
        { model: "gpt-4o", tokens: 1_800_000, cost: 9.0 },
        { model: "gpt-4o-mini", tokens: 900_000, cost: 1.8 },
        { model: "claude-3-5-sonnet", tokens: 500_000, cost: 1.68 },
      ]}
      requestsOverTime={[
        { date: "04-28", requests: 620, tokens: 135000 },
        { date: "04-29", requests: 740, tokens: 160000 },
        { date: "04-30", requests: 855, tokens: 185000 },
        { date: "05-01", requests: 1020, tokens: 220000 },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
stats	UsageStats	—	Summary KPI object with totalRequests, totalTokens, estimatedCost, and an optional period label.
tokensByModel	ModelUsage[]	[]	Per-model breakdown rows displayed in the usage table.
requestsOverTime	DailyUsage[]	[]	Daily usage series rendered as a mini bar chart.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→The bar chart is rendered as an <svg> with aria-label='Bar chart'. Each bar includes a <title> element with the data point label and value.
→Large numbers are formatted with K/M suffixes; the raw values are available via the bar <title> elements.
→The usage table uses semantic <table>, <thead>, and <tbody> elements with column headers.