MCP Glue Code Generator

🚀 MCP UI Glue Code Generator

このツールは、Zodスキーマを使用して、混乱したAPI JSONをVueまたはReactのデザインシステムコンポーネントにマッピングし、MCP-UIを介してライブUIプレビューを提供します。

🚀 クイックスタート

# 依存関係のインストール
npm install

# サーバーのビルド
npm run build

# サーバーの起動
npm start

サーバーは以下のアドレスで実行されます:

• ヘルスチェック: http://localhost:3000/
• MCPエンドポイント: http://localhost:3000/mcp

✨ 主な機能

これは、フロントエンドの統合を自動化するための二段階システムです:

1. 第1段階 (ファクトリー): "混乱したAPI JSON" + "デザインシステムコンポーネント" (VueまたはReact) を入力として受け取り、Zodスキーマのマッピングを生成します。
2. 第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 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. 以下のプロンプトを貼り付けます:

この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
# その後、Streamable HTTPでhttp://localhost:3000/mcpに接続する

📦 ツールリファレンス

generate_ui_schema

API JSONを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
# ユーザーは以下を実行します: npx @yourname/glue-code-generator

オプション3: GitHub

ユーザーはクローン/ダウンロードして、自分のMCPクライアント設定で手動で構成します。

⚠️ 重要提示

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

📄 ライセンス

MIT