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

🔧 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:

---

View the full README on GitHub