Glue Code Generator

MCP UI Glue Code Generator

🎯 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.

✨ What is this?

This is a Two-Stage System for automating frontend integration:

1. Stage 1 (Factory): Takes "Messy API JSON" + "Design System Component" (Vue or React) → Generates Zod Schema mapping
2. Stage 2 (Runtime): Renders a live preview using mcp-ui directly in your chat

🚀 Quick Start

# Install dependenciesnpm install
# Build the servernpm run build
# Start the servernpm start

Server will be running at:

• Health Check: http://localhost:3000/
• MCP Endpoint: http://localhost:3000/mcp

🔧 VS Code Integration

Option 1: Roo Code / Cline Extension

Add to your VS Code settings (settings.json):

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

Option 2: Claude Desktop

Add to claude_desktop_config.json:

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

🎮 Demo Walkthrough

The "Magic Moment"

1. Open your AI chat (VS Code with Roo Code, or Claude Desktop)
2. Paste this prompt:

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. Result: The tool generates the Zod schema AND renders the actual card live in chat!

🧪 Testing with MCP Inspector

# Quick CLI testnpx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list
# Or use the GUInpx @modelcontextprotocol/inspector# Then connect to http://localhost:3000/mcp with Streamable HTTP

📦 Tool Reference

generate_ui_schema

Maps API JSON to Vue component props.

Inputs:

Outputs:

• Generated Zod schema code
• Mapped data preview
• Live HTML card rendered via mcp-ui

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐│                    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│  │   ││  │  └───────────┘  └─────────────┘  └───────────┘  │   ││  └─────────────────────────────────────────────────┘   │└─────────────────────────────────────────────────────────┘

🚀 Publishing & Distribution

Option 1: Smithery (MCP Marketplace)

The official way for users to discover and install MCP servers:

1. Create account at smithery.ai
2. Submit your server with metadata
3. Users can browse and add via: smithery install glue-code-generator

Option 2: npm Package

Publish to npm for npx usage:

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

Option 3: GitHub

Users clone/download and configure manually in their MCP client settings.

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.

📄 License

MIT