Maps API JSON to Vue/React components with Zod schemas and live UI previews
MCPpedia last refreshed this data
io.github.Maverick7/glue-code-generator is an MCP server that maps API JSON to Vue/React components with Zod schemas and live UI previews. Its tool list has not been published yet over stdio and http, requires no API key, and scores 77/100 on MCPpedia's security, maintenance and efficiency rubric.
Config is the same across clients - only the file and path differ.
{
"mcpServers": {
"io-github-maverick7-glue-code-generator": {
"args": [
"-y",
"mcp-glue-code-generator"
],
"command": "npx"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
Maps API JSON to Vue/React components with Zod schemas and live UI previews
Run this in your terminal to verify the server starts. Then let us know if it worked - your result helps other developers.
npx -y 'mcp-glue-code-generator' 2>&1 | head -1 && echo "✓ Server started successfully"
After testing, let us know if it worked:
Five weighted categories - click any category to see the underlying evidence.
No known CVEs.
Checked mcp-glue-code-generator against OSV.dev.
Click any tool to inspect its schema.
Be the first to review
Have you used this server?
Share your experience - it helps other developers decide.
Sign in to write a review.
Others in developer-tools / design
XcodeBuildMCP provides tools for Xcode project management, simulator management, and app utilities.
Manage Supabase projects — databases, auth, storage, and edge functions
MCP server for using the GitLab API
Codebase knowledge graph for AI agents — 162 languages, sub-ms queries, 99% fewer tokens.
MCP Security Weekly
Get CVE alerts and security updates for io.github.Maverick7/glue-code-generator and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
🎯 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 start
Server 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 HTTP
generate_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-generator