Popmelt MCP 组件生成工具

此仓库提供了利用Popmelt模型上下文协议（MCP）通过自然语言命令动态生成样式化 React 组件的工具。

包含内容

1. MCP 光标集成：使用自然语言命令直接在 Cursor 中生成组件
2. 前端沙箱：用于测试组件生成的网络基 sandbox
3. 命令行工具：从命令行生成组件的脚本

先决条件

• 安装 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

贡献指南

欢迎贡献！请查看 CONTRIBUTING.md 了解如何参与。

许可证

LICENSE

联系方式

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