StackRoom

StackRoom: The Multiplayer AI IDE

=================================

Inspiration

The idea for StackRoom was born from a frustration I experienced firsthand. Working with teammates across different locations, I realized that the tools we had were fundamentally broken for real collaboration. We were jumping between video calls, screen shares, and chat messages just to look at the same piece of code together. Someone would make a change, share their screen, and everyone else would sit passively watching — unable to touch anything, unable to contribute in real time.

I looked at existing collaboration platforms — and while some allowed multiple people to edit code simultaneously, they treated everyone the same way. There was no concept of roles. A frontend developer would accidentally break backend files. A backend engineer would have no clear boundary for their work. A new teammate joining mid-session had no idea what had been built. Collaboration existed in name, but the experience still felt like working in silos.

Then came the question that changed everything: what if the team had an AI that worked for all of them together — not just one person at a time?

Every AI coding tool I had seen was personal. You open a tab, you ask a question, you get an answer, and your teammates have no idea what just happened. The AI was a private conversation, completely invisible to the rest of the room. There was no AI agent that lived inside the shared workspace, that every teammate could see, speak to, and watch make changes live.

That gap was the spark for StackRoom. But the real breakthrough came when I thought about the live preview. Developers spend hours staring at their running app, wishing something looked different — a button in the wrong place, a colour that feels off, a layout that breaks on mobile. Every single time, the workflow is the same: switch back to the editor, hunt for the right file, make the change, save, wait for rebuild, and finally see the result. What if you could just speak to the app while you were looking at it? What if Gemini could see the same codebase you were looking at, understand exactly what you meant by "move that button to the top right," and update the code instantly — not just for you, but for every teammate in the room?

That is StackRoom. Not an AI assistant. An AI teammate.

What We Built

StackRoom is a real-time collaborative browser IDE where multiple developers join a shared workspace by role (Frontend, Backend, or Fullstack). Every file edit, cursor position, and chat message is synchronized live via Socket.IO.

On top of this collaboration layer, we built three Gemini-powered features that operate at the team level:

Gemini Voice Director (Workspace): Any developer can speak a natural language instruction—like "Add a login form to the frontend"—and Gemini receives the full codebase as context. It returns structured file edits, and the changes propagate to every teammate's Monaco editor in real-time. The whole room watches the code evolve live.
Gemini Preview Agent (Live UI Navigator): Developers open their app in a preview tab where a floating Gemini overlay is injected. A developer can speak directly to the UI—"Move the submit button to the top right"—and Gemini scans the layout, edits the source files, and reloads the preview instantly (~300ms). These edits simultaneously appear in every teammate's editor.
Complete Project Generation: Developers can ask Gemini to generate an entire project from scratch. Gemini produces all necessary files (components, routes, configs, and styles), making the project immediately runnable with one click.

How We Built It

The stack is designed to be minimal, fast, and fully browser-accessible:

Backend: Node.js + Express + Socket.IO.
Frontend: React 18 + Vite + Monaco Editor (the core of VS Code).
AI Intelligence: Gemini 2.5 Flash via REST API for low-latency visual and text reasoning.
Project Runner: A custom multi-language runner that automatically detects Node.js, Python, or Java, installs dependencies, and serves the app.
Preview Injection: A proxy that intercepts HTML responses to inject the Gemini overlay script before the tag.

The JSON Contract

We utilize a strict structured contract with Gemini to ensure reliable code edits:

JSON

Plain textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroovyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObjective-CPerlPHPPowerShell.propertiesProtocol BuffersPythonRRubySass (Sass)Sass (Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML{ "action": "edit", "files": [ { "path": "frontend/App.jsx", "content": "..." } ], "summary": "One sentence describing the change." }

We implemented a robust 4-strategy parser (gemini-parse.js) to handle various response formats, including markdown-fenced JSON and unescaped control characters.

Challenges We Faced

JSON Consistency: Gemini occasionally adds prose or markdown fences despite instructions. We solved this with a layered extraction logic: stripping fences → boundary detection → control character fixing.
Cache Invalidation: Browser caching often "killed" live edits. We implemented three layers of Cache-Control: no-store headers across the static server, HTML proxy, and asset proxy to ensure instant updates.
Windows Compatibility: We spent hours diagnosing why child_process.spawn failed on Windows, eventually realizing we needed the .cmd suffix for npm and npx commands.
Socket.IO Singleton Issues: When developers switched rooms, the socket would fail to join properly. We resolved this by forcing new connections (forceNew: true) on every workspace mount.

What We Learned

Building StackRoom taught us that the hardest part of multiplayer AI isn't the AI—it's the multiplayer. Keeping file state, process lifecycles, and browser caches consistent across multiple users required more careful engineering than the AI integration itself.

More importantly, we learned that the most compelling AI demo isn't about the AI replacing the developer; it's about the AI making the team faster together.

What's Next

@gemini mentions: Codebase Q&A visible to the entire team chat.
Latecomer Catch-up: Automatic AI-generated session summaries for teammates joining mid-session.
Conflict Mediator: Using Gemini to intelligently resolve simultaneous edits to the same file.
Session Debrief: Exporting end-of-session summaries as Markdown documentation.