🚀 Popmelt MCP 组件生成工具

此工具基于 Popmelt 模型上下文协议（MCP），支持通过自然语言命令动态生成样式化的 React 组件，为开发者提供了便捷高效的组件创建方式。

✨ 主要特性

• MCP 光标集成：可在 Cursor 中直接使用自然语言命令生成组件。
• 前端沙箱：提供网络基 sandbox，用于测试组件生成。
• 命令行工具：支持从命令行生成组件。

📦 安装指南

先决条件

• 安装 Node.js 14+
• MCP 服务器需运行于 http://localhost:3000

🚀 快速开始

1. 启动 MCP 服务器

首先确保 MCP 服务器已运行，执行以下命令：

npm run dev

此命令将在 http://localhost:3000 启动服务器。

2. 选择你的工具

A. 使用前端沙箱

前端沙箱提供了可视化的组件生成测试方式，操作步骤如下：

# 切换到沙箱目录
cd sandbox

# 安装依赖并启动沙箱
npm install
npm start

启动后会在浏览器中打开沙箱，你可以：

• 输入自然语言命令以生成组件。
• 查看生成组件的实时预览。
• 复制 TypeScript 和 CSS 代码用于自己的项目。
• 保存生成组件的历史记录。

更多细节可查看 沙箱 README。

B. 使用 Cursor 集成

Cursor 集成允许你直接在 Cursor 编辑器中生成组件：

1. 安装集成：

node setup-cursor-mcp.js

2. 在 Cursor 中使用：

• 按下 Cmd+Shift+G（Mac）或 Ctrl+Shift+G（Windows/Linux）。
• 输入： "创建一个带有 olivia gray 的按钮组件"。
• 组件将生成并在 Cursor 中打开。

更多细节可查看 Cursor MCP README。

C. 使用命令行工具

你也可以直接从命令行生成组件：

# 使用 NLP 生成器
node cursor-nlp-component-generator.js "创建一个带有 olivia gray 的按钮组件"

# 使用更简单的生成器
node generate-component.js button olivia-gray

💻 使用示例

自然语言命令

系统支持多种说法，例如：

• "创建一个带有 olivia gray 的按钮组件"
• "生成一个使用 olivia 样式的卡片组件"
• "制作一个具有 gray 样式的文本组件"

支持的组件类型

• button：交互式按钮组件
• card：内容容器卡片
• heading：各种大小的文本标题
• text：通用文本元素
• input：表单输入元素
• nav：导航组件
• badge：指示器徽章元素
• modal：对话框模态组件
• alert：消息提示组件
• table：数据表格组件

支持的配置文件

当前支持："olivia gray"（默认若未指定）

生成的组件示例

所有组件都会生成 TypeScript 接口用于属性、现代 React 函数式组件，且所有属性都有正确类型和一致的目录结构。示例组件用法如下：

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

function App() {
  return (
    <div className="app">
      <h1>我的应用程序</h1>
      <Button variant="primary" onClick={() => alert('点击了！')}>
        点击我
      </Button>
    </div>
  );
}

📚 详细文档

项目结构

project/
├── src/
│   ├── components/       # 组件目录
│   │   └── Button.tsx    # 生成的按钮组件
│   └── App.tsx          # 示例应用程序
└── package.json         # 项目依赖文件

使用说明

1. 克隆仓库：

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

2. 启动开发服务器：

npm run dev

3. 在浏览器中打开 http://localhost:3000

📄 许可证

请查看 LICENSE 获取相关信息。

联系方式

如有任何问题，请联系 your-email@example.com 。