AI导哈

UI粘合代码生成器

一个两阶段系统，用于自动化前端集成，将混乱的API JSON映射到Vue或React设计系统组件，并通过Zod模式生成实时UI预览。

  • by Maverick7
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Maverick7/mcp-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:
<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>
  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组件道具。

输入：

参数 类型 说明
api_json_sample 字符串 来自后端API的JSON响应
vue_component_code string 设计系统中的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等扩展。

📄 许可证

麻省理工学院

相关 MCP