MCP Time Traveler

👻 MCP时间旅行者🎃

穿越时空，重现历史上准确的开发人员环境

*已提交 弗兰肯斯坦 在2025年的Kiroween黑客马拉松比赛中。*

  

现场演示

• Web用户界面: https://mcp-time-traveler.vercel.app/
• API（POST）: https://mcp-time-traveler-api-04b9f0b0b1ae.herokuapp.com/api/generate

快速尝试（Node+Express 2015）

请求：

curl -X POST https://mcp-time-traveler-api-04b9f0b0b1ae.herokuapp.com/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "language": "node",
    "framework": "express",
    "year": 2015,
    "extras": ["testing"]
  }'

🎥 演示视频

在YouTube上观看3分钟的演示

📸 截图

Main UI Interface *带有语言、框架和年份选择的环境表格*

Haunted Mode Feature *Haunted Mode突出显示具有不确定版本数据的软件包*

MCP Tools *Kiro IDE中的MCP服务器配置*

概述

MCP时间旅行者 是Kiroween黑客马拉松项目，为2015年至2025年间的任何一年生成历史准确的技术堆栈。它从npm、PyPI和RubyGems注册表中获取真实的包版本，应用智能版本选择算法，并用置信度评分呈现结果。

主要特点：

• 🕐 基于时间的版本选择 -为任何年份选择合适的软件包版本
• 📦 真实注册表查找 -从npm、PyPI、RubyGems获取实际发布数据
• 🎯 信心评分 -知道版本数据何时不确定
• 🦇 闹鬼模式 -突出显示带有警告的低置信度套餐
• 🎃 Kiroween主题 -深紫色和橙色的UI，带有恐怖的氛围
• 🤖 MCP集成 -作为AI助手的模型上下文协议工具

支持的语言：

• Node.js（Express）
• Python（Django、Flask）
• Ruby（Rails）

🧟 弗兰肯斯坦的故事

MCP时间旅行者缝合在一起：

• 大脑 –对注册表历史进行推理的MCP服务器
• 心脏 –Express API在MCP和web之间泵送数据
• 四肢 –适配器连接到npm、PyPI和RubyGems
• 眼睛 –跨年份查看的版本选择器
• 皮肤 –Vercel上以Kiroween为主题的React UI
• 神经系统 –连接所有部分的共享TypeScript类型
• 灵魂 –Kiro的规格、挂钩和转向使其栩栩如生

弗兰肯斯坦的实验室建筑

┌─────────────────────────────────────────────────────────────┐
│                    FRANKENSTEIN'S LAB                       │
│                  (Built with Kiro AI)                        │
└─────────────────────────────────────────────────────────────┘

    ┌──────────────┐
    │  THE BRAIN   │  MCP Server (mcp-server/)
    │              │  - Reasons over registry history
    │  🧠          │  - Exposes get_historical_stack tool
    └──────┬───────┘
           │
           │ (stdio transport)
           │
    ┌──────▼───────┐
    │  THE HEART   │  Express API (apps/api/)
    │              │  - Pumps data between MCP and web
    │  ❤️          │  - Validates requests
    └──────┬───────┘
           │
           │ (HTTP REST)
           │
    ┌──────▼───────┐
    │  THE SKIN    │  React UI (apps/web/)
    │              │  - Kiroween-themed interface
    │  👻          │  - Haunted Mode warnings
    └──────────────┘

    ┌──────────────┐
    │  THE LIMBS   │  Registry Adapters
    │              │  - npmAdapter.ts
    │  🦵          │  - pypiAdapter.ts
    │              │  - rubygemsAdapter.ts
    └──────┬───────┘
           │
           │ (HTTP API calls)
           │
    ┌──────▼───────┐
    │  REGISTRIES  │  npm, PyPI, RubyGems
    └──────────────┘

    ┌──────────────┐
    │  THE EYES    │  Version Picker (core/versionPicker.ts)
    │              │  - Sees across years
    │  👁️          │  - Calculates confidence scores
    └──────────────┘

    ┌──────────────┐
    │  NERVOUS     │  Shared Types (shared/types/)
    │  SYSTEM      │  - StackRequest, StackResponse
    │              │  - Connects all parts
    └──────────────┘

    ┌──────────────┐
    │  THE SOUL    │  Kiro (.kiro/)
    │              │  - Specs guide development
    │  ✨          │  - Hooks automate checks
    │              │  - Steering enforces quality
    └──────────────┘

每一块都是单独建造的，然后用Kiro的眼镜、钩子和方向盘连接在一起，直到这个生物作为一个单一的系统复活。

📐 查看完整的弗兰肯斯坦建筑图

运作原理

┌─────────────┐      ┌─────────────┐      ┌──────────────────┐
│   Web UI    │─────▶│  Express    │─────▶│  npm Registry    │
│  (React)    │      │    API      │      │  PyPI Registry   │
└─────────────┘      └─────────────┘      │  RubyGems API    │
                            │              └──────────────────┘
                            │
                            ▼
                     ┌─────────────┐
                     │   Version   │
                     │   Picker    │
                     │  Algorithm  │
                     └─────────────┘
                            │
                            ▼
                     ┌─────────────┐
                     │ Confidence  │
                     │   Scoring   │
                     └─────────────┘

架构：

1. Web用户界面 发送堆栈请求（语言、框架、年份）
2. API 从注册表获取包版本
3. 版本选择器 按发布日期筛选版本
4. 信心评分器 评估数据质量（0.5=回退，0.9=准确）
5. 回应 包括运行时、包和历史上下文

MCP集成： 该项目包括一个独立的MCP服务器 get_historical_stack 作为Kiro等人工智能助手的工具，可以对历史技术栈进行对话式查询。

特性

✨ 核心功能：

• 从公共注册表中实时发现包版本
• 运行时版本选择器（Node、Python、Ruby）
• 包管理器版本映射
• 框架版本建议
• 版本准确性的置信度评分

🎨 用户体验：

• 带有警告指示灯的闹鬼模式
• Kiroween主题深色UI（紫色和橙色）
• 键盘友好型表单
• 响应式卡片布局
• 实时加载状态

🛠️ 开发人员经验：

• 用于AI集成的自定义MCP服务器
• 使用Kiro进行规范驱动开发
• 自动挂钩（脚手架生成、预提交检查）
• 编码标准指导文件
• 跨模块共享TypeScript类型

技术栈

前端：

• React 18+TypeScript
• Vite（开发服务器和构建）
• CSS3（自定义Kiroween主题）

后端：

• Express+TypeScript
• Axios（注册表API调用）
• CORS已启用

MCP服务器：

• @模型上下文协议/sdk
• stdio传输
• TypeScript

Kiro特点：

• 规格（要求和设计文件）
• 钩子（gen:脚手架，预提交）
• 转向（编码风格指南）
• MCP集成

项目结构

mcp-time-traveler/
├── apps/
│   ├── api/                    # Express REST API
│   │   ├── src/
│   │   │   ├── server.ts       # Entry point
│   │   │   ├── routes/         # API endpoints
│   │   │   ├── services/       # Business logic
│   │   │   └── types/          # TypeScript types
│   │   ├── package.json
│   │   └── tsconfig.json
│   │
│   └── web/                    # React frontend
│       ├── src/
│       │   ├── main.tsx        # Entry point
│       │   ├── pages/          # Page components
│       │   ├── components/     # UI components
│       │   ├── types/          # TypeScript types
│       │   └── styles.css      # Kiroween theme
│       ├── index.html
│       ├── package.json
│       └── vite.config.ts
│
├── mcp-server/                 # MCP tool server
│   ├── src/
│   │   ├── index.ts            # MCP server setup
│   │   ├── tools/              # MCP tool implementations
│   │   ├── adapters/           # Registry API adapters
│   │   ├── core/               # Version picker logic
│   │   └── types/              # TypeScript types
│   ├── package.json
│   └── tsconfig.json
│
├── shared/
│   └── types/                  # Shared TypeScript types
│       └── stack.ts
│
├── .kiro/
│   ├── specs/                  # Requirements & design docs
│   │   ├── app-spec.md
│   │   └── mcp-spec.md
│   ├── hooks/                  # Automation hooks
│   │   ├── gen-scaffold.yml
│   │   └── pre-commit.yml
│   └── steering/               # Coding guidelines
│       └── coding-style.md
│
├── README.md
└── LICENSE

规范合规性

本节演示了实现如何遵循中的规范 .kiro/specs/所有代码都是使用Kiro的规范驱动开发工作流根据这些规范生成和验证的。

规范验证过程：

1. 规格说明 .kiro/specs/app-spec.md 和 .kiro/specs/mcp-spec.md
2. gen:scaffold 钩子验证类型是否匹配规范模式
3. 代码生成遵循规范要求
4. 预提交挂钩确保类型安全
5. 手动审查确认符合规范（本表）

入门（本地开发人员）

先决条件

• Node.js 18+和npm
• Git

安装

1. 克隆存储库：

   git clone https://github.com/yourusername/mcp-time-traveler.git
   cd mcp-time-traveler

1. 安装依赖项：

   # API
   cd apps/api
   npm install
   cd ../..

   # Web
   cd apps/web
   npm install
   cd ../..

   # MCP Server
   cd mcp-server
   npm install
   cd ..

运行应用程序

终端1-启动API：

cd apps/api
npm run dev

API运行于http://localhost:4000

终端2-启动Web UI：

cd apps/web
npm run dev

Web UI在上运行http://localhost:3000

终端3-构建MCP服务器（可选）：

cd mcp-server
npm run build

测试API

示例：Node.js+Express（2020）

curl -X POST http://localhost:4000/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "language": "node",
    "framework": "express",
    "year": 2020,
    "extras": ["testing", "orm"]
  }'

示例：Python+Django（2018）

curl -X POST http://localhost:4000/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "language": "python",
    "framework": "django",
    "year": 2018,
    "extras": ["testing"]
  }'

请求示例

Node.js+Express（2015）

{
  "language": "node",
  "framework": "express",
  "year": 2015,
  "extras": []
}

答复：

{
  "language": "node",
  "framework": "express",
  "year": 2015,
  "runtime_version": "4.9.1",
  "package_manager": "npm@3.10.10",
  "packages": [
    {
      "name": "express",
      "version": "4.13.4",
      "category": "core",
      "notes": "express framework for node"
    }
  ],
  "notes": "node 4.9.1 was the stable version in 2015."
}

Python+Django（2018）

{
  "language": "python",
  "framework": "django",
  "year": 2018,
  "extras": ["testing"]
}

答复：

{
  "language": "python",
  "framework": "django",
  "year": 2018,
  "runtime_version": "3.7.17",
  "package_manager": "pip@10.0.1",
  "packages": [
    {
      "name": "django",
      "version": "2.1.15",
      "category": "core",
      "notes": "django framework for python"
    },
    {
      "name": "pytest",
      "version": "latest",
      "category": "testing",
      "notes": "Testing framework (confidence: 90%)"
    }
  ],
  "notes": "python 3.7.17 was the stable version in 2018."
}

截图

主界面

MCP Time-Traveler UI *Kiroween主题界面，深紫色和橙色调*

闹鬼模式

Haunted Mode Warning *用警告图标突出显示的低置信度软件包*

MCP集成

Kiro MCP Tool *使用Kiro AI助手中的工具*

在Kiro中使用MCP工具：

1. 在中配置MCP服务器 .kiro/mcp/time_traveler.json （已包含在此回购中）
2. 重新启动Kiro以加载MCP服务器
3. 在Kiro聊天中，问：“2020年Node.js+Express的流行包是什么？”
4. Kiro将使用 get_historical_stack 工具自动
5. 响应包括具有置信度得分的准确版本数据

MCP工具调用示例：

User: "What was the Node.js stack like in 2018?"

Kiro (using get_historical_stack tool):
{
  "language": "node",
  "framework": "express",
  "year": 2018,
  "runtime_version": "10.24.1",
  "package_manager": "npm@6.14.18",
  "packages": [
    {
      "name": "express",
      "version": "4.16.4",
      "category": "core",
      "notes": "express framework"
    }
  ],
  "notes": "Node 10 LTS (Dubnium) was released in October 2018..."
}

Kiro是如何使用的

该项目完全使用 基洛AI 作为主要的开发工具，展示了人工智能辅助开发的力量：

🎯 规范驱动开发

• 在中创建了详细的规格 .kiro/specs/ 需求和MCP工具设计
• 使用规范作为代码生成的真实来源
• 基于实现反馈的迭代细化规范

🪝 开发过程中的钩子使用

• 钩子定义见 .kiro/hooks/ 并通过Kiro UI触发
• gen:scaffold 使用了几次以使结构与规格保持同步
• pre-commit 在编码时定期使用，以在API、web和MCP服务器上运行类型检查

🎨 指导文件

• 编码风格指南 –保持生成代码一致性的指导文档
• API惯例 REST模式、错误处理和验证标准
• 强制使用小函数、清晰的命名和TypeScript约定
• 指导所有代码生成以实现一致性

🤖 MCP扩展

• 为Kiro集成构建自定义MCP服务器
• 启用有关历史堆栈的会话查询
• 在生产环境中演示MCP协议，并在npm、PyPI和RubyGems之间进行真正的注册表集成。

💬 氛围编程

• 功能开发的自然语言指令
• 通过对话迭代细化
• 上下文感知代码生成

结果： 一个完整的全栈应用程序，在几小时内构建，而不是几天，具有一致的代码质量和全面的文档。

📊 Kiro的开发统计数据

• 作为独立开发人员构建，Kiro作为主要IDE
• 项目结构、MCP服务器架构和第一个API路由都是通过vibe编码生成的
• 规格 .kiro/specs 被迭代了几次，用于重新生成类型和处理程序
• 钩子和指导文档是在Kiro的指导下创建的，以保持monorepo的一致性

MCP服务器使用情况

在Kiro中配置

添加到 .kiro/mcp.json:

{
  "mcpServers": {
    "time-traveler": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-server/dist/index.js"]
    }
  }
}

MCP查询示例

在Kiro聊天中：

What packages were popular for Node.js + Express in 2020?

Kiro将使用 get_historical_stack 获取准确版本数据的工具。

测试闹鬼模式

快速测试：

1. 启用“🦇 “闹鬼模式”复选框
2. 选择：Node.js，Express，2016年
3. 添加额外内容： testing, orm
4. 低置信度套餐将显示⚠️ 警告图标

许可证

MIT许可证-请参阅 许可证 了解详情。

鸣谢

为Kiroween Hackathon 2025而建 🎃

作者 普拉巴卡兰·贾亚拉曼·马萨尼

技术支持：

• 基罗·德夫 -AI驱动的IDE
• 模型上下文协议 -MCP-SDK
• npm、PyPI、RubyGems-包注册表

特别感谢：

• Kiro团队为您带来惊人的人工智能开发体验
• 包注册表API的开源社区

______________________________________________________________________

*由...制作👻 和☕ 基洛温2025年期间*