FrankenHub

Where AI Workflows Come Alive

Comment

Inspiration

FrankenHub was inspired by the idea that AI workflows shouldn’t feel mechanical - they should feel alive.
With Kiroween’s haunted theme, we asked ourselves:

“What if MCP tools behaved like stitched-together creatures in a neon laboratory?”

This led to the Monster Mixer: a playful yet technically sophisticated system that fuses the outputs of any two MCP tools into hybrid monsters such as Eldritch Skies, The Folder That Remembers, and the Commit Demon of Branch-13.

We wanted to show the power of MCP interoperability in a way that is visual, cinematic, and unforgettable.

What it does

FrankenHub is a haunted AI laboratory where:

  • You mix and stitch MCP tools using Monster Mixer
  • You generate monsterized hybrid outputs based on themes
  • Monsters “come alive” inside the Creation Chamber workflow canvas
  • Workflows evolve automatically when their metrics degrade
  • A Mock AI Mode ensures the system always works (even without API keys)
  • Lightning, fog, ghosts, and matrix-glitch animations bring the UI to life

FrankenHub turns APIs into creatures — and workflows into living experiments.

How we built it

FrankenHub was built entirely using Kiro’s spec-driven development workflow, allowing rapid iteration across UI, backend, prompts, and animation systems.

Architecture Summary

  • Next.js 14 (App Router) for frontend + serverless APIs
  • React + TailwindCSS + Framer Motion for spectral neon animations
  • Supabase for workflow storage and metrics
  • Vercel serverless functions for execution + evolution
  • Monster Mixer runtime model using a silent-safe system prompt
  • MCP integrations: GitHub, Filesystem, Weather, Google Search, Claude, Image Gen

Core Modules

  1. Monster Mixer Engine — Fuses Tool A + Tool B into a stitched hybrid
  2. Examples Gallery — Eldritch, Ghostly, and Glitched showcase monsters
  3. Creation Chamber — Animated workflow canvas
  4. Evolution Engine — Auto-mutates workflows based on performance
  5. Mock AI Mode — Ensures demos always work
  6. Animated UI System — Fog, lightning, matrix drips, glowing spectral nodes

We even used math to compute engagement:

$$ EngagementScore = \frac{\alpha \cdot Likes + \beta \cdot Reshares + \gamma \cdot Comments}{Visibility} $$

Challenges we ran into

  • Silent-safe prompting: Monster Mixer initially responded prematurely; we had to craft a prompt that stayed silent until all inputs were supplied.
  • URL parameter syncing: The “Rebuild This Monster” feature required syncing React state with query params without stale values.
  • Performance of animations: Lightning, fog, and glitch effects needed to look dramatic without harming frame rates.
  • Balancing aesthetics + engineering: Ensuring the system was not just spooky UI, but a meaningful demonstration of MCP tool composition.

Accomplishments that we're proud of

  • Built the first-ever MCP fusion engine (Monster Mixer).
  • Created a cinematic, interactive laboratory experience that feels alive.
  • Designed an evolutionary workflow system that mutates based on real metrics.
  • Implemented a fully animated UI with fog, ghosts, lightning, and matrix drips.
  • Developed silent-safe runtime prompting for consistent stitching behavior.
  • Delivered a working demo that is fun, surprising, and deeply technical.

What we learned

  • MCP tools become exponentially more powerful when composed creatively.
  • Kiro can accelerate development at a shocking pace when using specs + hooks.
  • Users understand complex systems faster when wrapped in a strong metaphor.
  • A playful theme (Kiroween) makes technical work feel magical and joyful.

What's next for FrankenHub

  • Multi-tool stitching (Tool A + B + C → monster hydras)
  • Evolving Monster Mixer outputs into full workflows automatically
  • Sharing creatures across users in a global “Monster Zoo”
  • AI-generated visual avatars for each stitched creature
  • Community-built monster themes (cosmic, steampunk, retro-arcade, etc.)
  • Live evolution battles: workflows compete, evolve, and adapt in real time

FrankenHub has grown far beyond a demo — it’s becoming a world where AI workflows truly feel alive.

Built With

Share this project:

Updates