Glue Code Generator

Name: Glue Code Generator
Author: Maverick7

作者：Maverick7版本 1.0.6i★ –i在你的电脑上运行

注册名称io.github.Maverick7/glue-code-generator

安装

概览

作者提供的说明（英文原文）

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

PopNx MCP 的三大支柱

这三项永远不会合并成一个分数：意见、测量和人气是不同的东西。

用户评价i暂无评价评价功能将在后续阶段与账户功能一起开放
我们的基础检查i1 项中通过 1 项依据公开信息检查；尚未扫描代码
使用情况i尚未统计★ –

它能帮你做什么

我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。

连接方式: 在你的电脑上运行
传输方式: stdio
分类: 其他

安装

选择你使用的 AI 应用，然后复制设置。

安装之前

基础检查：1 项中通过 1 项
在你的电脑上运行，拥有你的用户账户的权限（文件、网络、应用）。
注册中心没有列出需要填写的密钥。

你需要

npm已安装 Node.js（用于 npx 命令）

你用的是哪个应用？

ClaudeClaude CodeCursorVS CodeChatGPT

在上方选择你的应用。我们会记住它，下次按钮会显示“安装到 …”。

打开 Claude Desktop → Settings → Developer → Edit Config，把下面的内容粘贴到 claude_desktop_config.json

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

在终端中运行这条命令

claude mcp add glue-code-generator -- npx -y mcp-glue-code-generator

在 Cursor 中打开

或者自己复制设置

粘贴到项目中的 .cursor/mcp.json，或 ~/.cursor/mcp.json

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

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

在 VS Code 中打开

或者自己复制设置

粘贴到项目中的 .vscode/mcp.json

{
  "servers": {
    "glue-code-generator": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "mcp-glue-code-generator"
      ]
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

这个服务器在你的电脑上运行，而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。

你的选择通过 Cookie 保存在这台设备上，无需账户。

这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同，请以 README 为准。

它能做什么

它在你的电脑上运行；安装后，工具列表会显示在你的 AI 应用中。

基础检查i

我们检查的是任何人都能看到的信息；我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月6日

✓ 通过
作者与仓库一致
注册名称已通过 GitHub 账户 Maverick7 验证，该账户拥有此仓库
… 尚未检查
仍在维护
我们还没有从 GitHub 读取这个仓库
… 尚未检查
有许可证
我们还没有从 GitHub 读取这个仓库
– 不适用
端点有响应
它在你的电脑上运行，没有互联网端点
– 不适用
使用 OAuth 登录
在你的电脑上运行，改用本地设置
… 尚未检查
工具描述中没有隐藏指令
它在你的电脑上运行；我们只能读取互联网端点的工具列表

与“其他”中的其他服务器比较i

星标数多于此分类中其他 32435 个服务器的 0%
发布到注册中心的时间比此分类中其他 32435 个服务器的 1% 更新
基础检查结果等于或优于此分类中其他 32435 个服务器的 100%

与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时，星标数才计入。

常见问题

Glue Code Generator 安全吗？

它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前，请先看看这个服务器要求哪些权限，并使用只具备所需权限的密钥。

它需要哪些密钥或代码？

注册中心没有列出必需的密钥，不过有些服务器会在首次使用时要求你登录。

它在我的电脑上运行还是在云端？

它在你的电脑上运行。你的 AI 应用会在需要时启动它，数据不会经过作者的服务器（除非它自己调用在线服务）。

它还在维护吗？

GitHub 仓库最后更新于–，最新版本（1.0.6）于11个月前进入注册中心。

哪些应用可以使用它？

支持 MCP 的应用，例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。

有什么可以替代它？

同一分类中有：Spec Driven Development, Remote Desktop Commander, Apify MCP Server

替代选择

同一分类中其他作者的服务器，按星标数排序。

如何看卡片：★ GitHub 星标i三大支柱：评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i

Spec Driven Development

作者：formulahendry

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

在你的电脑上运行★ 440MIT14个月前更新

安装

Remote Desktop Commander

作者：desktop-commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

在云端运行★ 211昨天更新

安装

Apify MCP Server

作者：apify

Extract data from any website with thousands of scrapers, crawlers, and automations on Apify Store ⚡

在云端运行今天更新

安装

作者的 README

打开 README

按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。

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

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

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

Option 2: Claude Desktop

Add to claude_desktop_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:

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:

Result: The tool generates the Zod schema AND renders the actual card live in chat!

🧪 Testing with MCP Inspector

# 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

┌─────────────────────────────────────────────────────────┐

│ 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:

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