Stop overpaying for tokens. Nikclas compares $/1M token prices across frontier AI models so you can ship the same quality for less.
Read this in: Espanol | Francais | Deutsch | 中文
- 1. Overview
- 2. Features
- 3. Tech stack
- 4. Project structure
- 5. Getting started
- 6. Pricing data
- 7. Available scripts
- 8. Automation
- 9. Contributing
- 10. License
Nikclas is a single-page React application that answers one question: which AI model does the same job for the least money?
It opens with a thesis hero (live price board sorted by input $/1M) and continues with a head-to-head comparator: pick a provider and a model on each side, see the price gap, and get a verdict with the exact saving per 1M input tokens.
All prices load live from the LiteLLM Model Catalog API.
- Live price board — the 4 highest-traffic flagships
(gpt-4o-mini,gpt-4o,claude-sonnet-4-6,deepseek-chat), sorted by input $/1M with log-scale bars,BEST/AVOIDtags and a live / syncing / cached status indicator.
- Head-to-head comparator — provider and model selectors on both sides, swap button, per-model datasheets (input, output, context, speed), a central savings readout and a plain-language verdict.
- Live pricing with honest fallback — prices are fetched from
https://api.litellm.ai/model_catalog/{model_id}, cached inlocalStoragefor 24h, and fall back to a bundled snapshot (verified 2026-09-22) while loading or offline. The UI always states which source is on screen.
- Tech-styled identity — Chakra Petch display type, Inter body text, JetBrains Mono data type; deep-navy blueprint theme with signal-cyan (compute) and amber (savings) accents.
- Accessible by default — semantic landmarks, labelled form controls,
visible keyboard focus, live regions for price updates, and
prefers-reduced-motionsupport.
No backend is required. The app is a static build that calls the public pricing API directly from the browser.
.
├── components/
│ ├── hero/
│ │ ├── HeroSection.tsx # Thesis, CTAs, stats + board layout
│ │ └── PriceBoard.tsx # Live price-board console
│ └── compare/
│ ├── CompareSection.tsx # State, savings math, verdict
│ ├── CompareForm.tsx # Provider + model selectors, swap
│ └── ModelCard.tsx # Model datasheet card
├── src/
│ ├── lib/
│ │ ├── litellm.ts # Catalog, API client, cache, hook
│ │ └── format.ts # Formatting, vendor labels, bar scales
│ ├── App.tsx # Composes HeroSection + CompareSection
│ ├── main.tsx # React entry point
│ └── index.css # Tailwind theme, fonts, animations
├── docs/
│ ├── README.es.md # Spanish translation
│ ├── README.fr.md # French translation
│ ├── README.de.md # German translation
│ └── README.zh.md # Chinese translation
├── public/ # Static assets (banner, favicon, icons)
├── index.html # Fonts, meta, title
└── LICENSE # GNU General Public License v3.0
- Node.js 20+ and npm.
npm installnpm run devOpen http://localhost:5173/ in your browser.
npm run build
npm run previewnpm run build type-checks (tsc -b) and emits the static site to
dist/, which can be served by any static host.
GET https://api.litellm.ai/model_catalog/{model_id} returns per-token
costs (input_cost_per_token, output_cost_per_token). The app
multiplies them by 1,000,000 to display $/1M tokens, and reads
max_input_tokens for the context window. Model metadata refreshes from
LiteLLM's catalog on every load (deduplicated, then cached 24h).
The API free tier allows 100 requests/day per IP without a key; a fresh load of the full 15-model catalog uses 15 requests.
api.litellm.ai does not send an Access-Control-Allow-Origin header
(verified with and without an Origin header; OPTIONS returns 405),
so browsers may block the live response. In that case the app renders the
bundled snapshot and labels it as cached. Serving the app behind your own
backend or proxy that forwards to api.litellm.ai restores live data
without changing any component.
Median speeds shown on the cards are indicative static values; prices and context windows are the live fields.
There is no database: data/pricing.json is the current dataset and
git log -- data/pricing.json is the price history. Every 6 hours the
pricing-update workflow runs the collector (npm run collect:pricing),
validates the result and opens a pull request titled
chore: update AI model pricing when prices moved — main is never
written to directly. Jumps of 3x or more are kept in the PR but marked
[possible-anomaly] for human review. Source links are re-checked
weekly by the link-check workflow, which opens an issue if a source
breaks.
Dependabot updates npm and GitHub Actions dependencies weekly
(.github/dependabot.yml, no auto-merge). No secrets are required:
the pricing API needs no key and automation uses the built-in
GITHUB_TOKEN with least-privilege permissions.
See CONTRIBUTING.md, including how to add a new pricing provider (collector, parser, tests, official source, validation, pull request).
This project is licensed under the GNU General Public License v3.0 or later (GPLv3+). See LICENSE for the full text.
You are free to run, study, share and modify this software, provided that any distributed work remains under the same license and its source code stays available.