MCP UI胶水代码生成器
🎯 大满贯示范赛：将混乱的API JSON映射到 Vue或React 使用Zod模式设计系统组件，并通过MCP-UI进行实时UI预览。
✨ 这是什么？
这是一个 两级系统 用于自动化前端集成：
- 第一阶段（工厂）：采用“混乱的API JSON”+“设计系统组件”（Vue或React）→ 生成 Zod模式 映射
- 第二阶段（运行时）：使用渲染实时预览
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"]
}
}
}🎮 演示演练
“神奇时刻”
- 打开您的AI聊天（VS Code与Roo Code或Claude Desktop）
- 粘贴此提示：
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 }}
- 结果：该工具生成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服务器的官方方式：
- 在以下位置创建帐户 史密斯艾
- 提交带有元数据的服务器
- 用户可以通过以下方式浏览和添加：
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等扩展。
📄 许可证
麻省理工学院