Watch a hungry alien monster eat your AI tokens in real time.
TokenMunch is an open-source, single-file AI token consumption monitor. It turns token usage into a living bioluminescent ecosystem — a "token farm" — where a glowing alien monster roams a dark world and eats tokens as the AI responds. Supports Anthropic (Claude), OpenAI (GPT), and Google (Gemini) with live streaming. No server, no install: just open and go.
- Three providers — Anthropic, OpenAI, Google — switch in one click
- Live streaming — responses stream token-by-token; the monster eats in real time
- Bioluminescent farm — golden input orbs, cyan output orbs, nebula sky, floating particles
- Monster that reacts — hunts orbs when streaming, wanders and blinks when idle; speed = tok/sec
- Level-up — monster grows every 1000 tokens; power-up orbs every 500
- Glass HUD — live input/output tokens, cost ($), speed (tok/sec), level, lives
- Single file — pure HTML + CSS + JS, zero dependencies, no build step
- Privacy first — API keys in localStorage per provider, never transmitted elsewhere
- Fork github.com/SristiNative/TokenMunch
- Settings → Pages → Deploy from branch main (root)
- Open https://sristinative.github.io/TokenMunch
- Paste your API key and start feeding.
Live demo: https://sristinative.github.io/TokenMunch
git clone https://github.com/SristiNative/TokenMunch.git
cd TokenMunch
open index.htmlNo server required. For Safari + proxy, run python3 proxy.py and enable Proxy in the header.
Deploy with one click:
| Provider | Models | Status |
|---|---|---|
| Anthropic | Claude Sonnet 4.6, Claude Haiku 4.5, Claude Opus 4.6 | ✅ Supported |
| OpenAI | GPT-4o, GPT-4o mini, GPT-3.5 Turbo | ✅ Supported |
| Gemini 2.0 Flash, Gemini 1.5 Flash, Gemini 1.5 Pro | ✅ Supported |
| Browser | Local file | GitHub Pages |
|---|---|---|
| Chrome | ✅ Works | ✅ Works |
| Firefox | ✅ Works | ✅ Works |
| Safari | ✅ Works | |
| Edge | ✅ Works | ✅ Works |
Safari restricts API calls from local files due to CORS policy. Deploy to GitHub Pages for full Safari support — it's free and takes 2 minutes (see Quickstart above).
The farm. A full-height Canvas draws the world: gradient sky, nebula blobs, twinkling stars, ground with a soft glow, mist, and floating particles. Input tokens spawn as golden orbs on the ground when you send a message; output tokens fall from the top as cyan orbs as the stream delivers tokens. Every 500 tokens a power-up orb appears; eating it triggers a ripple. All animation runs at 60fps with requestAnimationFrame.
The monster. A smooth, gradient-drawn creature (no pixel art): body, glowing eyes, antennae, tentacles. It idles (wanders, blinks), goes alert when orbs appear, and hunts when streaming — moving with lerp toward the nearest orb. Its speed scales with real tokens/sec. When it eats an orb, particles burst; when all orbs are cleared, it celebrates. Every 1000 tokens it levels up and grows by 1px (max +8px).
The streaming engine. Your message is sent to the chosen provider’s API (Anthropic, OpenAI, or Google) with stream: true. SSE chunks are parsed; token deltas and usage are read from each provider’s response shape. Costs are computed client-side from a built-in pricing table. No backend: the browser talks directly to the provider using your key.
Single-file architecture. The entire app is one index.html: HTML structure, CSS (design tokens, typography, glass panels), and JavaScript (PROVIDERS config, fetch/stream logic, canvas drawing, Web Audio sounds). No npm, no bundler. Fork it, change it, deploy it anywhere.
Pull requests and issues are welcome. Here’s how to help:
Add a new provider. Extend the PROVIDERS object in index.html with the same shape:
providerId: {
name: 'Display Name',
baseUrl: 'https://api.provider.com/...',
models: { 'model-id': { label: 'Model Name', input: 1.25, output: 5 } },
buildHeaders: (key) => ({ 'Authorization': `Bearer ${key}`, ... }),
buildBody: (messages, model) => ({ model, messages, stream: true, ... }),
parseChunk: (data) => data.choices?.[0]?.delta?.content ?? '',
parseUsage: (data) => ({ input: data.usage?.prompt_tokens, output: data.usage?.completion_tokens }),
streamFormat: 'sse',
usageInMessageDelta: false,
}Update pricing. Edit the input and output prices (per 1M tokens) in each model entry. Check PRICING_UPDATED at the top of index.html when you last synced with provider docs.
Report issues. Open an issue on GitHub. Include browser, provider, and whether you’re using the proxy.
- Ghost enemy that appears when session cost > $0.10
- Budget cap alerts with visual warning
- Export session as JSON or CSV
- Conversation history with token replay
- Mobile responsive layout
- Ollama / local model support
- Dark/light theme toggle
- Multiple monster skins
- API keys are stored only in your browser’s
localStorage. They are never sent to any server we control. - No analytics, no tracking, no third-party scripts. The app runs entirely in your browser.
- API requests go directly from your browser to Anthropic, OpenAI, or Google. You can audit the single HTML file to verify.
- Do not share your API key or screenshots that show it.
MIT. Use it, fork it, ship it.
Made with 👾 and an unreasonable number of tokens