Cyber Detective

Welcome screen
The beginning of the case
Placing suspects and clues on a board
More suspects and clues on board
Questioning a suspect via chat
Failed
Success

Inspiration

Cyber Detective was inspired by classic noir investigations and modern AI storytelling. we wanted players to feel like real detectives: collecting evidence, testing alibis, and making high-stakes accusations in dynamic, replayable cases.

What it does

Cyber Detective generates playable cyber-noir mystery cases with suspects, locations, timelines, clues, and a hidden truth.
Players investigate locations, uncover evidence, interrogate suspects in dialogue, and decide who to accuse based on logic and connections.

How We Built It

Cyber Noir Detective is a fusion of procedural AI storytelling and interactive UI.

1. Neural Core (AI Logic)

Case Generation:
We use gemini-3-flash-preview with structured JSON schemas to create logically consistent mysteries, ensuring clues link correctly to the guilty suspect.
Dynamic Interrogation:
Every suspect is a stateful chat instance using ai.chats.create, with system instructions defining their guilt, alibi, and personality.

2. Visual Synthesis

On-the-fly Assets:
We leverage gemini-2.5-flash-image to generate photorealistic character portraits, rainy environments, and macro forensic photography for clues.
Consistency:
Prompt engineering ensures a cohesive Cyan/Magenta/Noir aesthetic across all AI-generated images.

3. The Murderboard

SVG Connectivity:
Links are rendered as dynamic SVG Bézier curves. Logic checks trigger visual feedback: Cyan for correct deductions and Magenta for red herrings.
Tactile UI:
Built with React and Tailwind CSS, featuring physics-inspired “push-pin” mechanics and draggable Polaroid cards.

4. Immersive Design

Aesthetic:
Glass-morphism, CRT noise filters, and a custom cinematic landing sequence.
Performance:
Optimized React state management handles the infinite-canvas board and real-time LLM streaming.

Challenges we ran into

First of all, we haven't worked with a Gemini model before.

API reliability and quotas: I hit 429 (quota exceeded) and 503 (model overloaded), which made live demo reliability difficult.
Interrogation tuning: getting believable suspect dialogue took multiple prompt and parameter iterations to avoid cut-off or inconsistent responses.
Time constraints: I prioritized core mechanics and reliability over deep UI polish.

Accomplishments that we're proud of

Built a complete playable detective loop with dynamic case generation.
Implemented validation and recovery around LLM outputs.
Added fallback architecture so the game remains functional even under API instability.
Delivered interactive suspect interrogation that materially supports investigation gameplay.
Image generation for every elements like location, clues and suspect portrais.

What we learned

Reliability features are essential in AI products: retries, validation, and fallback matter as much as model quality.
Prompting alone is not enough; strong system design is required to make outputs usable.
Interactive AI experiences need tight structure to stay coherent and fun.
Building for demos means engineering for failure modes first, not just happy paths.
The using of AIStudio and Gemini modells

What's next for Cyber Detective

Improve interrogation depth with stronger memory and evidence-aware responses.
Expand case complexity with richer relationships and branching evidence chains.
Add automated tests for generation/parsing/interrogation flows.
Continue UI and UX refinement while preserving the project’s reliability-first architecture.
Optimization for mobile screens
Individual user management, scoring, saving and restoring cases