Is the glue-code-generator MCP server free to use?

Yes. glue-code-generator is listed on AllMCPs as a free, open Model Context Protocol server you can install into Claude Desktop, Cursor, or any MCP-compatible client.

Is the glue-code-generator MCP server free to use?

Yes. glue-code-generator is listed on AllMCPs as a free, open Model Context Protocol server you can install into Claude Desktop, Cursor, or any MCP-compatible client.

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

Manual Client & Custom JSON ConfigExpand JSON ▾

Install Config Generator

Choose your client

claude_desktop_config.json

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

💡 Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Related MCP Servers

View all in Developer Tools View all alternatives

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", "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

27Quality signal: Emerging · 27/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 ownership8/20

Documentation & tools11/30

Adoption & activity1/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.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 3,181+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to get the verified badge and attach your website.

Free dofollow backlink: after claiming, verify your product site and place a dofollow AllMCPs badge — we recheck it 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

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

Manual Client & Custom JSON ConfigExpand JSON ▾

Install Config Generator

Choose your client

claude_desktop_config.json

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

💡 Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Related MCP Servers

View all in Developer Tools View all alternatives

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", "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

27Quality signal: Emerging · 27/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 ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

★ Featured

AllMCPs Server

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to get the verified badge and attach your website.

Free dofollow backlink: after claiming, verify your product site and place a dofollow AllMCPs badge — we recheck it 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