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

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

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

Server will be running at:

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

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

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

Add to claude_desktop_config.json:

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

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>

1. Result: The tool generates the Zod schema AND renders the actual card live in chat!

#