glue-code-generator

MCP UI グルーコードジェネレーター

🎯 グランドスラムデモ：Zod スキーマを使用して、複雑な API JSON を Vue または React のデザインシステムコンポーネントにマッピングし、MCP-UI 経由で UI のライブプレビューを表示します。

✨ これは何ですか？

フロントエンド連携を自動化する 2 段階システムです。

1. ステージ 1（ファクトリー）：「複雑な API JSON」＋「デザインシステムコンポーネント」（Vue または React）を受け取り、マッピング用の Zod スキーマを生成します
2. ステージ 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 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 Desktop

claude_desktop_config.json に追加します。

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

🎮 デモの手順

「魔法の瞬間」

1. AI チャットを開きます（Roo Code を使った VS 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>

3. 結果：ツールが Zod スキーマを生成し、さらに実際のカードをチャット内にライブ表示します。

🧪 MCP Inspector でテストする

# 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 コンポーネントの props にマッピングします。

入力：

パラメーター	型	説明
api_json_sample	string	バックエンド API からの JSON レスポンス
vue_component_code	string	デザインシステムの Vue コンポーネント

出力：

• 生成された Zod スキーマコード
• マッピングされたデータのプレビュー
• mcp-ui 経由でレンダリングされたライブ HTML カード

🏗️ アーキテクチャ

┌─────────────────────────────────────────────────────────┐
│                    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：Smithery（MCP マーケットプレイス）

ユーザーが MCP サーバーを見つけてインストールするための公式な方法です。

1. smithery.ai でアカウントを作成します
2. メタデータを添えてサーバーを登録します
3. ユーザーは次のコマンドで閲覧して追加できます：smithery install glue-code-generator

オプション 2：npm パッケージ

npx で使えるように npm に公開します。

npm publish
# Users run: npx @yourname/glue-code-generator

オプション 3：GitHub

ユーザーがクローンまたはダウンロードし、MCP クライアントの設定で手動設定します。

注：VS Code には、まだ組み込みの MCP ブラウザーがありません。ユーザーは設定で MCP サーバーを構成するか、Roo Code／Cline などの拡張機能を使用します。

📄 ライセンス

MIT