Usage Analytics

How It Works

AI Kit's usage dashboard provides real-time visibility into your AI application's resource consumption and performance. The dashboard components connect to your usage tracking API and render interactive charts, tables, and metric cards that update automatically. Token consumption is broken down by model, endpoint, and user segment, giving you granular insight into where your AI budget is going. Cost projections use historical data and configurable pricing to forecast your monthly spend across all models.

The analytics engine tracks latency percentiles (p50, p95, p99) for every AI call, helping you identify performance bottlenecks before they affect users. Error rates are monitored with automatic alerting thresholds. The dashboard supports custom date ranges, comparison periods, and drill-down from summary metrics to individual request logs. All chart components are built on a headless architecture, meaning you can use AI Kit's data hooks with your own charting library. Export functionality supports CSV and JSON formats.

Use Cases

• Cost management for teams running multiple AI models, with per-model and per-feature cost breakdowns and budget alerts.
• Performance monitoring tracking latency, throughput, and error rates across all AI endpoints in real time.
• Usage-based billing for SaaS products that charge customers based on AI token consumption with detailed invoicing data.
• Capacity planning using historical trends and projections to right-size your AI infrastructure and model selection.

Integration Guide

Add usage tracking and dashboard components to your application:

import {
  UsageProvider,
  TokenChart,
  CostSummary,
  LatencyMetrics,
  useUsageStats,
} from '@ainative/ai-kit';

function Dashboard() {
  return (
    <UsageProvider apiUrl="/api/usage" refreshInterval={30_000}>
      <div className="grid grid-cols-3 gap-4">
        <CostSummary period="month" showProjection />
        <TokenChart groupBy="model" timeRange="7d" chartType="stacked-bar" />
        <LatencyMetrics percentiles={['p50', 'p95', 'p99']} />
      </div>
    </UsageProvider>
  );
}