An immersive, dark-themed AI-powered text adventure game built with Next.js 16, Groq (LLaMA 3.3 70B), FLUX.1 image generation, and Llama 4 Scout vision. Play through richly narrated stories across four unique worlds — type your actions, speak them aloud, or reveal real-world objects to your Dungeon Master via camera.
Deploy your own →
- 🎲 AI Dungeon Master — LLaMA 3.3 70B via Groq narrates your adventure with real-time streaming word-by-word
- 🖼️ AI Scene Painter — FLUX.1-schnell via HuggingFace generates atmospheric scene images as you explore
- 📸 Camera Vision — Show any real-world object to your camera; Llama 4 Scout identifies it and the DM weaves it into the story as a magical item
- 🌍 4 Unique Worlds — Dark Fantasy, Space Opera, Cosmic Horror, and Feudal Japan — each with its own tone, terminology, and starting scenario
- 🎤 Voice Input — Speak your actions using the Web Speech API (Chrome recommended)
- 🔊 Text-to-Speech Narration — The DM reads its narration aloud with a deep dramatic voice
- 📊 Live Stats Panel — Health bar, gold/coins, current location, and inventory update dynamically after every response
- 💾 Session Persistence — Auto-saves to localStorage after every DM response; resume your adventure any time
- 📖 PDF Storybook Export — Export your full adventure as a beautifully formatted PDF chronicle with cover art, ornamental dividers, and inventory page
- ↺ New Game — Start fresh while keeping your old session saved
| World | Tone | Starting Scene | Currency |
|---|---|---|---|
| ⚔️ Dark Fantasy | Tolkien meets Game of Thrones | The Leering Gargoyle Tavern | Gold |
| 🚀 Space Opera | Blade Runner meets Mass Effect | The Void Anchor, Kepler Station | Credits |
| 🕯️ Cosmic Horror | Lovecraft meets Stephen King | Blackmoor Manor, East Wing | Silver Coins |
| 🗡️ Feudal Japan | Kurosawa meets Ghost of Tsushima | Edo Outskirts, Moonlit Road | Ryo |
| Layer | Technology |
|---|---|
| Framework | Next.js 16.1.6 (App Router, Turbopack) |
| Language | TypeScript 5, React 19 |
| AI Narration | Groq API — LLaMA 3.3 70B Versatile |
| AI Scene Images | HuggingFace Inference — FLUX.1-schnell |
| AI Object Vision | Groq Vision — Llama 4 Scout 17B |
| PDF Export | jsPDF 4 |
| Voice Input | Web Speech API (browser native) |
| TTS Narration | Speech Synthesis API (browser native) |
| Styling | Inline CSS + CSS variables + Google Fonts (Cinzel, EB Garamond) |
| Session Storage | localStorage (auto-save/resume) |
| Deployment | Vercel |
dungeon-master/
├── app/
│ ├── page.tsx # Main game UI — all worlds, chat, stats, camera
│ ├── layout.tsx # Root layout + metadata
│ ├── globals.css # Base styles
│ └── api/
│ ├── gemini-proxy/
│ │ └── route.ts # Groq LLaMA streaming narration (SSE)
│ ├── generate-scene/
│ │ └── route.ts # HuggingFace FLUX.1 scene image generation
│ ├── analyze-object/
│ │ └── route.ts # Groq Llama 4 Scout camera object vision
│ └── storybook/
│ └── route.ts # Storybook data endpoint (used by PDF export)
├── public/ # Static assets
├── .env.local # API keys (git-ignored)
├── .env.example # Template for contributors
├── next.config.ts
├── tsconfig.json
└── package.json
- Node.js 18+
- A Groq API key — free tier, no credit card needed
- A HuggingFace token — free tier available
# 1. Clone the repository
git clone https://github.com/YOUR_USERNAME/dungeon-master.git
cd dungeon-master
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env.local
# Open .env.local and fill in your API keys
# 4. Start the development server
npm run devOpen http://localhost:3000 and choose your realm.
Create .env.local in the project root:
# Groq — LLaMA narration + Llama 4 Scout vision
# Get your key: https://console.groq.com
GROQ_API_KEY=your_groq_api_key_here
# HuggingFace — FLUX.1 scene image generation
# Get your token: https://huggingface.co/settings/tokens
HF_TOKEN=your_huggingface_token_here
⚠️ Never commit.env.local— it is already in.gitignore.
- Choose your world on the landing screen
- Enter the Realm — the DM sets the opening scene and generates an image
- Type your action and press ACT or hit Enter
- Speak your action — click 🎤 and talk (Chrome/Edge recommended)
- Reveal an object — click 📸, hold any real object to your camera, click REVEAL TO THE DM — it becomes a magical item woven into your story
- Watch your stats panel update live — health bar, gold, location, inventory
- Your progress auto-saves after every DM response — close the tab and resume later from the landing screen
- Click 📖 EXPORT to download a PDF storybook of your full adventure
- Click ↺ NEW to start a new adventure (your last session remains saved)
- Push your repo to GitHub
- Go to vercel.com/new and import the repo
- Add environment variables in Settings → Environment Variables:
GROQ_API_KEY=your_key HF_TOKEN=your_token - Click Deploy — live in ~60 seconds
| Route | Method | Purpose |
|---|---|---|
/api/gemini-proxy |
POST | Streams LLaMA 3.3 70B narration via Groq (SSE) |
/api/generate-scene |
POST | Generates scene image via HuggingFace FLUX.1 |
/api/analyze-object |
POST | Identifies camera object via Llama 4 Scout vision |
/api/storybook |
POST | Returns structured story data for PDF export |
Here's what's coming next to make the experience even more immersive:
Before the adventure begins, players will be able to name their hero and choose a class — Warrior, Rogue, Mage, or Ranger. Each class comes with unique starting stats, a signature item, and a distinct playstyle. The DM will reference the character's name and class throughout the story, making every adventure feel truly personal.
| Class | Playstyle | Starting Bonus |
|---|---|---|
| ⚔️ Warrior | Tank & melee combat | +20 HP, starts with a shield |
| 🗡️ Rogue | Stealth & trickery | +15 Gold, lock-pick in inventory |
| 🔮 Mage | Spells & arcane power | Spellbook, mana stat added |
| 🏹 Ranger | Ranged & survival | Bow + arrows, forest advantage |
Each world will have its own atmospheric soundscape generated via the Web Audio API — no external dependencies needed:
- ⚔️ Dark Fantasy — crackling tavern fire, distant thunder, sword clashes
- 🚀 Space Opera — low engine hum, alien station ambience, laser echoes
- 🕯️ Cosmic Horror — wind through stone halls, dripping water, unsettling drones
- 🗡️ Feudal Japan — crickets, wind through bamboo, temple bells
The game will support multiple narration languages so players around the world can adventure in their native tongue. The DM prompt and UI will adapt based on the selected language:
- 🇬🇧 English (current)
- 🇪🇸 Spanish
- 🇫🇷 French
- 🇩🇪 German
- 🇯🇵 Japanese
- 🇮🇳 Hindi
- 🇧🇷 Portuguese
- Interactive Map — auto-generates a location map as you explore
- 👥 Co-op Mode — two players share one story, taking turns acting
- 🧠 Long-term Memory — the DM remembers choices from past sessions
- 🌐 More Worlds — Cyberpunk, Wild West, Underwater Kingdom, and more
- 🏆 Achievement System — unlock badges for brave/cowardly/clever choices
Found a bug or have an idea? Open an issue — I'd love to hear it.
MIT © 2025 — fork it, remix it, build your own realm.
⚔ May your rolls be true and your health bar never reach zero ⚔