How I Built MCP Time-Traveler with Kiro: A Developer’s Journey Through Vibe Coding, Specs, Steering, Hooks, and MCP

Prabhakaran Jayaraman Masani — Tue, 02 Dec 2025 23:44:14 +0000

When the Kiroween Hackathon was announced, I wanted to try something different — something playful, something nostalgic, and something that would push the boundaries of what an AI-powered IDE like Kiro could help me build.

Most hackathon projects either look forward into the future or try to solve an immediate problem.
I wanted to look backward.

That’s how I came up with MCP Time-Traveler — an app that reconstructs historical tech stacks from 2015 to 2025 across Node, Python, and Ruby, using real version data from npm, PyPI, and RubyGems.

What surprised me most wasn’t the idea.
It was how quickly Kiro turned it into a real, working project.

This is the story of how it came to life.

🌱 Where the Idea Started

Developers often discuss “what stack should I use?”
But rarely do we ask, “what did this stack look like five or ten years ago?”

I imagined a simple interface:

Choose a language → choose a framework → pick a year → get the entire runtime + dependency stack for that year.

But the real twist was this:

I didn’t want to fake the data.
I wanted to fetch it from real package registries.

To get there, I needed multiple moving pieces:

A frontend
An API
A shared types layer
A custom MCP server
Real registry integrations
Kiro support end-to-end

As a solo developer, that’s a lot.
But Kiro made it feel surprisingly manageable.

⚡ Vibe Coding: Turning Loose Thoughts into a Real Project

I started with vibe coding — simply talking to Kiro about the concept.

Within minutes, Kiro created:

A full monorepo structure
An Express API
A React/Vite frontend
Shared TypeScript types
A starter MCP server
Initial routes and validation logic

What stood out most was that the project didn’t feel like a patchwork of generated snippets.
Kiro aligned each part with the others, right from the beginning.

It felt like I was pair-programming with an engineer who understood architecture.

📘 Specs: Moving from Exploration to Structure

Once the idea was clear, I moved into spec-driven development, which Kiro handles beautifully.

I wrote two spec files:

.kiro/specs/app-spec.md
.kiro/specs/mcp-spec.md

These specs defined:

Input/output contracts
Type structures
Expected API behavior
Input validation
Error shapes
Integration points

After that, I could simply tell Kiro:

“Update the API implementation based on the current spec.”

And Kiro updated everything — API routes, types, helpers — consistently across the monorepo.

Specs transformed the project from something exploratory into something internally coherent.

🎛 Steering Docs: Teaching Kiro My Preferences

AI systems generate excellent code, but consistency matters in large codebases.

So I added .kiro/steering/coding-style.md to describe:

Naming conventions
Error formats
TypeScript patterns
Folder structure rules
Expected comments
File layout preferences

The result?

Every part of the project — whether generated on day one or day five — looked like it came from the same author.
This eliminated cleanup time and made iteration much faster.

🔌 The MCP Server: The Heart of the Project

The custom MCP server is what makes MCP Time-Traveler more than a demo.

I built three MCP tools:

npm historical version lookup
PyPI historical version lookup
RubyGems version lookup

Kiro helped generate:

The MCP tool schema
Validation logic
Error handling
The tool handler implementation
EOF-safe request/response types

The MCP layer allowed the app to fetch real, accurate ecosystem data — not hardcoded values.

For example:

Node 4.9.1 + Express 4.13.4 for 2015
Python 3.7.17 + Django 2.1.15 for 2018

Seeing real historical stacks appear in the UI felt magical.

🔁 Hooks: Automating the Workflows That Slow You Down

To keep things consistent, I added two Kiro agent hooks:

1️⃣ Scaffold regeneration hook

Triggered whenever specs changed, ensuring project structure stayed aligned.

2️⃣ Pre-commit hook

Performed type checks + lightweight build steps.

These hooks acted like guardrails.
As a solo developer, they helped maintain discipline and consistency — without me having to remember every detail.

☁️ Deploying the Full Project

The final structure:
API→ deployed to Heroku
Frontend → deployed to Vercel
MCP Server → runs locally for Kiro during development
GitHub Repo → public, open source, MIT licensed

You can try it here:

🔗 Frontend:
https://mcp-time-traveler.vercel.app/

🔗 API health endpoint:
https://mcp-time-traveler-api-04b9f0b0b1ae.herokuapp.com/health

🔗 Source code:
https://github.com/prabhakaran-jm/mcp-time-traveler

💡 What This Project Taught Me

Building MCP Time-Traveler showed me:

How AI-powered IDEs elevate solo developers
How vibe coding excels at early exploration
How specs enforce structure and long-term consistency
How steering docs unify the codebase
How MCP bridges AI and real-world data
How hooks automate away repetitive tasks

Kiro didn’t just help me build faster.
It helped me build more cleanly, more predictably, and more enjoyably.

🎃 Final Thoughts

When I started this project, I thought the MCP server would be the hardest part. Turns out, the hardest part was believing that an AI-assisted IDE could actually guide a full multi-service build.

But Kiro did — consistently, reliably, and creatively.

MCP Time-Traveler became more than just a hackathon project.
It became a blueprint for how I want to build future tools.

DEV Community: Prabhakaran Jayaraman Masani

How I Built MCP Time-Traveler with Kiro: A Developer’s Journey Through Vibe Coding, Specs, Steering, Hooks, and MCP

kiro