{"slug": "why-i-built-a-detective-game-that-runs-entirely-in-your-browser", "title": "Why I Built a Detective Game That Runs Entirely in Your Browser", "summary": "A developer built MysteryMist, a detective game that runs entirely in the browser using WebGPU to power a private on-device AI. The game's narrative engine operates offline, with no data leaving the device, and the developer optimized the model and prompt structure to achieve sub-100ms latency on modern hardware.", "body_md": "I spent three weeks debugging a memory leak that only appeared when the user’s internet connection dropped for more than two seconds. It wasn’t a server timeout. It wasn’t a cache miss. It was the moment I realized that for a real-time, text-based adventure, the round-trip to a cloud API was the bottleneck—not just for latency, but for privacy and reliability.\n\nThat frustration led to **MysteryMist**. It’s a detective game where your typing speed uncues clues, but the core engineering challenge wasn’t the game logic. It was convincing a private on-device AI to run a full narrative engine in the browser, offline, with zero data leaving the device.\n\nThe premise is simple: you are a detective in a foggy, noir-inspired city. You don’t click to progress; you type. The faster you type, the clearer the vision becomes. Clues appear dynamically based on your input rhythm. But here is the twist: the \"DM\" (Dungeon Master) is a small model that runs in your browser.\n\nMost web games treat AI as a luxury feature—something you pay for via subscription, which requires a constant network connection. If the server is down, the game is dead. If the network is slow, the immersion breaks.\n\nI wanted to solve the \"offline AI\" problem without forcing users to install a 2GB desktop app or run a local LLM server with 16GB of RAM. The solution was WebGPU. By leveraging the GPU directly through the browser, we can run inference on a private on-device AI that never touches the cloud.\n\nThis means the game works on an airplane. It works when your Wi-Fi goes down. And critically, your conversation with the AI is never uploaded. There is no telemetry, no training data collection, and no privacy policy to read because there is no data to collect.\n\nBuilding this required a shift in how we think about model size. We aren’t using the massive 70B+ parameter models that dominate headlines. We are using a highly quantized, small model that runs in your browser. This isn’t a compromise; it’s a design choice.\n\nThe constraint of running entirely on the client side forced us to optimize the prompt structure. We can’t send a 50,000-token context window back and forth over an API. Instead, the game state is compressed into a dense, structured JSON blob that the on-device AI processes in real-time.\n\nHere is a simplified view of how the inference loop works in the main thread:\n\n```\n// The core inference loop runs on the main thread, \n// blocking only for the duration of the generation.\n// No web workers, no async/await overhead for network I/O.\n\nconst result = await onDeviceAI.generate({\n  prompt: currentSceneContext,\n  maxTokens: 64,\n  temperature: 0.7\n});\n\n// The result is immediately rendered to the DOM.\n// Latency is determined solely by the user's CPU/GPU power,\n// not by network jitter.\n```\n\nThis approach has trade-offs. The model is smaller, so it doesn’t have the vast world knowledge of a cloud-based giant. It relies heavily on the structured context we feed it. But the trade-off is worth it: the latency is sub-100ms on modern devices, and the experience is seamless. There is no \"waiting for the cloud\" spinner. You type, and the world reacts.\n\nMysteryMist is a paid tool. It’s not a free-to-play mobile game with ads. The development is supported by a one-time purchase or subscription, which includes a 7-day trial. However, because the core engine is the same, the games themselves have free turns. You can play the introductory cases without paying, giving you a chance to experience the typing mechanics and the on-device AI flow before committing.\n\nThis model reflects the cost of running the service for updates and new cases, but the heavy lifting—the actual AI inference—happens on your hardware. You aren’t paying for compute; you’re paying for the curation, the puzzle design, and the engine.\n\nIf you are building web applications, consider what parts of your stack truly need to be online. We have become accustomed to sending everything to the cloud because it was easier. But with WebGPU and WebAssembly, the browser is becoming a powerful compute environment.\n\nBy moving inference to the client, you gain privacy, reduce server costs, and improve resilience. The user’s device is a powerful computer. We just haven’t always used it as one.\n\nI’m curious to hear from others in the community: Have you experimented with on-device AI in your own projects? What were the biggest hurdles you faced in getting models to run efficiently in the browser without sacrificing performance?", "url": "https://wpnews.pro/news/why-i-built-a-detective-game-that-runs-entirely-in-your-browser", "canonical_source": "https://dev.to/aipredictions_dev/why-i-built-a-detective-game-that-runs-entirely-in-your-browser-21fa", "published_at": "2026-08-28 13:00:00+00:00", "updated_at": "2026-08-28 13:21:07.262428+00:00", "lang": "en", "topics": ["ai-products", "ai-infrastructure", "developer-tools"], "entities": ["MysteryMist", "WebGPU"], "alternates": {"html": "https://wpnews.pro/news/why-i-built-a-detective-game-that-runs-entirely-in-your-browser", "markdown": "https://wpnews.pro/news/why-i-built-a-detective-game-that-runs-entirely-in-your-browser.md", "text": "https://wpnews.pro/news/why-i-built-a-detective-game-that-runs-entirely-in-your-browser.txt", "jsonld": "https://wpnews.pro/news/why-i-built-a-detective-game-that-runs-entirely-in-your-browser.jsonld"}}