Overview

Token Counter is a free, client-side web tool for anyone writing prompts against paid LLM APIs. Paste a prompt, build a multi-turn chat or load a text file, and it shows the token count, how much of the model's context window it fills, and what the request would cost. Everything runs in the browser, so prompt text is never sent to a server.

My role

I built the tool end to end: the tokenizer layer, the live pricing integration, the React interface, the SEO and content pages, and the GitHub Actions pipeline that deploys it to GitHub Pages.

What it does

• Three modes: a single prompt box, a chat composer with system, user and assistant messages, and a compare table that prices the same text across every loaded model, sortable by tokens, cost or context use.
• Exact counts for OpenAI models using the o200k_base encoding, with a token-by-token visual strip; other providers get clearly labelled estimates.
• Cost and context panel showing input, output and total cost for a chosen output length, plus a context-window usage bar.
• Sample texts, text-file upload up to 2 MB, one-click copy of a summary line, and a light and dark theme.

How it's built

The app is a Next.js 16 App Router project (React 19, TypeScript, Tailwind CSS 4) exported as a fully static site. OpenAI counts come from js-tiktoken; Claude, Gemini, Llama, Mistral, xAI and DeepSeek are approximated with per-provider characters-per-token ratios, since those vendors don't publish a browser tokenizer. Chat mode adds a small per-message overhead to approximate the role tags chat APIs insert. Model prices and context sizes are fetched in the browser from OpenRouter's public models endpoint and mapped onto the seven supported providers. The site also ships explainer articles, a sitemap, robots.txt, JSON-LD structured data and Open Graph images, with analytics and ads that load only when configured.

Highlights

• Resilient live pricing: the OpenRouter catalogue is cached in localStorage for six hours, zero-price and zero-context entries are filtered out, and if the request fails the app silently falls back to 21 built-in price tiers, so counts and costs keep working.
• Efficient comparisons: the compare table counts tokens once per tokenizer type rather than once per model, because every model maps to one of six tokenizers.
• Cached encoders: tiktoken encoders are built once and reused across keystrokes, and the token strip decodes each token id back to text so users can see exactly where boundaries fall.