AiUsageCost

Code

import { AiUsageCost } from "@fadymondy/nasaq/web";export function Costs() {  return (    <AiUsageCost      currency="USD"      markup={0.2}      days={[        { date: "2026-09-28", billed: 12.4, unbilled: 0 },        { date: "2026-09-29", billed: 0, unbilled: 9.1 },      ]}      byModel={[{ id: "opus", label: "Opus 5.5", tokensIn: 2_400_000, tokensOut: 310_000, cost: 21.5 }]}    />  );}

AI Agents · beta

Live examples and controls: AiUsageCost in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/ai-usage-cost.json

What the AI features cost. Tiles give the total, the tokens, what has been billed, what is still unbilled and, when you pass a markup, the price the client pays. A stacked daily chart splits billed from unbilled spend. Tabs break the cost down by model, product or run, each with input and output token columns. TokenCostMeter shows one run: its input, cached and output tokens and, optionally, its spend against a budget.

When to useCopy Anchor Link

• A billing or admin screen that reports AI spend to an owner or an agency.
• A run detail that needs its token split and budget.

When not to useCopy Anchor Link

• Plan quotas and limits: use UsageMeter.
• General analytics with no cost or token idea: use BreakdownTable or TimeSeriesPanel.

ImportCopy Anchor Link

import { AiUsageCost, TokenCostMeter } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { AiUsageCost } from "@fadymondy/nasaq/web";

export function Costs() {
  return (
    <AiUsageCost
      currency="USD"
      markup={0.2}
      days={[
        { date: "2026-09-28", billed: 12.4, unbilled: 0 },
        { date: "2026-09-29", billed: 0, unbilled: 9.1 },
      ]}
      byModel={[{ id: "opus", label: "Opus 5.5", tokensIn: 2_400_000, tokensOut: 310_000, cost: 21.5 }]}
    />
  );
}

AnatomyCopy Anchor Link

AiUsageCost        data-slot="ai-usage-cost"
  StatGrid         total, tokens, billed, unbilled, client price
  Card + BarChart  stacked billed / unbilled per day
  Tabs             By model | By product | By run  (only tabs that have rows)
    BreakdownTable cost, share, change, In and Out token columns
TokenCostMeter     data-slot="token-cost-meter"

APICopy Anchor Link

AiUsageCostCopy Anchor Link

TokenCostMeterCopy Anchor Link

tokensIn, tokensOut, cached (part of tokensIn), cost, budget (number or null for none; with cost it adds a UsageMeter in money), currency, labels.

Pure helpers costTotals, withMarkup, sumTokens, tokenSplit, costPerMillion and totalTokens are exported for reports and tests.

ExamplesCopy Anchor Link

A run with a budget:

import { TokenCostMeter } from "@fadymondy/nasaq/web";

export const Run = () => <TokenCostMeter tokensIn={182_000} tokensOut={24_000} cached={120_000} cost={1.42} budget={2} />;

Arabic: use NasaqProvider locale="ar". Model and run names stay left to right; the chart axis mirrors.

AccessibilityCopy Anchor Link

The chart has a text name and the same data is in the breakdown tables. The token split bar is an image with a spoken summary and a visible legend with numbers. Trend on cost is text and an arrow, never colour alone.

RTL & i18nCopy Anchor Link

• Logical properties; the chart axes reverse in Arabic.
• Money and token counts use the active locale with Latin digits by default; row labels are dir="ltr".
• Every string has an English and Arabic default.

Styling & tokensCopy Anchor Link

• Billed uses --primary, unbilled --nq-warning; the token bar adds --nq-info for cached.
• Target [data-slot="ai-usage-cost"] or [data-slot="token-cost-meter"].

Do / Don'tCopy Anchor Link

• Do show billed and unbilled together; unbilled is what surprises people.
• Do pass previousTotal so the total has context.
• Don't put vendor logos in the label; names are text.

RelatedCopy Anchor Link

• UsageMeter
• BreakdownTable
• ModelRoutingEditor

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-ai-agents-ai-usage-cost--docs