Model Usage

An area chart visualizing AI model usage and cost trends over time with custom tooltip breakdown and tab switching between tokens and costs.

AI model token consumption and inference cost tracking across LLMs (GPT-4o, Claude 3.5 Sonnet, Llama 3).
Tab switching between raw token counts and dollar expenses over time.
AI developer platforms, agent orchestration consoles, and LLM billing dashboards.

Prop	Type	Default	Description
`data`	`ModelUsageDataPoint[]`	`defaultTokenData`	Array of daily token usage data points across models.
`costData`	`ModelUsageDataPoint[]`	auto-calculated	Optional array of daily cost data points. Calculated automatically from `data` if not provided.
`className`	`string`	—	Optional custom CSS classes for the card container.

Field	Type	Description
`date`	`string`	Calendar date formatted as `YYYY-MM-DD`.
`gpt4o`	`number`	Token volume or dollar expense for GPT-4o.
`claude`	`number`	Token volume or dollar expense for Claude 3.5 Sonnet.
`gemini`	`number`	Token volume or dollar expense for Gemini 1.5 Pro.
`llama`	`number`	Token volume or dollar expense for Llama 3.3.