Glue Code Generator

io.github.Maverick7Published by GitHub account Maverick7v1.0.6Updated Oct 24, 2026

Maps API JSON to Vue/React components with Zod schemas and live UI previews

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Generates Zod schemas mapping sample API JSON to Vue or React design-system components and renders a live UI preview in chat.

What you can do
  • Generate a Zod schema that maps a sample API JSON response onto the props of a Vue component from a design system
  • Return a preview of the mapped data alongside the generated schema code
  • Render a live HTML card of the result inside the chat via mcp-ui
  • Work in two stages: schema generation from messy API JSON, then runtime preview rendering
When to use it
Useful when wiring a frontend to a backend API and you want the assistant to draft the schema mapping between an API response and an existing design-system component, and to show what the mapped card would look like before writing integration code.
Requirements
Runs as a local Node.js process; the README describes installing dependencies, building and starting the server, and pointing the client at the built entry file. The README also mentions a local HTTP endpoint on port 3000 for health checks and MCP connections. No accounts, API keys or environment variables are declared.
Before you install
The tool takes API response samples and component source code as input, so avoid pasting real customer data or secrets into prompts. The README's client configuration examples use a hard-coded local file path that must be replaced with your own build location. Generated schema code and previews should be reviewed before being used in a project.

Installation

In SourceWeft

  1. Open Glue Code Generator in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

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:

  1. Stage 1 (Factory): Takes "Messy API JSON" + "Design System Component" (Vue or React) → Generates Zod Schema mapping
  2. Stage 2 (Runtime): Renders a live preview using mcp-ui directly in your chat

🚀 Quick Start

bash
# Install dependenciesnpm install
# Build the servernpm run build
# Start the servernpm start

Server will be running at:

🔧 VS Code Integration

Option 1: Roo Code / Cline Extension

Add to your VS Code settings (settings.json):

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:

json
{  "mcpServers": {    "glue-code-generator": {      "command": "node",      "args": ["d:/MCPUIPlugin/build/index.js"]    }  }}

🎮 Demo Walkthrough

The "Magic Moment"

  1. Open your AI chat (VS Code with Roo Code, or Claude Desktop)
  2. 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>
  1. Result: The tool generates the Zod schema AND renders the actual card live in chat!

🧪 Testing with MCP Inspector

bash
# Quick CLI testnpx @modelcontextprotocol/inspector --cli http://localhost:3000/mcp --method tools/list
# Or use the GUInpx @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:

ParameterTypeDescription
api_json_samplestringJSON response from backend API
vue_component_codestringVue 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:

  1. Create account at smithery.ai
  2. Submit your server with metadata
  3. Users can browse and add via: smithery install glue-code-generator

Option 2: npm Package

Publish to npm for npx usage:

bash
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

Source: README.md at commit a754dfb

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v1.0.6LatestSep 16, 2026

Score

40% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

    Declare a license in the repository or the registry entry.