drio
Open app

Popmelt MCP Component Generation Tools

Source

Catalog onlyCatalog onlySTDIO

Overview

Popmelt MCP Component Generation Tools is a repository that provides tools for generating dynamically styled React components using the Popmelt Model Context Protocol (MCP) through natural language commands.

To use the tools, you need to start the MCP server, and then you can choose between using the Frontend Sandbox, Cursor Integration, or Command-line Tools to generate components.

  • MCP Cursor Integration: Generate components directly in Cursor using natural language commands. - Frontend Sandbox: A web-based sandbox for testing component generation with live previews. - Command-line Tools: Scripts for generating components from the command line.
  1. Quickly generating React components using natural language.
  2. Testing and previewing components in a web-based environment.
  3. Automating component generation in development workflows.

Add to your AI client

Use these steps to connect Popmelt MCP Component Generation Tools 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-03-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-03-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-03-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-03-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-03-avantjohn": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-03-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-03-avantjohn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-test-03-avantjohn"
      ]
    }
  }
}

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

**What are the prerequisites?**

You need Node.js 14+ installed and the MCP server running at http://localhost:3000.

**Can I generate components using different styles?**

Yes! You can specify different styles in your natural language commands.

**What types of components can I generate?**

You can generate various types of components including buttons, cards, headings, text, inputs, navigation, badges, modals, alerts, and tables.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":3371,"uuid":"b0542868-980c-40c1-be1c-af12bfea3e73","name":"mcp-server-test-03","title":"Popmelt MCP Component Generation Tools","description":"","avatar_url":"https://avatars.githubusercontent.com/u/110754942?v=4","created_at":"$D2025-03-19T06:34:20.330Z","updated_at":"$D2025-03-19T06:36:38.152Z","status":"created","author_name":"avantjohn","author_avatar_url":"https://avatars.githubusercontent.com/u/110754942?v=4","tags":"mcp,react,component-generation","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/avantjohn/mcp-server-test-03","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"\",\"language\":\"JavaScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-18 21:45:53\"}","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
Popmelt MCP Component Generation Tools — MCP Registry