DemoBuy

Usage & Logs

Last updated on 2026-04-05

The usage page provides analytics on token consumption, cost trends, and budget management. The logs page is a detailed request/response log viewer for debugging and monitoring individual API calls.

Usage

Route: /usage

The usage page gives AI ops teams visibility into how tokens are being consumed, what each model costs, and whether spending is on track with budget targets.

Token Usage Analytics

A Recharts AreaChart showing token consumption over time with toggles for different time ranges (7d, 30d, 90d):

  • Input vs output tokens -- stacked area chart distinguishing input and output token volumes
  • Model breakdown -- filter usage by specific model or view all models combined
  • Daily/weekly/monthly -- toggle aggregation granularity
  • Export -- download usage data as CSV
import { TokenUsageAnalytics } from "@/components/usage/token-usage-analytics"

<TokenUsageAnalytics data={usageData} />

Cost Breakdown by Model

A Recharts BarChart showing monthly cost split by model, with a summary table below:

Model Input Cost Output Cost Total % of Budget
GPT-4o $420 $840 $1,260 44.2%
Claude 3.5 Sonnet $280 $560 $840 29.5%
Gemini 1.5 Pro $140 $280 $420 14.7%
GPT-4o Mini $90 $145 $235 8.3%
Other $32 $60 $92 3.2% 
import { CostBreakdown } from "@/components/usage/cost-breakdown"

<CostBreakdown data={costBreakdownData} />

Line charts showing key usage metrics over time:

  • Requests per day -- total API call volume
  • Average tokens per request -- efficiency tracking
  • Cost per request -- cost optimization trends
  • Unique users -- team adoption metrics
import { UsageTrends } from "@/components/usage/usage-trends"

<UsageTrends data={trendData} />

Budget Alerts

Budget monitoring with threshold-based alerts:

  • Monthly budget -- set a spending cap with visual progress bar
  • Alert thresholds -- configure warnings at 75%, 90%, 100% of budget
  • Per-model limits -- set individual model spending limits
  • Notification preferences -- email, in-app, or Slack alerts when thresholds are crossed
import { BudgetAlerts } from "@/components/usage/budget-alerts"

<BudgetAlerts budget={budgetConfig} currentSpend={currentSpend} />

Logs

Route: /logs

The logs page provides a searchable, filterable table of every API request and response, enabling debugging, auditing, and performance analysis.

Log Table

A high-density table displaying request/response pairs:

  • Columns -- timestamp, request ID, model, prompt (truncated), status, latency, input tokens, output tokens, cost, user
  • Sortable -- click any column header to sort ascending/descending
  • Expandable rows -- click a row to expand and view the full request/response payload
  • Bulk export -- download filtered logs as CSV or JSON
import { LogTable } from "@/components/logs/log-table"

<LogTable logs={logs} />

Powerful filtering controls for narrowing down logs:

  • Full-text search -- search across prompt content, response content, or request IDs
  • Status filter -- success (2xx), client error (4xx), server error (5xx), timeout
  • Model filter -- select specific models
  • Date range -- pick start and end dates with a date picker
  • Latency range -- filter by response time (e.g., > 2s for slow requests)
  • Token count range -- filter by input or output token count

Log Detail Panel

Expanding a log row reveals the full detail view:

  • Request payload -- complete prompt with system and user messages
  • Response payload -- full model response with formatting
  • Metadata -- model version, temperature, max tokens, and other parameters used
  • Token breakdown -- input tokens, output tokens, total with cost
  • Timing -- time to first token, total response time, queue wait time

Status Indicators

Status Badge Meaning
200 Green Successful response
400 Yellow Bad request (invalid parameters)
429 Orange Rate limited
500 Red Server error
Timeout Gray Request timed out

Data Sources

Data Source Location
Token usage usageData data/seed.ts
Cost breakdown costBreakdownData data/seed.ts
Usage trends trendData data/seed.ts
Budget config budgetConfig data/seed.ts
Logs logs data/seed.ts

Next Steps

Previous

Prompts & Playground

Next

Errors & Team