AI Game Comparison.

Compare playable browser games generated by frontier LLMs.

AI Game Comparison runs the same small game prompts through multiple models, saves the generated HTML, and turns the results into a playable benchmark gallery. Browse Snake, Tetris, and Breakout side by side, launch individual runs, and compare the token usage and estimated generation cost behind each model.

How it works

The benchmark asks each model to build the same three self-contained browser games. The generated HTML is committed as data, so the app can be deployed and browsed without calling any model APIs at runtime.

1. Prompt each model with the same game spec
2. Generate one single-file HTML game per model and game
3. Validate that the response looks like complete HTML
4. Record source model id, token counts, cost estimate, timestamp, and generated HTML
5. Compare runs in a dashboard with playable previews, focused game pages, and cost tables

What you can compare

• Games: Snake, Tetris-lite, and Breakout
• Runs: playable generated HTML in sandboxed iframes
• Costs: estimated USD cost from recorded input and output token counts
• Tokens: prompt, completion, and total token usage per run
• Makers: model maker logos derived from sourceModelId, not the routing provider
• Model summaries: average cost, total tokens, and cost multiple versus the cheapest model

Tech stack

• Framework: Next.js App Router
• UI: React 19, TypeScript, CSS Modules
• Animation: Motion
• Model providers: Together AI and OpenRouter
• Package manager: pnpm
• Data: committed JSON files in generated/

Under the hood

The app has two separate generation pipelines:

• scripts/generate-games.mjs generates Together-hosted model runs
• scripts/generate-openrouter-games.mjs generates OpenRouter model runs

Each script sends the same game prompts to its configured models, retries failed generations, validates that the model returned a complete HTML document, estimates cost from token usage and configured model prices, then writes a data file plus a generation report.

The website loads:

• generated/games.json for Together runs
• generated/openrouter-games.json for OpenRouter runs
• generated/together-report.json and generated/openrouter-report.json for generation reports

At runtime, lib/games.ts merges the data, normalizes Tetris-lite to Tetris for display, checks generated HTML for syntax issues, and prepares each game for iframe embedding.

Running locally

Cloning the repository

git clone https://github.com/Nutlope/ai-browser-games.git
cd ai-browser-games

Installing dependencies

pnpm install

Running the app

pnpm dev

Open http://localhost:3000.

Building for production

pnpm build
pnpm start

Running benchmarks yourself

The checked-in data is enough to run the app, but you can regenerate the benchmarks with your own API keys.

Together AI

Create a Together API key from Together AI, then run:

TOGETHER_API_KEY=your_key_here pnpm generate:games-together

This writes:

• generated/games.json
• generated/together-report.json

OpenRouter

Create an OpenRouter API key from OpenRouter, then run:

OPENROUTER_API_KEY=your_key_here pnpm generate:games-other

This writes:

• generated/openrouter-games.json
• generated/openrouter-report.json

Important benchmark notes

• Generation scripts overwrite their provider's generated data file.
• API keys are only needed when regenerating benchmark data.
• Generated game entries should stay self-contained: no external assets, fonts, libraries, or network requests.
• Costs are estimates based on token counts and the configured model prices in the scripts.
• There is no generation-duration field, so the app compares cost and tokens only.
• Keep refreshed JSON data committed if you want deployments to show the new benchmark results.

Project structure

app/
  page.tsx                 Home dashboard, leader strip, explorer, and model summary table
  [game]/page.tsx          Focused play route: /[game]?model=<id>
  globals.css              Monochrome design tokens and base styles

components/
  explorer.tsx             URL-backed filter, sort, and view state
  gallery.tsx              Game-grouped gallery view
  run-card.tsx             Browse tile with generated game preview
  compare-table.tsx        Sortable run table
  run-player.tsx           Inline player and same-game model swap rail
  leaderboard.tsx          Models by average cost
  logos.tsx                Single-color maker logos

generated/
  games.json               Together-generated game data
  together-report.json     Together generation report
  openrouter-games.json    OpenRouter-generated game data
  openrouter-report.json   OpenRouter generation report

lib/
  games.ts                 Game definitions, data merging, summaries, stats, and leaders
  makers.ts                sourceModelId namespace to maker mapping
  format.ts                Cost, token, and multiple formatting helpers
  runs-view.ts             Filtering and sorting logic
  game-html.ts             Generated HTML preparation and validation

scripts/
  generate-games.mjs       Together generation pipeline
  generate-openrouter-games.mjs

types/
  game.ts                  Shared generated game entry shape

Adding or changing models

1. Add or remove the model in the relevant generation script.
2. If it comes from a new company, add the maker mapping in lib/makers.ts.
3. Add a single-color logo in components/logos.tsx if the maker is new.
4. Regenerate the provider data with the relevant command.
5. Run pnpm build.

Design constraints

The site chrome is intentionally monochrome. Color should come from generated game iframes and maker logos only. Use the existing CSS Modules setup and design tokens in app/globals.css; do not add a styling framework for routine UI changes.

The app identifies models by the company that made the model, derived from sourceModelId. The provider field is just the routing platform and should not be shown as the maker.

Environment variables

Only benchmark generation needs API keys:

TOGETHER_API_KEY=your_together_api_key_here
OPENROUTER_API_KEY=your_openrouter_api_key_here

Do not commit .env files, API keys, or provider credentials.