Xzero UI
Pro library
Special componentsLLM cost calculator

LLM cost calculatorPro

A pricing calculator for LLM workloads. Set tokens per request, requests per day and prompt caching, and eight current models re-rank by monthly cost. Bars glide and prices roll as you drag.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/llm-cost-calculator
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/llm-cost-calculator

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { LlmCostCalculator, computeLlmCost, type LlmModelPrice } from "@/components/xzero/llm-cost-calculator/llm-cost-calculator";

// With no props: eight current models at sample prices, RAG workload.
export function PricingSection() {
  return <LlmCostCalculator />;
}

// Your own price list, wired to your plan picker.
const models: LlmModelPrice[] = [
  { id: "claude-sonnet-5-5", name: "Claude Sonnet 5.5", provider: "Anthropic", mark: <ClaudeMark />, input: 3, cachedInput: 0.3, output: 15 },
  { id: "gpt-6-luna", name: "GPT-6 Luna", provider: "OpenAI", mark: <OpenaiMark />, input: 0.25, cachedInput: 0.025, output: 3 },
];

export function ModelBudget({ prices, onPick }) {
  const [usage, setUsage] = useState({ inputTokens: 8000, outputTokens: 500, requestsPerDay: 20000, cached: true });
  return (
    <LlmCostCalculator
      models={prices.data ?? models}
      loading={prices.isLoading}
      error={prices.error?.message}
      onRetry={prices.refetch}
      usage={usage}
      onUsageChange={setUsage}
      cacheHitRate={0.7}
      description="List prices per 1M tokens, checked October 24, 2026"
      onSelectedChange={(id, model) => onPick(model, computeLlmCost(model, usage, { cacheHitRate: 0.7 }))}
    />
  );
}

API reference

LlmCostCalculator

A pricing calculator for LLM workloads in one panel. The header shows the selected model's monthly total in a large rolling figure. Below it, workload presets (Chat, RAG, Agent, Batch), three sliders for input tokens per request, output tokens per request and requests per day, and a Cached input switch that bills part of the input at the cache read rate. Every model sits in a ranked list, lowest cost first, with its real mark, a bar relative to the most expensive model and a rolling monthly cost; rows glide to their new rank as values change. Picking a row selects that model for the total and the footer breakdown (input, cached, output, per request) and its price line. With no props it compares eight current models at sample prices.

PropTypeDefaultDescription
modelsLlmModelPrice[]llmCostSampleModelsModels to compare. Each has an id, name, provider, an optional 16px mark, and prices in US dollars per 1M tokens: input, output and optional cachedInput (cache reads; without it cached tokens bill at the input price). An empty array shows the empty state.
usageLlmUsage–Controlled workload: { inputTokens, outputTokens, requestsPerDay, cached }. Pair with onUsageChange. Values between slider stops still compute exactly; the slider shows the nearest stop.
defaultUsageLlmUsagethe RAG preset (16,000 in, 500 out, 5,000 a day, cached)Starting workload when uncontrolled.
onUsageChange(usage: LlmUsage) => void–Called on every slider step, preset and cache toggle with the whole workload.
selectedstring–Controlled id of the selected model. Pair with onSelectedChange. An id that is not in models falls back to the cheapest model.
defaultSelectedstringthe second modelStarting selection when uncontrolled.
onSelectedChange(id: string, model: LlmModelPrice) => void–Called when someone picks a row by pointer or with the arrow keys.
presetsLlmUsagePreset[] | falsellmCostPresetsWorkload shortcuts shown as a segmented control, each { id, label, usage }. A Custom segment lights up when the sliders match no preset. Pass false to hide the row.
cacheHitRatenumber0.6Share of input tokens billed at the cached rate while Cached input is on, from 0 to 1. Shown beside the switch as a percentage.
daysPerMonthnumber30Days in a billing month.
loadingbooleanfalseShows placeholder rows with the list's exact geometry and disables the controls while prices load.
errorstring–Shows "Prices did not load" with this reason in place of the list. Pair with onRetry.
onRetry() => void–Adds a Try again button to the error state.
titlestring"Estimated monthly cost"Heading of the panel.
descriptionstring"Sample list prices per 1M tokens, October 2026"Line under the heading. Say where your prices come from and when they were checked.
notestring"Sample prices for illustration, not a quote. Calculated in your browser, nothing was sent."Fine print at the bottom of the panel.
classNamestring–Class on the root section.

computeLlmCost

The function the calculator uses, exported for server code, tests and invoices: computeLlmCost(model, usage, { cacheHitRate, daysPerMonth }) returns { input, cachedInput, output, total, perRequest } in dollars per month (perRequest per call).

No props.

Keyboard interactions

KeysAction
TabMoves through the workload presets, the three sliders, the Cached input switch, the selected model row, then Try again in the error state.
Arrow left / Arrow rightOn the presets, moves between workloads. On a slider, moves one stop.
Page up / Page down, Shift + ArrowOn a slider, moves two stops.
Home / EndOn a slider, jumps to the smallest or largest stop. In the model list, selects the cheapest or most expensive model.
Arrow up / Arrow downIn the model list, selects the next or previous model by rank and moves focus with it.
SpaceToggles Cached input.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in ai

Guidance for AI tools

LLM cost calculator: A pricing calculator for LLM workloads. Set tokens per request, requests per day and prompt caching, and eight current models re-rank by monthly cost. Bars glide and prices roll as you drag. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components