8 classic games powered by Claude AI — where every opponent has a personality, adapts to your skill, and narrates every move.
MindMatch is a web-based gaming platform where you play classic board and social games against an AI opponent built on Claude (Anthropic). The AI doesn't just make optimal moves — it reacts, taunts, narrates, and adapts its difficulty to your evolving skill level in real time.
Each AI has a distinct character (Aria, Rex, Myst, Jax, Sage) with its own voice, speech style, and personality. Every session ends with honest coaching from Claude on how to improve.
Browse all 8 games with category filters and search.
Pick one of 5 AI personalities with unique avatars.
Live AI chat panel with character reactions, move history, and analysis.
- Claude AI Opponents — Every opponent runs on Claude with a distinct personality that adapts to each move you make
- 5 AI Characters — Aria (Friendly), Rex (Competitive), Myst (Mysterious), Jax (Funny), Sage (Wise) — each with unique voice, tone, and avatar
- Adaptive Difficulty — AI reads your skill profile after every game and adjusts automatically. Choose Easy / Medium / Hard / Auto
- Live AI Reactions — Real-time chat panel shows the AI's thoughts, taunts, and analysis as you play
- Text-to-Speech — AI reactions are spoken aloud using the browser's SpeechSynthesis API, with per-character voice pitch and rate
- Sound Effects — Web Audio API synthesized sounds for clicks, AI speech, wins, losses, dice rolls, and card flips (no external audio files)
- Post-Game Analysis — Claude reviews your moves and gives specific coaching after every session
- Skill Tracking — Skill scores and win rates tracked per game; see your playstyle evolve over time
- Move History — Full move log with AI reactions per turn
- Light / Dark Theme — Warm cream light theme by default, toggle to dark; persists across sessions
- Lottie Animations — Win celebration, AI thinking indicator, and dice roll animations
- Local Multiplayer — Pass-and-play mode for select games
- Mixed Mode — Humans + AI together for social games
| Game | Category | Description |
|---|---|---|
| Tic Tac Toe | Strategy | Classic 3×3 grid. Outsmart the AI or challenge a friend |
| Connect Four | Strategy | Drop pieces and connect 4 in a row. Alpha-beta AI plays optimally on Hard |
| Snakes & Ladders | Luck | Race to 100 with AI companions who narrate every twist and turn |
| 20 Questions | Deduction | AI thinks of something; you have 20 yes/no questions to guess it |
| Mastermind | Deduction | Crack the AI's hidden color code in as few guesses as possible |
| Word Duel | Deduction | Scrabble-style word battle against an AI that knows every word |
| Two Truths & A Lie | Social | Can you catch the AI bluffing? Can it catch you? |
| Mafia / Werewolf | Social | Multi-agent social deduction — AI plays all the other roles |
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| AI | Anthropic Claude (@anthropic-ai/sdk) |
| Auth & DB | Supabase (@supabase/ssr, @supabase/supabase-js) |
| State | Zustand |
| Animations | Lottie React, Framer Motion |
| Charts | Recharts |
| Confetti | canvas-confetti |
| Icons | Lucide React |
| Styling | CSS variables (inline styles) + Tailwind CSS |
| Fonts | Inter (body), Cinzel (headings/character names) |
| TTS | Browser SpeechSynthesis API |
| Sound | Web Audio API (synthesized, no audio files) |
- Node.js 18+
- A Supabase project
- An Anthropic API key
git clone https://github.com/your-username/mindmatch.git
cd mindmatch
npm installCreate a .env.local file in the project root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
ANTHROPIC_API_KEY=your_anthropic_api_keySet up the following tables in your Supabase project:
profiles— user profile, username, avatargame_sessions— completed game recordsskill_profiles— per-user per-game skill scores
npm run devOpen http://localhost:3000.
npm run build
npm startmindmatch/
├── app/
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout + theme script
│ ├── globals.css # CSS variables, themes, keyframes
│ ├── (auth)/
│ │ ├── login/page.tsx
│ │ └── signup/page.tsx
│ └── (app)/
│ ├── lobby/page.tsx # Game selection
│ ├── profile/page.tsx # Stats and history
│ └── games/[gameId]/page.tsx
├── components/
│ ├── layout/
│ │ └── Navbar.tsx
│ └── game/
│ ├── AIChat.tsx # AI reactions panel
│ ├── CharacterAvatar.tsx # DiceBear bot avatars
│ ├── GameBoard.tsx # Game shell / layout
│ ├── PreGameModal.tsx # Mode / character / difficulty picker
│ ├── PostGameSummary.tsx # Win/loss screen + coaching
│ └── MoveHistory.tsx
├── components/games/
│ ├── TicTacToe/
│ ├── ConnectFour/
│ ├── SnakeLadder/
│ ├── Mastermind/
│ ├── WordDuel/
│ ├── TwentyQuestions/
│ ├── TwoTruths/
│ └── Mafia/
├── lib/
│ ├── characters.ts # AI personality configs
│ ├── sounds.ts # Web Audio synthesized SFX
│ ├── tts.ts # SpeechSynthesis wrapper
│ └── games/
│ └── registry.ts # Game metadata
├── stores/
│ ├── gameStore.ts
│ ├── playerStore.ts
│ └── uiStore.ts
├── public/
│ ├── mindmatch_logo.svg
│ ├── games/ # Game card illustrations (SVG)
│ └── animations/ # Lottie JSON files
└── middleware.ts # Auth route protection
| Character | Personality | Style |
|---|---|---|
| Aria | Friendly | Encouraging, warm, supportive |
| Rex | Competitive | Aggressive, boastful, intensely focused on winning |
| Myst | Mysterious | Cryptic, slow-spoken, philosophical |
| Jax | Funny | Jokes, puns, chaotic energy |
| Sage | Wise | Calm, thoughtful, offers strategic insight |
Each character has a unique TTS voice rate and pitch, distinct avatar (DiceBear bottts), speech bubble styling, and glow animation color when speaking.
| Level | Behavior |
|---|---|
| Easy | AI makes deliberate mistakes |
| Medium | Balanced challenge |
| Hard | AI plays optimally |
| Auto | Adapts to your current skill score |
MIT