Popmelt MCP Server
by avantjohn
A Model-Controlled Programming (MCP) 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 and a visual frontend for design system generation and preview.
Last updated: N/A
What is Popmelt MCP Server?
The Popmelt MCP Server is a backend application designed to generate dynamic design systems and UI components from JSON-based Taste Profiles. It leverages these profiles to create modern CSS outputs, manage design tokens, and handle component variants, all accessible through a RESTful API and a visual frontend.
How to use Popmelt MCP Server?
To use the Popmelt MCP Server, first clone the repository, install the dependencies using npm install
, and start the server with npm start
. Access the visual frontend via http://localhost:3000
to browse profiles, generate CSS, and preview components. Utilize the API endpoints to apply talent profiles, generate full design systems, and manage profiles programmatically.
Key features of Popmelt MCP Server
Dynamic Profile Processing
CSS Generation Engine
Design Token System
RESTful API
Visual Frontend
Realtime Preview
Component Templates
Context Provider
Use cases of Popmelt MCP Server
Rapid prototyping of UI components
Generating consistent design systems across multiple projects
Creating themeable UI libraries
Automating the creation of CSS variables and design tokens
FAQ from Popmelt MCP Server
How do I add a new design profile?
How do I add a new design profile?
Create a new JSON file in the /profiles
directory following the specified profile structure. The server will automatically detect and load the new profile.
Can I customize the generated CSS?
Can I customize the generated CSS?
Yes, by modifying the JSON profile definitions, you can control the CSS output. The server uses these profiles to generate CSS variables and styles.
How do I deploy this server to production?
How do I deploy this server to production?
You can deploy the server to any Node.js hosting platform, such as Heroku, AWS, or Google Cloud. Ensure that the PORT
environment variable is set correctly.
What are the available API endpoints?
What are the available API endpoints?
The server provides endpoints for applying talent profiles, generating full design systems, generating component CSS, retrieving available profiles, and managing profiles (CRUD operations). See the API Endpoints section in the README for details.
How can I contribute to the project?
How can I contribute to the project?
Fork the repository, create a feature branch, commit your changes, push to the branch, and open a Pull Request. Contributions are welcome!