<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Vaishnavi Mishra</title>
    <description>The latest articles on DEV Community by Vaishnavi Mishra (@vaishnavi_mishra_9a68c0b2).</description>
    <link>https://dev.to/vaishnavi_mishra_9a68c0b2</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3648395%2F73515a27-7a8b-473e-99eb-f53dfb2f68f2.png</url>
      <title>DEV Community: Vaishnavi Mishra</title>
      <link>https://dev.to/vaishnavi_mishra_9a68c0b2</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vaishnavi_mishra_9a68c0b2"/>
    <language>en</language>
    <item>
      <title>🧟‍♂️ Stitching the Spirit: Engineering a "Frankenstein" AI Agent with Kiro &amp; MCP</title>
      <dc:creator>Vaishnavi Mishra</dc:creator>
      <pubDate>Fri, 05 Dec 2025 18:22:50 +0000</pubDate>
      <link>https://dev.to/vaishnavi_mishra_9a68c0b2/stitching-the-spirit-engineering-a-frankenstein-ai-agent-with-kiro-mcp-4okb</link>
      <guid>https://dev.to/vaishnavi_mishra_9a68c0b2/stitching-the-spirit-engineering-a-frankenstein-ai-agent-with-kiro-mcp-4okb</guid>
      <description>&lt;p&gt;Most AI hackathon projects are just chatbots with a fancy wrapper. For &lt;strong&gt;Kiro-ween&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;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 &lt;strong&gt;agency&lt;/strong&gt;. It's about agents that can reach out of the chat window and touch the operating system, the file structure, and the hardware.&lt;/p&gt;

&lt;p&gt;For the &lt;strong&gt;Kiro-ween Hackathon&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;The result is &lt;strong&gt;HauntHub&lt;/strong&gt;: A Victorian Ghost Butler super-agent that doesn't just talk to you; it &lt;em&gt;haunts&lt;/em&gt; your desktop.&lt;/p&gt;

&lt;p&gt;Here is the engineering story of how I used &lt;strong&gt;Kiro&lt;/strong&gt; and the &lt;strong&gt;Model Context Protocol (MCP)&lt;/strong&gt; to orchestrate a digital séance.&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚡ The "Frankenstein" Problem
&lt;/h2&gt;

&lt;p&gt;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 &lt;em&gt;conversationally&lt;/em&gt; via a single LLM stream is a nightmare.&lt;/p&gt;

&lt;p&gt;I needed an architecture that could handle:&lt;/p&gt;

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

&lt;p&gt;To solve this, I treated the architecture like anatomy. The &lt;strong&gt;Frontend&lt;/strong&gt; is the face, the &lt;strong&gt;MCP Tools&lt;/strong&gt; are the limbs, and &lt;strong&gt;Kiro&lt;/strong&gt; is the nervous system connecting them.&lt;/p&gt;

&lt;p&gt;[Image of System Architecture]&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 The Brain: Spec-Driven Development
&lt;/h2&gt;

&lt;p&gt;One of the biggest time-sinks in hackathons is writing boilerplate code. I skipped that entirely.&lt;/p&gt;

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

&lt;p&gt;This meant that instead of debugging &lt;code&gt;useEffect&lt;/code&gt; 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.&lt;/p&gt;

&lt;h2&gt;
  
  
  🦾 The Limbs: Custom MCP Servers
&lt;/h2&gt;

&lt;p&gt;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 &lt;strong&gt;Model Context Protocol (MCP)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;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:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;haunted-lights-tool.js&lt;/code&gt; (The IoT Hand)
&lt;/h3&gt;

&lt;p&gt;This tool simulates a smart home bridge. It accepts parameters like &lt;code&gt;brightness&lt;/code&gt; (0-100) and &lt;code&gt;color_hex&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Input:&lt;/strong&gt; "Dim the lights for a séance."&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Execution:&lt;/strong&gt; &lt;code&gt;set_light_state({ brightness: 10, color: "#880000" })&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. &lt;code&gt;file-haunting-tool.js&lt;/code&gt; (The System Hand)
&lt;/h3&gt;

&lt;p&gt;A wrapper around Node's &lt;code&gt;fs&lt;/code&gt; module. This allows the ghost to &lt;code&gt;list&lt;/code&gt;, &lt;code&gt;read&lt;/code&gt;, and &lt;code&gt;rename&lt;/code&gt; files.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Twist:&lt;/strong&gt; It’s not just a file reader. It’s a &lt;em&gt;haunted&lt;/em&gt; file reader. The output is formatted to look like ancient parchment in the UI.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. &lt;code&gt;scare-effects-tool.js&lt;/code&gt; (The Poltergeist)
&lt;/h3&gt;

&lt;p&gt;This is a bridge to the frontend Event Bus. It allows the backend agent to trigger client-side CSS animations.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Capabilities:&lt;/strong&gt; Screen shake, strobe lights, sudden "Glitch" artifacts.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. &lt;code&gt;spooky-ascii-tool.js&lt;/code&gt; (The Artist)
&lt;/h3&gt;

&lt;p&gt;A procedural generation tool that creates complex ASCII art on the fly, rendering it into code blocks in the chat interface.&lt;/p&gt;

&lt;p&gt;Configuring these in Kiro was shockingly simple. I just pointed &lt;code&gt;mcp.json&lt;/code&gt; to my scripts, and the agent immediately knew how to use them.&lt;/p&gt;

&lt;h2&gt;
  
  
  🫀 The Nervous System: Agent Hooks &amp;amp; Routing
&lt;/h2&gt;

&lt;p&gt;The biggest technical hurdle was &lt;strong&gt;Latency vs. Impact&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If a user says &lt;em&gt;"Scare me!"&lt;/em&gt;, the agent usually does two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Generates text ("BOO! Did I frighten you?").&lt;/li&gt;
&lt;li&gt; Calls the tool (&lt;code&gt;trigger_scare&lt;/code&gt;).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In a standard LLM pipeline, the tool call often happens &lt;em&gt;after&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Solution: Kiro Agent Hooks.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I set up specific hooks to intercept intents. When the intent &lt;code&gt;INTENT_SCARE&lt;/code&gt; is detected, the hook prioritizes the MCP payload execution immediately.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;User Voice&lt;/strong&gt; → &lt;strong&gt;Hook Detection&lt;/strong&gt; → &lt;strong&gt;DOM Manipulation (Shake)&lt;/strong&gt; → &lt;strong&gt;Audio Response&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;h2&gt;
  
  
  🎭 The Soul: Steering &amp;amp; Vibe Coding
&lt;/h2&gt;

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

&lt;p&gt;Standard "Prompt Engineering" wasn't enough. I used &lt;strong&gt;Kiro’s Steering Documents&lt;/strong&gt; 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.&lt;/p&gt;

&lt;h3&gt;
  
  
  The "Error Handling" Test
&lt;/h3&gt;

&lt;p&gt;The true test of an agent's persona is how it handles failure.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Standard AI:&lt;/strong&gt; "Error: File not found in directory."&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;HauntHub:&lt;/strong&gt; "Alas, the parchment you seek has vanished into the ether. The spirits deny me access to this realm."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The steering document ensures that even the system logs feel haunted. This turns technical errors into narrative elements.&lt;/p&gt;

&lt;h2&gt;
  
  
  🔒 Security Spotlight: The "Chroot" Sandbox
&lt;/h2&gt;

&lt;p&gt;Giving an AI agent &lt;code&gt;fs.rename&lt;/code&gt; permissions on your local machine is inherently dangerous (and fits the "Frankenstein" theme of playing with dangerous forces).&lt;/p&gt;

&lt;p&gt;To make this safe for the judges to run, I implemented a strict &lt;strong&gt;Chroot-style sandbox&lt;/strong&gt; within the &lt;code&gt;file-haunting&lt;/code&gt; tool.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Inside file-haunting-tool.js&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;HAUNTED_DIR&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;__dirname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../haunted-files&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;validatePath&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userPath&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Resolve path relative to the haunted directory&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resolvedPath&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;HAUNTED_DIR&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;userPath&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Security Check: Prevent directory traversal (../)&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;resolvedPath&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;HAUNTED_DIR&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;The spirits are forbidden from leaving the haunted grounds!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;resolvedPath&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Conclusion: Agents are Operators
&lt;/h2&gt;

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

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;HauntHub might be a spooky Halloween project, but the architecture underneath it is ready for the enterprise.&lt;/p&gt;

&lt;p&gt;Happy Kiro-ween! 👻&lt;/p&gt;

&lt;p&gt;HauntHub was a submission for the Kiroween Hackathon. You can view the source code and try the demo yourself on &lt;a href="https://github.com/VaishnaviOnPC/HauntHub" rel="noopener noreferrer"&gt;https://github.com/VaishnaviOnPC/HauntHub&lt;/a&gt; and Devpost.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>hackathon</category>
      <category>javascript</category>
      <category>kiro</category>
    </item>
  </channel>
</rss>
