Popmelt MCP Component Generation Tools

This repository provides tools for generating dynamically styled React components using the Popmelt Model Context Protocol (MCP) through natural language commands.

What's Included

1. MCP Cursor Integration: Generate components directly in Cursor using natural language commands
2. Frontend Sandbox: A web-based sandbox for testing component generation
3. Command-line Tools: Scripts for generating components from the command line

Prerequisites

• Node.js 14+ installed
• MCP server running at http://localhost:3000

Getting Started

1. Start the MCP Server

First, ensure the MCP server is running:

npm run dev

This will start the server at http://localhost:3000.

2. Choose Your Tool

A. Use the Frontend Sandbox

The frontend sandbox provides a visual way to test component generation:

# Navigate to the sandbox directory
cd sandbox

# Install dependencies and start the sandbox
npm install
npm start

This will open the sandbox in your browser, where you can:

• Enter natural language commands to generate components
• See live previews of generated components
• Copy TypeScript and CSS code for your own projects
• Save a history of generated components

See the Sandbox README for more details.

B. Use the Cursor Integration

The Cursor integration allows you to generate components directly from within the Cursor editor:

1. Install the integration:

   node setup-cursor-mcp.js
   

2. Use in Cursor:

   • Press Cmd+Shift+G (Mac) or Ctrl+Shift+G (Windows/Linux)
   • Type: "create a button component with olivia gray"
   • The component will be generated and opened in Cursor

See the Cursor MCP README for more details.

C. Use the Command Line Tools

You can also generate components directly from the command line:

# Using the NLP generator
node cursor-nlp-component-generator.js "create a button component with olivia gray"

# Using the simpler generator
node generate-component.js button olivia-gray

Natural Language Commands

The system understands various phrasings:

• "create a button component with olivia gray"
• "generate a card component using olivia"
• "make me a text component with gray style"

Supported Component Types

• button: Interactive button components
• card: Card containers for content
• heading: Text headings in various sizes
• text: General text elements
• input: Form input elements
• nav: Navigation components
• badge: Badge indicator elements
• modal: Modal dialog components
• alert: Alert message components
• table: Data table components

Supported Profiles

Currently supports:

• "olivia gray" (default if none specified)

Generated Components

All components are generated with:

• TypeScript interfaces for props
• Modern React functional components
• Proper typing for all props
• Consistent directory structure

Example component usage:

import React from 'react';
import Button from './components/Button';

function App() {
  return (
    <div className="app">
      <h1>My Application</h1>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

Troubleshooting

If you encounter issues:

1. Make sure the MCP server is running at http://localhost:3000
2. Check for error messages in the console or terminal
3. Try using different phrasing in your natural language commands
4. Ensure you're specifying a component type in your command

Project Structure

/
├── cursor-mcp-nlp-integration.js    # Core NLP integration library
├── cursor-nlp-component-generator.js # NLP command line tool
├── cursor-prompt-commands.js        # Cursor prompt command handler
├── cursor-nlp-extension.json        # Cursor extension configuration
├── cursor-nlp-keymap.json           # Keyboard shortcuts for Cursor
├── setup-cursor-mcp.js              # Cursor integration setup script
├── CURSOR-MCP-MAIN-README.md        # Detailed Cursor integration docs
├── sandbox/                         # Frontend sandbox
│   ├── index.html                   # Sandbox HTML
│   ├── styles.css                   # Sandbox styles
│   ├── sandbox.js                   # Sandbox functionality
│   ├── setup.js                     # Sandbox setup script
│   └── README.md                    # Sandbox documentation
└── README.md                        # This file

License

MIT