Scripted mysteries are dead. Long live the Agent.
We've all played detective games where you just click Option A, B, or C until you win. Agentic Detective destroys that script. It is a browser-based murder mystery game where the suspects aren't reading from a database of pre-written lines, but are autonomous AI agents with their own personalities, hidden motives, and secrets. Players interrogate suspects in real-time using natural language to catch lies and solve the case before the 10-minute timer runs out.
We've all played detective games where you just click Option A, B, or C until you win. Agentic Detective destroys that script. It is a browser-based murder mystery game where the suspects aren't reading from a database of pre-written lines, but are autonomous AI agents with their own personalities, hidden motives, and secrets. Players interrogate suspects in real-time using natural language to catch lies and solve the case before the 10-minute timer runs out.
- Procedural Mystery Engine: Generates a unique "Case File" (Killer, Weapon, Motive) and scatters truth/lie nodes every round.
- Autonomous Suspect Agents: 5 distinct AI characters (e.g., The Nervous Butler, The Arrogant Socialite) driven by unique system prompts.
- The "Face Bank" System: Dynamically injects new names and backstories into a library of character portraits.
- Expressive Voice Integration: Real-time Text-to-Speech (TTS) using Eleven Labs for lifelike emotion and voice acting.
- The Ticking Clock: A strict 600-second (10-minute) timer that forces a "Game Over" or "Final Accusation."
- Accusation Interface: Dedicated UI to lock in a prime suspect and trigger dynamic endings.
- Suspect Stress System: Sentiment analysis that triggers voice tremors or defensive text when players get aggressive.
- Visual Evidence Board: An automated sidebar that "pins" key facts or alibis as they are discovered.
- Voice-to-Text Interrogation: Allow players to speak questions via microphone instead of typing.
- Agent-to-Agent Interaction: Bring two suspects into the same room to watch them argue or corroborate alibis.
Week 1: The Setup 📁
- General:
- Decide team roles (Frontend vs Backend)
- Set up GitHub repo & VS Code
- Set up API Keys (OpenAI/Gemini, Eleven Labs)
- Frontend:
- Finalize UI design (Noir aesthetic) and UX layout
- Backend:
- Design the "Murder Scenario" logic (Who, How, Why)
- Make test requests to LLMs to get JSON responses
Week 2: Hello World ⚡
- Frontend:
- Initialize React/Vite project
- Build basic layout: Chat box, input field, suspect image area
- Research CSS animations for "talking" effects
- Backend:
- Create "Hello World" API: Script that sends text to Eleven Labs and saves MP3
- Create
.envtemplate for team keys
Week 3: Core Mechanics ⚙️
- Frontend:
- Build "Chat Bubble" components
- Create "Timer" and "Game Over" screens
- Implement "Accusation" modal
- Backend:
- Prompt Engineering: Refine System Prompt so AI hides secrets/ignores irrelevant questions
- Work on mystery scenario generation logic
- Create "Face Bank" to load images dynamically
Week 4: The Voice 🎙️
- Frontend:
- Audio Integration: Player to play blobs/streams
- Style the "Suspect Portrait" area
- Backend:
- Streaming Audio: Implement code to play audio chunks as they arrive (Latency fix)
- Integrate "Flash v2.5" models for speed
- Build "Context Memory" (track last 5 messages)
Week 5: Game Loop 🔄
- Frontend:
- Build "Case File" intro screen
- Add visual feedback for "Stress" (optional heartbeat monitor?)
- Polish chat scrolling behavior
- Backend:
- Game Logic: Implement "Win Condition" check
- Randomize the killer for each new session
Week 6: Polish & Optimize ✨
- Playtesting: Test on different screen sizes
- Audio: Add sound effects (rain, typewriter clicks)
- Optimization: - Review API usage quotas
- Add caching for common phrases ("I don't know!")
- Fix backend integration bugs
Week 7: Security & Tutorials 🛡️
- UI: Polish "Win/Loss" screens, add "How to Play" overlay
- Security: Prevent "Prompt Injection" (players tricking the AI)
- Code: Final Code Review and bug fixes
Week 8-10: The Home Stretch 🎬
- Week 8: Freeze new features, create AI flow diagrams, monitor API costs.
- Week 9: Polish UI fonts/colors/shadows, fix critical crashes, ensure subscriptions active.
- Week 10: Practice, Practice, Practice for Demo Day!
IDE: VSCode
Version Control: Git / GitHub
Design: Figma
Frontend
- Framework: React (Vite)
- Styling: Tailwind CSS
- State Management: Zustand or React Context API
- Icons: Lucide React / Heroicons
Backend & AI
- Runtime: Node.js (Optional/Local)
- LLM (The Brain): Google Gemini (gemini-1.5-flash)
- TTS (The Voice): Eleven Labs (eleven_flash_v2_5)
- Orchestration (Optional): LangChain or AI SDK
React & Frontend:
Backend & AI APIs:
Orchestration (Optional):
Tutorials/Other:
- Vite Crash Course (YouTube)
- Tailwind CSS Crash Course (YouTube)
- Zustand Tutorial (YouTube)
- Google Gemini API Tutorial (YouTube)
- Build a voice agent with LangChain
- AI SDK Overview
- AI SDK in React Tutorial
- Urmi Popuri
- Ryan Edward
- Nandakishor Bejoy
- Swarna Sre Ganesh Shankar
Project Manager: Mohammad Mehrab
Industry Mentor: Sean Hassan
