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 Generator Map 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.
🎯 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:
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
Related MCP server: Sunnyside Figma MCP
# 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
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"]
}
}
}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!
# 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 |
| 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
┌─────────────────────────────────────────────────────────┐
│ 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:
Create account at smithery.ai
Submit your server with metadata
Users can browse and add via: smithery install glue-code-generator
Publish 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
Maps messy API JSON to Vue/React Design System component props using Zod schema. Returns both the generated schema code and a live UI preview. Optionally saves preview as HTML file.
| Name | Required | Description | Default |
|---|---|---|---|
| api_json_sample | Yes | A sample JSON response from the backend API | |
| vue_component_code | Yes | The Vue component code from the Design System | |
| output_path | No | Optional path to save the HTML preview file (e.g., ./preview.html) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It describes key behaviors: mapping JSON to component props, generating schema code, providing a live UI preview, and optional file saving. However, it lacks details about error handling, performance characteristics, authentication needs, or rate limits. For a tool with no annotations, this provides basic behavioral context but leaves gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is highly concise and well-structured in two sentences. The first sentence front-loads the core functionality (mapping and returns), while the second adds an optional feature (saving). Every word contributes directly to understanding the tool's capabilities without redundancy or fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (3 parameters, no output schema, no annotations), the description is somewhat complete. It covers the main transformation purpose and optional saving, but lacks details on output format (beyond 'schema code' and 'UI preview'), error cases, or integration constraints. Without an output schema, more explanation of return values would be beneficial, making this minimally adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all three parameters thoroughly. The description adds minimal value beyond the schema by mentioning 'messy API JSON' (hinting at the nature of api_json_sample) and 'Optional path to save the HTML preview file' (clarifying output_path's purpose). This meets the baseline for high schema coverage but doesn't significantly enhance parameter understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with specific verbs ('Maps', 'Returns', 'Optionally saves') and resources ('messy API JSON', 'Vue/React Design System component props', 'Zod schema', 'generated schema code', 'live UI preview', 'HTML file'). It distinguishes what the tool does from generic transformation tools by specifying the exact input/output mapping and technologies involved.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context through phrases like 'Maps messy API JSON to Vue/React Design System component props' and 'Optionally saves preview as HTML file', suggesting it's for frontend development workflows. However, there are no explicit guidelines about when to use this tool versus alternatives, prerequisites, or limitations. With no sibling tools, this is adequate but lacks explicit guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
With only one tool, there is no possibility of ambiguity or overlap between tools. The tool's purpose is clearly distinct and singular, making misselection impossible.
The single tool name follows a clear verb_noun pattern (generate_ui_schema). Since there is only one tool, consistency is inherently perfect with no deviations to assess.
A single tool is too few for a server named 'MCP UI Glue Code Generator', which suggests a broader scope involving UI generation tasks. This minimal set feels thin and underdeveloped for the implied purpose.
The tool surface is severely incomplete for the domain. While generate_ui_schema handles schema generation and preview, there are obvious gaps such as validation, customization, integration with other UI frameworks, or management of generated schemas, limiting agent workflows.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Serves your design system and coding standards to coding agents, so they stop guessing.
Turn PRDs and product ideas into structured specs so coding agents build your intent, not theirs.
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
