{
  "markdown": "# MCP UI Glue Code Generator\n\n> 🎯 **The Grand Slam Demo**: Maps messy API JSON to **Vue OR React** Design System components using Zod schemas, with live UI previews via MCP-UI.\n\n## ✨ What is this?\n\nThis is a **Two-Stage System** for automating frontend integration:\n\n1. **Stage 1 (Factory)**: Takes \"Messy API JSON\" + \"Design System Component\" (Vue or React) → Generates **Zod Schema** mapping\n2. **Stage 2 (Runtime)**: Renders a live preview using `mcp-ui` directly in your chat\n\n## 🚀 Quick Start\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the server\nnpm run build\n\n# Start the server\nnpm start\n```\n\nServer will be running at:\n- **Health Check**: http://localhost:3000/\n- **MCP Endpoint**: http://localhost:3000/mcp\n\n## 🔧 VS Code Integration\n\n### Option 1: Roo Code / Cline Extension\n\nAdd to your VS Code settings (`settings.json`):\n\n```json\n{\n  \"roo-cline.mcpServers\": {\n    \"glue-code-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"d:/MCPUIPlugin/build/index.js\"]\n    }\n  }\n}\n```\n\n### Option 2: Claude Desktop\n\nAdd to `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"glue-code-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"d:/MCPUIPlugin/build/index.js\"]\n    }\n  }\n}\n```\n\n## 🎮 Demo Walkthrough\n\n### The \"Magic Moment\"\n\n1. Open your AI chat (VS Code with Roo Code, or Claude Desktop)\n2. Paste this prompt:\n\n```\nMap this API response to this Vue component:\n\nAPI Response:\n{\n  \"cust_id\": \"USR-12345\",\n  \"tx_timestamp\": \"2025-12-06T10:30:00Z\",\n  \"stat_cd\": \"STATUS_OK\",\n  \"amt_val\": 1250.50,\n  \"desc_txt\": \"Monthly subscription payment\"\n}\n\nVue Component:\n<template>\n  <div class=\"ds-card\" :class=\"variant\">\n    <h3>{{ title }}</h3>\n    <p class=\"subtitle\">{{ subtitle }}</p>\n    <span class=\"amount\">{{ formattedAmount }}</span>\n    <span class=\"badge\" :class=\"variant\">{{ status }}</span>\n  </div>\n</template>\n```\n\n3. **Result**: The tool generates the Zod schema **AND** renders the actual card live in chat!\n\n## 🧪 Testing with MCP Inspector\n\n```bash\n# Quick CLI test\nnpx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list\n\n# Or use the GUI\nnpx @modelcontextprotocol/inspector\n# Then connect to http://localhost:3000/mcp with Streamable HTTP\n```\n\n## 📦 Tool Reference\n\n### `generate_ui_schema`\n\nMaps API JSON to Vue component props.\n\n**Inputs:**\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `api_json_sample` | string | JSON response from backend API |\n| `vue_component_code` | string | Vue component from Design System |\n\n**Outputs:**\n- Generated Zod schema code\n- Mapped data preview\n- Live HTML card rendered via `mcp-ui`\n\n## 🏗️ Architecture\n\n```\n┌─────────────────────────────────────────────────────────┐\n│                    MCP Client                           │\n│         (VS Code / Claude Desktop / Goose)              │\n└────────────────────────┬────────────────────────────────┘\n                         │ MCP Protocol\n                         ▼\n┌─────────────────────────────────────────────────────────┐\n│             glue-code-generator Server                  │\n│  ┌─────────────────────────────────────────────────┐   │\n│  │         generate_ui_schema Tool                  │   │\n│  │  ┌───────────┐  ┌─────────────┐  ┌───────────┐  │   │\n│  │  │  Analyze  │→ │  Generate   │→ │  Render   │  │   │\n│  │  │  API JSON │  │ Zod Schema  │  │ UIResource│  │   │\n│  │  └───────────┘  └─────────────┘  └───────────┘  │   │\n│  └─────────────────────────────────────────────────┘   │\n└─────────────────────────────────────────────────────────┘\n```\n\n## 🚀 Publishing & Distribution\n\n### Option 1: Smithery (MCP Marketplace)\nThe official way for users to discover and install MCP servers:\n1. Create account at [smithery.ai](https://smithery.ai)\n2. Submit your server with metadata\n3. Users can browse and add via: `smithery install glue-code-generator`\n\n### Option 2: npm Package\nPublish to npm for `npx` usage:\n```bash\nnpm publish\n# Users run: npx @yourname/glue-code-generator\n```\n\n### Option 3: GitHub\nUsers clone/download and configure manually in their MCP client settings.\n\n> **Note**: VS Code doesn't have a built-in MCP browser yet. Users configure MCP servers in their settings or use extensions like Roo Code/Cline.\n\n## 📄 License\n\nMIT\n",
  "bytes": 4260,
  "sha": "74ef0d831f6cb7b46bb0bde406d623246741a0b11b16f2a46c8b96a18b17580c",
  "repo_slug": "maverick7/mcp-glue-code-generator",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_maverick7_glue_code_generator_337e2f2d/readme"
}