Which integrations are available for this server?

Maps messy API JSON responses to [React](/mcp/servers/integrations/react) Design System components using Zod schemas, with automated glue code generation and live UI previews Generates [Zod](/mcp/servers/integrations/zod) schemas to map API JSON responses to Vue or React component props, enabling type-safe data transformation between backend APIs and frontend design systems

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:

Stage 1 (Factory): Takes "Messy API JSON" + "Design System Component" (Vue or React) → Generates Zod Schema mapping
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"

Open your AI chat (VS Code with Roo Code, or Claude Desktop)
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>

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:

Parameter	Type	Description
`api_json_sample`	string	JSON response from backend API
`vue_component_code`	string	Vue component from Design System

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:

Create account at smithery.ai
Submit your server with metadata
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

MCP UI Glue Code Generator

MCP UI Glue Code Generator

✨ What is this?

🚀 Quick Start

🔧 VS Code Integration

Option 1: Roo Code / Cline Extension

Option 2: Claude Desktop

🎮 Demo Walkthrough

The "Magic Moment"

🧪 Testing with MCP Inspector

📦 Tool Reference

`generate_ui_schema`

🏗️ Architecture

🚀 Publishing & Distribution

Option 1: Smithery (MCP Marketplace)

Option 2: npm Package

Option 3: GitHub

📄 License

Resources

Tools

New MCP Servers

Latest Blog Posts

MCP directory API