E. AI & Chat

AI Usage

Token usage, spend by model, rate limits, usage by member, budget and alerts with an overage notice, and the request log.

6 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add ai/ai-usage

01Token usage overview

Uses: KPIGroup · StatCard · ChartCard · LineChart · Table

components/blocks/ai/ai-usage/01-token-usage.tsx

Uses: KPIGroup · ChartCard · PieChart · BarChart · Table

components/blocks/ai/ai-usage/02-spend-by-model.tsx

Uses: KPIGroup · UsageMeter · Table · Badge

components/blocks/ai/ai-usage/03-rate-limits.tsx

Uses: KPIGroup · ChartCard · BarChart · Table

components/blocks/ai/ai-usage/04-usage-by-member.tsx

Uses: Alert · UsageMeter · Switch · Table

components/blocks/ai/ai-usage/05-budget-alerts.tsx

Uses: KPIGroup · Segment · Table · Badge

components/blocks/ai/ai-usage/06-request-log.tsx