Back to Games

Minefrog Chess ♟️

A fully 3D chess experience with voxel-style graphics and powerful AI opponents. Minecraft meets chess, rendered in your browser.

React Three FiberStockfishThree.jschess.js3D Graphics

The Journey: From LLM to Stockfish

We started with an ambitious idea: what if we powered the chess AI with Claude? Not a traditional engine that brute-forces millions of positions, but a language model that understands chess concepts like development, centre control, and tactical patterns.

The experiment was fascinating. Claude played creative, human-like chess. It understood opening principles and could explain its reasoning. But there was one problem: it wasn't hard enough. Even on "hard" mode with a comprehensive chess-focused system prompt, decent players could beat it consistently.

So we pivoted. Stockfish—the world's strongest open-source chess engine—now powers the AI opponents. The result? A chess game that can actually challenge you, from casual players to club-level competitors. Sometimes the pragmatic choice is the right one.

Technical Deep Dive

🎮

3D Voxel Graphics

The game is rendered using React Three Fiber—React's binding for Three.js. Each chess piece is modelled as a collection of voxels (3D pixels), creating that distinctive blocky Minecraft aesthetic. The board floats in a stylised environment with ambient lighting and subtle fog. Players can orbit, zoom, and pan the camera to view the game from any angle. All of this runs smoothly in a web browser with no plugins required.

🤖

Stockfish Integration

Stockfish is the strongest open-source chess engine in the world, rated well above grandmaster level. We run it via WebAssembly, meaning the entire engine executes client-side in your browser—no server calls, no latency, no API costs.

Difficulty levels are controlled by limiting Stockfish's search depth and time. Easy mode thinks for a fraction of a second and looks only a few moves ahead. Hard mode unleashes more of Stockfish's power, providing a genuine challenge for experienced players. The engine communicates via the UCI protocol, receiving positions and returning best moves.

🧪

The LLM Experiment

Our original version used Claude as the chess AI. We sent the board position (FEN notation) and legal moves to Claude's API, with carefully crafted prompts for each difficulty level. Easy mode played casually; hard mode received a comprehensive system prompt covering opening theory, tactics, and strategy.

Claude played interesting, creative chess—but it topped out around an intermediate level. LLMs understand chess conceptually, but they can't match an engine's tactical precision. The experiment taught us a lot about AI capabilities, and maybe one day LLMs will be strong enough. For now, Stockfish reigns.

Chess Logic with chess.js

All game rules are handled by chess.js, a battle-tested library for chess logic. It validates every move, handles special cases like castling and en passant, detects check/checkmate/stalemate, and maintains the game history. The board state syncs between chess.js (logic), Stockfish (AI), and React Three Fiber (rendering) seamlessly.

👥

Multiple Game Modes

Play against AI at three difficulty levels, or pass the device to a friend for local multiplayer. Since Stockfish runs client-side, AI moves are near-instant—no waiting for API responses. Local multiplayer simply alternates turns with no AI involvement—perfect for playing on a tablet over lunch. Both modes use the same 3D board and controls.

📷

Orbit Camera Controls

The 3D camera uses Three.js OrbitControls, adapted for touch and mouse input. Drag to orbit around the board, pinch or scroll to zoom, and two-finger drag to pan. The camera smoothly animates between positions with damping for a polished feel. On mobile, we default to a slightly higher camera angle for better visibility of all pieces.

🏆

Speed Leaderboard

The leaderboard tracks the fastest victories against each AI difficulty. Beat hard mode in under 30 moves? You'll be immortalised on the board. The system records your game time and move count, ranking players by efficiency. It adds a competitive layer to what could otherwise be a solitary experience.

What We Learned

LLMs Have Limits

Claude can understand and discuss chess at a sophisticated level, but playing strong chess requires tactical calculation that LLMs can't match. They recognise patterns but miss concrete lines. Fascinating for experimentation, not ready for competitive play.

WebAssembly is Powerful

Running Stockfish entirely in the browser via WASM means no server costs, no latency, and no rate limiting concerns. The same engine that powers chess.com runs right in your tab. The web platform continues to impress.

Fail Fast, Pivot Smart

We spent time on the LLM approach, learned it wasn't strong enough, and switched. No regrets—the experiment was valuable and the pivot was clean. Sometimes the pragmatic choice beats the innovative one.

3D in the Browser Works

React Three Fiber makes 3D accessible to React developers. Our voxel chess board runs smoothly on phones, tablets, and desktops. The days of needing Unity or native apps for 3D games are fading.

Ready to Play?

Experience 3D chess in your browser. Can you beat Stockfish?

Play Minefrog Chess♟️