MCP Glue Code Generator

🚀 MCP UI 膠水代碼生成器

該工具藉助 Zod 模式，將雜亂的 API JSON 映射到 Vue 或 React 設計系統組件，並通過 MCP-UI 提供即時 UI 預覽。

🚀 快速開始

# 安裝依賴
npm install

# 構建服務器
npm run build

# 啟動服務器
npm start

服務器將在以下地址運行：

• 健康檢查：http://localhost:3000/
• MCP 端點：http://localhost:3000/mcp

✨ 主要特性

這是一個用於自動化前端集成的兩階段系統：

1. 第一階段（工廠階段）：將“雜亂的 API JSON”與“設計系統組件”（Vue 或 React）結合，生成 Zod 模式映射。
2. 第二階段（運行時階段）：直接在聊天窗口中使用 mcp-ui 渲染即時預覽。

🔧 與 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 桌面應用

在 claude_desktop_config.json 中添加以下內容：

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

🎮 演示流程

“神奇時刻”

1. 打開你的 AI 聊天窗口（使用 Roo Code 的 VS Code 或 Claude 桌面應用）。
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 檢查器進行測試

# 快速 CLI 測試
npx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list

# 或者使用 GUI
npx @modelcontextprotocol/inspector
# 然後通過可流式傳輸的 HTTP 連接到 http://localhost:3000/mcp

📦 工具參考

generate_ui_schema

將 API JSON 映射到 Vue 組件屬性。

輸入：

輸出：

• 生成的 Zod 模式代碼
• 映射數據預覽
• 通過 mcp-ui 渲染的即時 HTML 卡片

🏗️ 架構

┌─────────────────────────────────────────────────────────┐
│                    MCP 客戶端                           │
│         (VS Code / Claude 桌面應用 / Goose)              │
└────────────────────────┬────────────────────────────────┘
                         │ MCP 協議
                         ▼
┌─────────────────────────────────────────────────────────┐
│             膠水代碼生成器服務器                        │
│  ┌─────────────────────────────────────────────────┐   │
│  │         generate_ui_schema 工具                  │   │
│  │  ┌───────────┐  ┌─────────────┐  ┌───────────┐  │   │
│  │  │  分析     │→ │  生成       │→ │  渲染     │  │   │
│  │  │  API JSON │  │ Zod 模式    │  │ UI 資源   │  │   │
│  │  └───────────┘  └─────────────┘  └───────────┘  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

🚀 發佈與分發

選項 1：Smithery（MCP 市場）

這是用戶發現和安裝 MCP 服務器的官方方式：

1. 在 smithery.ai 創建賬戶。
2. 提交帶有元數據的服務器。
3. 用戶可以通過以下命令瀏覽和添加：smithery install glue-code-generator

選項 2：npm 包

發佈到 npm 以供 npx 使用：

npm publish
# 用戶運行：npx @yourname/glue-code-generator

選項 3：GitHub

用戶手動克隆/下載並在其 MCP 客戶端設置中進行配置。

注意：VS Code 目前沒有內置的 MCP 瀏覽器。用戶需要在設置中配置 MCP 服務器，或使用 Roo Code/Cline 等擴展。

📄 許可證

本項目採用 MIT 許可證。