Glue Code Generator

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "glue-code-generator": {
      "command": "npx",
      "args": [
        "-y",
        "@yourname/glue-code-generator"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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-ui directly in your chat

🚀 Quick Start

bash

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

Server 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):

config.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:

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:

Code

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

bash

# 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
`api_json_sample`	string	JSON response from backend API
`vue_component_code`	string	Vue component from Design System

Outputs:

Generated Zod schema code
Mapped data preview
Live HTML card rendered via mcp-ui

🏗️ Architecture

Code

┌─────────────────────────────────────────────────────────┐
│                    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:

Terminal

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

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

1.1M

Package downloads in the last 30 days.

Last commit

5mo ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Glue Code Generator

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "glue-code-generator": { "command": "npx", "args": ["-y","@yourname/glue-code-generator"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Glue Code Generator AllMCPs Directory Badge

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/glue-code-generator?style=directory)](https://allmcps.com/mcp/glue-code-generator)

HTML Embed

<a href="https://allmcps.com/mcp/glue-code-generator"><img src="https://allmcps.com/api/badge/glue-code-generator?style=directory" alt="Glue Code Generator on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

5/6 checks healthy over the last 45d

40Quality signal: Fair · 40/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity5/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · @yourname/glue-code-generator (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge and attach your website — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Glue Code Generator →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

Glue Code Generator

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "glue-code-generator": {
      "command": "npx",
      "args": [
        "-y",
        "@yourname/glue-code-generator"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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-ui directly in your chat

🚀 Quick Start

bash

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

Server 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):

config.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:

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:

Code

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

bash

# 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
`api_json_sample`	string	JSON response from backend API
`vue_component_code`	string	Vue component from Design System

Outputs:

Generated Zod schema code
Mapped data preview
Live HTML card rendered via mcp-ui

🏗️ Architecture

Code

┌─────────────────────────────────────────────────────────┐
│                    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:

Terminal

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

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

1.1M

Package downloads in the last 30 days.

Last commit

5mo ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Glue Code Generator

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "glue-code-generator": { "command": "npx", "args": ["-y","@yourname/glue-code-generator"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/glue-code-generator?style=directory)](https://allmcps.com/mcp/glue-code-generator)

HTML Embed

<a href="https://allmcps.com/mcp/glue-code-generator"><img src="https://allmcps.com/api/badge/glue-code-generator?style=directory" alt="Glue Code Generator on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

5/6 checks healthy over the last 45d

40Quality signal: Fair · 40/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity5/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · @yourname/glue-code-generator (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.