Nikclas

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 | 中文

Contents

• 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

1. Overview

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.

2. Features

• 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 / AVOID tags 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 in localStorage for 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-motion support.

3. Tech stack

No backend is required. The app is a static build that calls the public pricing API directly from the browser.

4. Project structure

.
├── 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

5. Getting started

Prerequisites

• Node.js 20+ and npm.

Install

npm install

Run the dev server

npm run dev

Open http://localhost:5173/ in your browser.

Production build

npm run build
npm run preview

npm run build type-checks (tsc -b) and emits the static site to dist/, which can be served by any static host.

6. Pricing data

Source

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.

Known limitation: CORS

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.

Bundled snapshot (verified 2026-09-22, $/1M)

Median speeds shown on the cards are indicative static values; prices and context windows are the live fields.

Automated updates

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.

7. Available scripts

8. Automation

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.

9. Contributing

See CONTRIBUTING.md, including how to add a new pricing provider (collector, parser, tests, official source, validation, pull request).

10. License

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.