MCP Glue Code Generator

🚀 MCP UI 胶水代码生成器

该工具借助 Zod 模式，将杂乱的 API JSON 映射到 Vue 或 React 设计系统组件，并通过 MCP-UI 提供实时 UI 预览。

🚀 快速开始

# 安装依赖
npm install

# 构建服务器
npm run build

# 启动服务器
npm start

服务器将在以下地址运行：

• 健康检查：http://localhost:3000/
• MCP 端点：http://localhost:3000/mcp

✨ 主要特性

这是一个用于自动化前端集成的两阶段系统：

1. 第一阶段（工厂阶段）：将“杂乱的 API JSON”与“设计系统组件”（Vue 或 React）结合，生成 Zod 模式映射。
2. 第二阶段（运行时阶段）：直接在聊天窗口中使用 mcp-ui 渲染实时预览。

🔧 与 VS Code 集成

选项 1：Roo Code / Cline 扩展

在你的 VS Code 设置（settings.json）中添加以下内容：

{
  "roo-cline.mcpServers": {
    "glue-code-generator": {
      "command": "node",
      "args": ["d:/MCPUIPlugin/build/index.js"]
    }
  }
}

选项 2：Claude 桌面应用

在 claude_desktop_config.json 中添加以下内容：

{
  "mcpServers": {
    "glue-code-generator": {
      "command": "node",
      "args": ["d:/MCPUIPlugin/build/index.js"]
    }
  }
}

🎮 演示流程

“神奇时刻”

1. 打开你的 AI 聊天窗口（使用 Roo Code 的 VS Code 或 Claude 桌面应用）。
2. 粘贴以下提示：

将此 API 响应映射到这个 Vue 组件：

API 响应：
{
  "cust_id": "USR-12345",
  "tx_timestamp": "2025-12-06T10:30:00Z",
  "stat_cd": "STATUS_OK",
  "amt_val": 1250.50,
  "desc_txt": "Monthly subscription payment"
}

Vue 组件：
<template>
  <div class="ds-card" :class="variant">
    <h3>{{ title }}</h3>
    <p class="subtitle">{{ subtitle }}</p>
    <span class="amount">{{ formattedAmount }}</span>
    <span class="badge" :class="variant">{{ status }}</span>
  </div>
</template>

3. 结果：该工具将生成 Zod 模式，并在聊天窗口中实时渲染实际卡片！

🧪 使用 MCP 检查器进行测试

# 快速 CLI 测试
npx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list

# 或者使用 GUI
npx @modelcontextprotocol/inspector
# 然后通过可流式传输的 HTTP 连接到 http://localhost:3000/mcp

📦 工具参考

generate_ui_schema

将 API JSON 映射到 Vue 组件属性。

输入：

输出：

• 生成的 Zod 模式代码
• 映射数据预览
• 通过 mcp-ui 渲染的实时 HTML 卡片

🏗️ 架构

┌─────────────────────────────────────────────────────────┐
│                    MCP 客户端                           │
│         (VS Code / Claude 桌面应用 / Goose)              │
└────────────────────────┬────────────────────────────────┘
                         │ MCP 协议
                         ▼
┌─────────────────────────────────────────────────────────┐
│             胶水代码生成器服务器                        │
│  ┌─────────────────────────────────────────────────┐   │
│  │         generate_ui_schema 工具                  │   │
│  │  ┌───────────┐  ┌─────────────┐  ┌───────────┐  │   │
│  │  │  分析     │→ │  生成       │→ │  渲染     │  │   │
│  │  │  API JSON │  │ Zod 模式    │  │ UI 资源   │  │   │
│  │  └───────────┘  └─────────────┘  └───────────┘  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

🚀 发布与分发

选项 1：Smithery（MCP 市场）

这是用户发现和安装 MCP 服务器的官方方式：

1. 在 smithery.ai 创建账户。
2. 提交带有元数据的服务器。
3. 用户可以通过以下命令浏览和添加：smithery install glue-code-generator

选项 2：npm 包

发布到 npm 以供 npx 使用：

npm publish
# 用户运行：npx @yourname/glue-code-generator

选项 3：GitHub

用户手动克隆/下载并在其 MCP 客户端设置中进行配置。

注意：VS Code 目前没有内置的 MCP 浏览器。用户需要在设置中配置 MCP 服务器，或使用 Roo Code/Cline 等扩展。

📄 许可证

本项目采用 MIT 许可证。