Cost Display

ngx-prompt-kit original — not part of ibelick/prompt-kit

Renders the running USD/EUR/CHF/JPY/… cost of an LLM exchange. Pricing is consumer-supplied — pass the per-million rates and the token counts, the component handles the math and the locale-aware formatting.

Examples

Compact · USD

Default. Just the total. Realistic GPT-4o pricing — $2.50/1M input, $10.00/1M output. Locale pinned to en-US for the canonical $-prefix format; omit [locale] to use the runtime default.

$0.012

<pk-cost-display
  locale="en-US"
  [inputTokens]="1243"
  [outputTokens]="892"
  [inputPricePer1M]="2.50"
  [outputPricePer1M]="10.00"
/>

Detailed · EUR

display='detailed' shows the input/output breakdown. Currency switches to EUR — symbol placement and decimal handling come from the locale.

0,0111 € (in: 0,0029 €, out: 0,0082 €)

<pk-cost-display
  display="detailed"
  currency="EUR"
  locale="de-DE"
  [inputTokens]="1243"
  [outputTokens]="892"
  [inputPricePer1M]="2.30"
  [outputPricePer1M]="9.20"
/>

Session summary · CHF

display='session-summary' is a chip designed for status-bar placement. costPrecision=2 to land on the natural 'this session' rounding.

CHF 0.25 this session

<pk-cost-display
  display="session-summary"
  currency="CHF"
  locale="de-CH"
  [costPrecision]="2"
  [inputTokens]="42_000"
  [outputTokens]="18_000"
  [inputPricePer1M]="2.20"
  [outputPricePer1M]="8.80"
/>

Zero-decimal currency · JPY

Intl.NumberFormat handles currency-specific quirks. JPY has no minor unit — the formatter drops the decimals automatically. Same component, no special-casing in your code.

￥1,828

￥1,828 (in: ￥472, out: ￥1,356)

<pk-cost-display
  currency="JPY"
  locale="ja-JP"
  [inputTokens]="1_243_000"
  [outputTokens]="892_000"
  [inputPricePer1M]="380"
  [outputPricePer1M]="1520"
/>

With cost limit

Set [costLimit] to drive the four-tier color state — muted under 75%, amber 75–90%, destructive 90–100%, bold destructive past 100%. (overLimit) emits once per crossing.

Normal · 50%

$1.25

Warn · 80%

$2.00

Danger · 95%

$2.375

Over · 105%

$2.625

<pk-cost-display
  [inputTokens]="500_000"
  [outputTokens]="100_000"
  [inputPricePer1M]="2.50"
  [outputPricePer1M]="10.00"
  [costLimit]="2.50"
/>

Installation

Add the cost-display component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:cost-display

Component API

PkCostDisplay

Prop	Type	Default	Description
inputTokens	`number`	0	Prompt/input tokens consumed.
outputTokens	`number`	0	Completion/output tokens consumed.
inputPricePer1M	`number \| null`	null	USD per 1M input tokens (null hides cost). Consumer-supplied — see Notes.
outputPricePer1M	`number \| null`	null	USD per 1M output tokens (null hides cost). Consumer-supplied — see Notes.
currency	`string`	"USD"	ISO 4217 currency code (e.g. 'USD', 'EUR', 'CHF', 'GBP', 'JPY'). Symbol placement and decimal handling derive from the locale.
locale	`string \| undefined`	—	BCP-47 locale tag (e.g. "en-US", "de-CH", "ja-JP"). Defaults to the runtime locale.
costPrecision	`number`	4	Maximum decimal places. Default 4 handles fractions of a cent; drop to 2 for $0.43-style output.
costLimit	`number \| null`	null	Optional max cost in the same currency. Drives the four-tier color state and the (overLimit) output.
display	`"compact" \| "detailed" \| "session-summary"`	"compact"	compact: bare total. detailed: total + input/output breakdown. session-summary: chip-style with "this session" suffix.
showBreakdown	`boolean`	false	Force the (in: $X, out: $Y) breakdown in compact / session-summary modes. Detailed mode shows it by default.
class	`string`	—	Extra classes for the host.

Outputs

Prop	Type	Default	Description
overLimit	`(over: boolean) => void`	—	Fires once each time totalCost crosses costLimit (true on cross-over, false on cross-back).