Skip to content
EspañolEnglish
All components (244)

AI usage

AI · AIUsageDashboard

What it is and when to use it

The AI usage of an account: cost, input and output tokens (with what was served from the cache), the cost of each day per model, the breakdown per model and the limits with warnings.

When to use it

  • The billing or usage screen of a product with AI.
  • records carries one record per day and model: date, model, inputTokens, outputTokens, cachedTokens and cost in the currency of currency.
  • The period is chosen (7 or 30 days, or all), counted backwards from the last day with data so that the server and the browser paint the same.
  • limits puts one bar per limit (cost or tokens) that warns at 80 % and when exceeded.

When not to

  • A single figure next to a message: UsageBadge.
  • It only paints what it receives: cutting the service when a limit is exceeded is the server's job.

Keyboard: the period is a radio group (arrows); the rest is read.

Accessibility: the chart carries its table for the screen reader, the breakdown is a table with row headers and the limit warnings are written out.

Fine appearance: the figures in the table are right-aligned with fixed-width numbers.

What it looks like

Cost

€32.40

Input tokens

2.4M

90K from the cache

Output tokens

481K

Cost against the limit€32.40 of €40.00: close to the limit
  • claude-opus
  • claude-sonnet
  • claude-haiku
Cost per day and model
Dayclaude-opusclaude-sonnetclaude-haiku
Oct 26€6.80€0.00€0.00
Oct 27€8.90€0.00€1.40
Oct 28€0.00€3.20€0.00
Oct 29€7.50€0.00€0.00
Oct 30€0.00€0.00€1.70
Oct 31€0.00€2.90€0.00
By model
ModelInput tokensOutput tokensCostShare of the cost
claude-opus627K140K€23.2072%
claude-sonnet620K135K€6.1019%
claude-haiku1.1M206K€3.1010%

<AIUsageDashboard
  label="AI usage"
  records={registros}
  currency="EUR"
  limits={{ cost: 40 }}
  defaultPeriod="all"
/>

Props

Import it with import { AIUsageDashboard } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringWhich usage it is («Acme AI usage»). Required.
recordsrequiredreadonly UsageRecord[]One record per day and model. The periods are counted from the last day with data.
classNamestringMerged with the library classes; it does not replace them.
currencystringThe currency of the cost, in ISO 4217. Euros by default.
defaultPeriodUsagePeriod—
limitsUsageLimitsThe limits of the chosen period: a bar appears warning at 80 % and when exceeded.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: