Inspiration
We've all experienced the frustration of AI code generation being a "black box" — you type a prompt, wait, and suddenly a wall of code appears with no visibility into what's happening. It's like magic, but not the fun kind. We wanted to bring transparency to AI-assisted development.
The Frankenstein metaphor hit us: what if code modules were like body parts being stitched together? What if you could watch the AI "possess" your editor and see each line materialize? What if your test suite felt like bringing a creature to life with electricity? HackStitcher was born from this vision — making AI development not just powerful, but visible, connected, and alive.
What it does
HackStitcher is an AI Ghost Developer platform that transforms code generation into a visual, testable experience:
👻 Possession Mode — Watch the Ghost Writer AI type code line-by-line with inline "spirit suggestions" instead of invisible AI drops 🧵 Stitch Graph — A living visualization showing how modules connect like body parts, using React Flow to map dependencies in real-time 🧟 Monster Personas — Choose from Ghost Writer (clean code), Zombie Tester (edge case hunting), or Spider Integrator (API connections), each with custom steering behaviors ⚡ Haunted Test Chamber — Tests run automatically when code is generated; watch liquid fill the chamber as tests execute with green flames (pass) or red smoke (fail) 🩺 Heartbeat Monitor — Server activity visualized as a living creature's pulse with CPU, memory, and BPM readings 🔮 AI Fix Suggestions — When tests fail, the Zombie Tester generates code snippets to fix issues automatically
How we built it
Next.js 14 for the React-based frontend with App Router Supabase for PostgreSQL database and real-time subscriptions React Flow for the interactive Stitch Graph visualization Framer Motion for the spooky animations (typing effects, pulse monitors, ghost trails) Kiro IDE Integration with steering files for persona behaviors and hooks for auto-triggering tests JSON Schema specs defining API contracts for modules, graph nodes, and test runs Custom CSS horror theme with gothic styling, blood red accents, and arcane mode toggle
Challenges we ran into
Making AI visible without slowing it down — The line-by-line typing animation needed to feel responsive while still showing the "possession" effect Real-time graph updates — Keeping the Stitch Graph synchronized when new modules are generated required careful state management Accessibility vs. atmosphere — Balancing the horror theme with accessibility (we added a "reduce motion" toggle and ensured color contrast) Test automation timing — Triggering tests via Kiro hooks while keeping the UI responsive was tricky
Accomplishments that we're proud of
The Possession Editor — Watching AI type code character-by-character with glowing spirit suggestions feels genuinely magical Stitch Graph visualization — Seeing modules connect in real-time like assembling Frankenstein's monster is incredibly satisfying Unified metaphor — The Frankenstein theme runs throughout every feature, from "body parts" to "bringing code to life" Presenter Mode — Built-in demo mode with slower animations for presentations
What we learned
AI transparency builds trust — Developers actually want to see what's happening, not just get results Metaphors matter — The horror theme isn't just fun; it makes abstract concepts (modules, tests, integration) tangible Kiro's steering files are powerful — Custom persona behaviors via steering files enabled very different AI personalities Animation is a superpower — What could be a boring test runner becomes exciting when you watch a chamber fill with liquid and burst into flames
What's next for HackStitcher - AI Ghost Developer
🔗 Full MCP Integration — Connect to OpenAI, Claude, and other LLMs via Model Context Protocol for real code generation 👻 Collaborative Séance Mode — Multiple developers "channeling" the same codebase in real-time 📊 Autopsy Reports — AI-generated post-mortems when builds fail, with root cause analysis 🌐 Global Activity Map — See where code is being "stitched" around the world on an interactive globe 🧪 Test Generation — The Zombie Tester will automatically generate test cases for new code
Built With
- css
- framer-motion
- javascript
- kiro-ide
- mcp
- next.js
- node.js
- postgresql
- react
- react-flow
- sql
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.