Popmelt MCP Server

What is Popmelt MCP Server?

Popmelt MCP Server is a Model-Controlled Programming server for Popmelt, a platform that generates dynamic design systems and UI components based on structured Taste Profiles defined in JSON metadata files. It provides a RESTful API, a visual frontend dashboard, and CSS generation from design tokens.

How to use Popmelt MCP Server?

Clone the repository, install dependencies with npm install, and start the server with npm start (or npm run dev for hot reloading). The server runs on port 3000 by default, configurable via the PORT environment variable. Use the API endpoints or open http://localhost:3000 in a browser to access the visual dashboard.

Key features of Popmelt MCP Server

• Dynamic processing of profile JSON files from a /profiles directory
• CSS generation engine based on weighted attributes within profiles
• Comprehensive design token system for CSS variables
• Component variant handling (hover, focus, active, nested elements)
• RESTful API for profile application, generation, and management
• Visual frontend with real-time component preview

Use cases of Popmelt MCP Server

• Generate CSS for a single component from a design system profile
• Create a complete design system CSS for all components in one request
• Browse, create, update, and delete design system profiles via API
• Preview components with applied styles in real-time using the dashboard
• Integrate design token generation into a CI/CD pipeline

FAQ from Popmelt MCP Server

What technology stack does Popmelt MCP Server use?

It uses Node.js, Express.js, fs-extra, body-parser, cors, and Jest with Supertest for testing. The frontend uses HTML, CSS, and JavaScript.

How are design tokens represented in the profiles?

Profiles contain design tokens such as colors, spacing, typography, borders, and animations. The server automatically converts these tokens into CSS variables (e.g., --color-background, --spacing-medium).

What API endpoints are available for profile management?

Endpoints include POST /api/profiles (create), GET /api/profiles (list all), GET /api/profiles/:slug (get one), PUT /api/profiles/:slug (update), and DELETE /api/profiles/:slug (delete).

Can I generate a complete design system with one call?

Yes, the POST /api/generate-design-system endpoint generates CSS for all components defined in a profile.

How do I verify the server is running correctly?

A health check endpoint is available at /api/health.