内容
# MCP UI Glue 代码生成器
> 🎯 **全垒打演示**: 将杂乱的 API JSON 映射到 **Vue 或 React** 设计系统组件，使用 Zod 模式，通过 MCP-UI 进行实时 UI 预览。
## ✨ 这是什么？
这是一个用于自动前端集成的 **两阶段系统**:
1. **第一阶段（工厂）**: 接受“杂乱的 API JSON”+“设计系统组件”（Vue 或 React）→ 生成 **Zod 模式** 映射
2. **第二阶段（运行时）**: 使用 `mcp-ui` 直接在聊天中渲染实时预览
## 🚀 快速开始
```bash
# 安装依赖
npm install
# 构建服务器
npm run build
# 启动服务器
npm start
```
服务器将在以下地址运行：
- **健康检查**: http://localhost:3000/
- **MCP 端点**: http://localhost:3000/mcp
## 🔧 VS Code 集成
### 选项 1: Roo Code / Cline 扩展
在 VS Code 设置（`settings.json`）中添加：
```json
{
"roo-cline.mcpServers": {
"glue-code-generator": {
"command": "node",
"args": ["d:/MCPUIPlugin/build/index.js"]
}
}
}
```
### 选项 2: Claude Desktop
在 `claude_desktop_config.json` 中添加：
```json
{
"mcpServers": {
"glue-code-generator": {
"command": "node",
"args": ["d:/MCPUIPlugin/build/index.js"]
}
}
}
```
## 🎮 演示教程
### “魔术时刻”
1. 打开您的 AI 聊天（VS Code with Roo Code，或 Claude Desktop）
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 Inspector 进行测试
```bash
# 快速 CLI 测试
npx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list
# 或使用 GUI
npx @modelcontextprotocol/inspector
# 然后连接到 http://localhost:3000/mcp 使用 Streamable HTTP
```
## 📦 工具参考
### `generate_ui_schema`
将 API JSON 映射到 Vue 组件属性。
**输入：**
| 参数 | 类型 | 描述 |
|-----------|------|-------------|
| `api_json_sample` | 字符串 | 后端 API 的 JSON 响应 |
| `vue_component_code` | 字符串 | 设计系统中的 Vue 组件 |
**输出：**
- 生成的 Zod 模式代码
- 映射的数据预览
- 通过 `mcp-ui` 渲染的实时 HTML 卡片
## 🏗️ 架构
```
┌─────────────────────────────────────────────────────────┐
│ MCP 客户端 │
│ (VS Code / Claude Desktop / Goose) │
└────────────────────────┬────────────────────────────────┘
│ MCP 协议
▼
┌─────────────────────────────────────────────────────────┐
│ glue-code-generator 服务器 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ generate_ui_schema 工具 │ │
│ │ ┌───────────┐ ┌─────────────┐ ┌───────────┐ │ │
│ │ │ 分析 │→ │ 生成 │→ │ 渲染 │ │ │
│ │ │ API JSON │ │ Zod 模式 │ │ UI 资源 │ │ │
│ │ └───────────┘ └─────────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```
## 🚀 发布和分发
### 选项 1: Smithery（MCP 市场）
用户发现和安装 MCP 服务器的官方方式：
1. 在 [smithery.ai](https://smithery.ai) 创建帐户
2. 提交您的服务器及其元数据
3. 用户可以通过以下方式浏览和添加：`smithery install glue-code-generator`
### 选项 2: npm 包
发布到 npm 以供 `npx` 使用：
```bash
npm publish
# 用户运行：npx @yourname/glue-code-generator
```
### 选项 3: GitHub
用户克隆/下载并在 MCP 客户端设置中手动配置。
> **注意**：VS Code 尚不支持内置的 MCP 浏览器。用户在设置中配置 MCP 服务器或使用 Roo Code/Cline 等扩展。
## 📄 许可证
MIT
