DEV Community

Vaishnavi Mishra
Vaishnavi Mishra

Posted on

🧟‍♂️ Stitching the Spirit: Engineering a "Frankenstein" AI Agent with Kiro & MCP

Most AI hackathon projects are just chatbots with a fancy wrapper. For Kiro-ween, the theme was 'Frankenstein,' so I took that literally. I didn't want another polished, polite chatbot. I wanted to stitch together a bunch of messy, incompatible tech stacks into something that felt alive—and maybe a little dangerous.

We are currently living in the era of "Chat." We ask an LLM a question, and it gives us text back. But the future of AI isn't just about retrieval; it's about agency. It's about agents that can reach out of the chat window and touch the operating system, the file structure, and the hardware.

For the Kiro-ween Hackathon, I entered the "Frankenstein" category with a specific goal: To stitch together incompatible technologies—Local File Systems, IoT simulation, and Reactive Frontend Animations—into a single, cohesive entity.

The result is HauntHub: A Victorian Ghost Butler super-agent that doesn't just talk to you; it haunts your desktop.

Here is the engineering story of how I used Kiro and the Model Context Protocol (MCP) to orchestrate a digital séance.

⚡ The "Frankenstein" Problem

The "Frankenstein" category challenged us to combine disparate tools. In modern web development, sticking a React Frontend, a Node.js Backend, and System-Level Operations together is common. But controlling them all conversationally via a single LLM stream is a nightmare.

I needed an architecture that could handle:

  • State Management: Remembering the lights are red while reading a text file.
  • Latency: Triggering a jump-scare animation instantly, not waiting for the LLM to finish typing a paragraph.
  • Persona Integrity: Ensuring the agent never breaks its 19th-century character, even when throwing JSON parsing errors.

To solve this, I treated the architecture like anatomy. The Frontend is the face, the MCP Tools are the limbs, and Kiro is the nervous system connecting them.

[Image of System Architecture]

đź§  The Brain: Spec-Driven Development

One of the biggest time-sinks in hackathons is writing boilerplate code. I skipped that entirely.

Using Kiro’s Spec-to-Code engine, I wrote a rigorous System Specification (ghost-butler-spec.md) first. I defined the state machine, the valid transitions, and the UI components required. Kiro then generated the React/Node.js scaffolding.

This meant that instead of debugging useEffect hooks for three hours, I was spending my time building the actual "haunted" logic. The spec became the single source of truth—the DNA of the monster.

🦾 The Limbs: Custom MCP Servers

This is where the magic happens. Instead of hard-coding functions into the LLM's system prompt (which bloats context and increases cost), I utilized the Model Context Protocol (MCP).

MCP provides a standardized way for the agent to "discover" tools. I built four custom Node.js MCP servers to act as the ghost's supernatural powers:

1. haunted-lights-tool.js (The IoT Hand)

This tool simulates a smart home bridge. It accepts parameters like brightness (0-100) and color_hex.

  • Input: "Dim the lights for a sĂ©ance."
  • Execution: set_light_state({ brightness: 10, color: "#880000" })

2. file-haunting-tool.js (The System Hand)

A wrapper around Node's fs module. This allows the ghost to list, read, and rename files.

  • The Twist: It’s not just a file reader. It’s a haunted file reader. The output is formatted to look like ancient parchment in the UI.

3. scare-effects-tool.js (The Poltergeist)

This is a bridge to the frontend Event Bus. It allows the backend agent to trigger client-side CSS animations.

  • Capabilities: Screen shake, strobe lights, sudden "Glitch" artifacts.

4. spooky-ascii-tool.js (The Artist)

A procedural generation tool that creates complex ASCII art on the fly, rendering it into code blocks in the chat interface.

Configuring these in Kiro was shockingly simple. I just pointed mcp.json to my scripts, and the agent immediately knew how to use them.

đź«€ The Nervous System: Agent Hooks & Routing

The biggest technical hurdle was Latency vs. Impact.

If a user says "Scare me!", the agent usually does two things:

  1. Generates text ("BOO! Did I frighten you?").
  2. Calls the tool (trigger_scare).

In a standard LLM pipeline, the tool call often happens after or during the text generation. This ruins the timing. A jump scare that happens 3 seconds after the ghost says "Boo" isn't scary; it's just a bug.

The Solution: Kiro Agent Hooks.

I set up specific hooks to intercept intents. When the intent INTENT_SCARE is detected, the hook prioritizes the MCP payload execution immediately.

User Voice → Hook Detection → DOM Manipulation (Shake) → Audio Response

This optimized the "Time-to-Scare" to under 500ms, creating a visceral, reactive experience that feels like a real presence in the machine.

🎭 The Soul: Steering & Vibe Coding

You cannot have a Victorian Ghost Butler who says, "I'm sorry, as an AI language model, I cannot rename that file." It kills the immersion instantly.

Standard "Prompt Engineering" wasn't enough. I used Kiro’s Steering Documents to create a system-level constraint on the model's output. I defined a "High Vibe" setting that penalized modern vocabulary and enforced an archaic dialect.

The "Error Handling" Test

The true test of an agent's persona is how it handles failure.

  • Standard AI: "Error: File not found in directory."
  • HauntHub: "Alas, the parchment you seek has vanished into the ether. The spirits deny me access to this realm."

The steering document ensures that even the system logs feel haunted. This turns technical errors into narrative elements.

đź”’ Security Spotlight: The "Chroot" Sandbox

Giving an AI agent fs.rename permissions on your local machine is inherently dangerous (and fits the "Frankenstein" theme of playing with dangerous forces).

To make this safe for the judges to run, I implemented a strict Chroot-style sandbox within the file-haunting tool.

// Inside file-haunting-tool.js
const HAUNTED_DIR = path.join(__dirname, '../haunted-files');

function validatePath(userPath) {
    // Resolve path relative to the haunted directory
    const resolvedPath = path.resolve(HAUNTED_DIR, userPath);

    // Security Check: Prevent directory traversal (../)
    if (!resolvedPath.startsWith(HAUNTED_DIR)) {
        throw new Error("The spirits are forbidden from leaving the haunted grounds!");
    }
    return resolvedPath;
}
Enter fullscreen mode Exit fullscreen mode

If the agent (or a malicious user) tries to access system files outside the ./haunted-files/ folder, the tool throws a thematic error, which Kiro then relays to the user in the Butler's voice.

🚀 Conclusion: Agents are Operators

Building HauntHub taught me that the next wave of AI isn't about better chatbots; it's about Agents as Operators.

By combining MCP for standardized tooling, Hooks for routing, and Steering for reliability, we can build software that doesn't just retrieve information—it manages our digital lives.

HauntHub might be a spooky Halloween project, but the architecture underneath it is ready for the enterprise.

Happy Kiro-ween! đź‘»

HauntHub was a submission for the Kiroween Hackathon. You can view the source code and try the demo yourself on https://github.com/VaishnaviOnPC/HauntHub and Devpost.

Top comments (0)