MCP Server Test 03

🚀 Popmelt MCP Component Generator

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

📦 Included Features

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 Tool: Scripts for generating components from the command line.

⚙️ Prerequisites

• Install Node.js 14+.
• Ensure the MCP server is running at http://localhost:3000.

🚀 Quick Start

1. Start the MCP Server

First, make sure 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 offers 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.
• View a live preview of the 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 in 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).
   • Enter: "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 Tool

You can also generate components directly from the command line:

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

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

💬 Natural Language Commands

The system supports various phrases:

• "Create a button component with olivia gray"
• "Generate a card component using olivia style"
• "Make a text component with gray style"

Supported Component Types

• button: Interactive button component
• card: Content container card
• heading: Text headings of various sizes
• text: Generic text element
• input: Form input element
• nav: Navigation component
• badge: Indicator badge element
• modal: Dialog modal component
• alert: Message prompt component
• table: Data table component

Supported Configuration Files

Currently supported:

• "olivia gray" (default if not specified)

💻 Generated Components

All components are generated with:

• TypeScript interfaces for properties.
• Modern React functional components.
• Correct types for all properties.
• A 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>
  );
}

📁 Project Structure

project/
├── src/
│   ├── components/       # Component directory
│   │   └── Button.tsx    # Generated button component
│   └── App.tsx          # Example application
└── package.json         # Project dependency file

📖 Usage Instructions

1. Clone the repository:

git clone https://github.com/your-repository.git
cd your-repository
npm install

2. Start the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

🤝 Contribution Guidelines

Contributions are welcome! Please see CONTRIBUTING.md for details on how to contribute.

📄 License

LICENSE

📧 Contact

If you have any questions, please contact your-email@example.com.