MCP UI Glue Code Generator

MCP UI胶水代码生成器

🎯 大满贯示范赛：将混乱的API JSON映射到 Vue或React 使用Zod模式设计系统组件，并通过MCP-UI进行实时UI预览。

✨ 这是什么？

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

1. 第一阶段（工厂）：采用“混乱的API JSON”+“设计系统组件”（Vue或React）→ 生成 Zod模式 映射
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代码集成

选项1:Roo代码/临床扩展

添加到您的VS代码设置(settings.json):

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

选项2：克劳德桌面

添加到 claude_desktop_config.json:

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

🎮 演示演练

“神奇时刻”

1. 打开您的AI聊天（VS Code与Roo 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:

  

    
{{ title }}

    
{{ subtitle }}

    {{ formattedAmount }}
    {{ status }}
  

1. 结果：该工具生成Zod模式 与 在聊天中实时呈现实际卡片！

🧪 MCP检验员测试

# 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组件道具。

输入：

输出：

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

🏗️ 建筑

┌─────────────────────────────────────────────────────────┐
│                    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：史密斯利（MCP市场）

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

1. 在以下位置创建帐户 史密斯艾
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等扩展。

📄 许可证

麻省理工学院