MCP UI Glue Code Generator
Maps messy API JSON responses to React Design System components using Zod schemas, with automated glue code generation and live UI previews
Generates 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
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP UI Glue Code GeneratorMap this API response to this React component: {"user_id": "123", "name": "John Doe", "email": "john@example.com"}"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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-uidirectly in your chat
🚀 Quick Start
# Install dependencies
npm install
# Build the server
npm run build
# Start the server
npm startServer 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 |
| string | JSON response from backend API |
| 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-generatorOption 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
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Tools
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Maverick7/mcp-glue-code-generator'
If you have feedback or need assistance with the MCP directory API, please join our Discord server