glue-code-generator

MCP UI Glue Code Generator

🎯 大满贯演示：使用 Zod 架构将杂乱的 API JSON 映射到 Vue 或 React 设计系统组件，并通过 MCP-UI 提供实时 UI 预览。

✨ 这是什么？

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

1. 阶段 1（工厂）：接收“杂乱的 API JSON”+“设计系统组件”（Vue 或 React）→ 生成 Zod 架构映射
2. 阶段 2（运行时）：直接在聊天中使用 mcp-ui 渲染实时预览

🚀 快速开始

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

服务将运行在：

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

🔧 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 Desktop

添加到 claude_desktop_config.json：

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

🎮 演示指南

“神奇时刻”

1. 打开 AI 聊天（使用 Roo Code 的 VS Code，或 Claude Desktop）
2. 粘贴此提示词：

Map this API response to this Vue component:

API Response:
{
  "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 Component:
<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 Inspector 进行测试

# Quick CLI test
npx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list

# Or use the GUI
npx @modelcontextprotocol/inspector
# Then connect to http://localhost:3000/mcp with Streamable HTTP

📦 工具参考

generate_ui_schema

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

输入：

参数	类型	描述
api_json_sample	字符串	后端 API 的 JSON 响应
vue_component_code	字符串	设计系统中的 Vue 组件

输出：

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

🏗️ 架构

┌─────────────────────────────────────────────────────────┐
│                    MCP Client                           │
│         (VS Code / Claude Desktop / Goose)              │
└────────────────────────┬────────────────────────────────┘
                         │ MCP Protocol
                         ▼
┌─────────────────────────────────────────────────────────┐
│             glue-code-generator Server                  │
│  ┌─────────────────────────────────────────────────┐   │
│  │         generate_ui_schema Tool                  │   │
│  │  ┌───────────┐  ┌─────────────┐  ┌───────────┐  │   │
│  │  │  Analyze  │→ │  Generate   │→ │  Render   │  │   │
│  │  │  API JSON │  │ Zod Schema  │  │ UIResource│  │   │
│  │  └───────────┘  └─────────────┘  └───────────┘  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

🚀 发布与分发

选项 1：Smithery（MCP 市场）

用户发现并安装 MCP 服务的官方方式：

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

选项 2：npm 包

发布到 npm，以便使用 npx：

npm publish
# Users run: npx @yourname/glue-code-generator

选项 3：GitHub

用户克隆或下载，并在其 MCP 客户端设置中手动配置。

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

📄 许可证

MIT