Maps API JSON to Vue/React components with Zod schemas and live UI previews
🎯 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:
mcp-ui directly in your chat# Install dependencies
npm install
# Build the server
npm run build
# Start the server
npm startServer will be running at:
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"]
}
}
}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># 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 HTTPgenerate_ui_schemaMaps 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:
mcp-ui┌─────────────────────────────────────────────────────────┐
│ 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│ │ │
│ │ └───────────┘ └─────────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘The official way for users to discover and install MCP servers:
smithery install glue-code-generatorPublish to npm for npx usage:
npm publish
# Users run: npx @yourname/glue-code-generatorUsers 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.
MIT