MCP Glue Code Generator

You can install, run, and use the MCP Glue Code Generator to map messy API responses to design system components, then preview the results live in your chat. This server automates the creation of Zod schemas from API JSON and a UI rendering layer, so you can rapidly integrate API data with Vue or React components and verify visuals in real time.

How to use

Set up your MCP client to connect to the Glue Code Generator, then use its two-stage workflow to convert API JSON into a Design System mapping and preview the UI in chat.

How to install

Prerequisites: Node.js installed on your machine. You will also need an MCP client setup in your development environment.

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

Configuration and usage notes

The server exposes a local Health Check and an MCP endpoint for integration. Use the local endpoints to verify that the server is running and to connect your MCP client for scheduling tasks, previews, and schema generation.

Health Check: http://localhost:3000/
MCP Endpoint: http://localhost:3000/mcp

Testing with MCP Inspector

Quickly verify that the server is reachable and returns expected data structures by using the Inspector tool.

# 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

Available tools

Analyze API JSON

Analyzes the incoming API JSON to determine structure, fields, and types so the next stages can map data to component props.

Generate Zod Schema

Creates a Zod schema that validates the API data and aligns with the target design system component props.

Render UI Resource

Renders a live UI preview of the mapped component in the MCP chat using the generated schema and component code.