drio
Open app

Popmelt MCP Server

Source

Catalog onlyCatalog onlySTDIO

Overview

Popmelt MCP Server is a Model-Controlled Programming (MCP) server designed to generate dynamic design systems and UI components based on structured Taste Profiles defined in JSON metadata files.

To use the Popmelt MCP Server, clone the repository, install dependencies, and start the server. Access the visual frontend by navigating to http://localhost:3000 in your browser.

  • Dynamic Profile Processing: Reads and processes profile JSON files. - CSS Generation Engine: Generates modern CSS outputs based on profile attributes. - RESTful API: Complete API for profile application and management. - Visual Frontend: Interactive dashboard for design system generation and preview. - Realtime Preview: View components with applied styles in real-time.
  1. Generating CSS for specific UI components.
  2. Creating and managing design systems for web applications.
  3. Previewing design components with live style updates.

Add to your AI client

Use these steps to connect Popmelt MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-server-test-01-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

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

{
  "mcpServers": {
    "mcp-server-test-01-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-server-test-01-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-server-test-01-avantjohn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-server-test-01-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-server-test-01-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-01-avantjohn"
      ]
    }
  }
}

FAQ

Can I customize the design profiles?

Yes! You can create and modify profiles using JSON metadata.

Is there a visual interface for using the server?

Yes! The server includes a visual frontend for easy interaction.

How do I run tests for the server?

You can run the test suite using the command `npm test`.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":3117,"uuid":"72157038-7915-4e88-96d8-011230de990a","name":"mcp-server-test-01","title":"Popmelt MCP Server","description":"","avatar_url":"https://avatars.githubusercontent.com/u/110754942?v=4","created_at":"2025-03-18T02:54:31.108Z","updated_at":"2025-03-22T16:55:38.074Z","status":"created","author_name":"avantjohn","author_avatar_url":"https://avatars.githubusercontent.com/u/110754942?v=4","tags":"popmelt,mcp-server,design-system","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/avantjohn/mcp-server-test-01","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"\",\"language\":\"CSS\",\"is_official\":false,\"latest_commit_time\":\"2025-03-18 11:45:13\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools