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:

{

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

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

🧪 Testing with MCP Inspector

# Quick CLI test

npx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list

Or use the GUI

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