Popmelt MCP Component Generation Tools

基本能力

产品定位

Popmelt MCP Component Generation Tools 是一个用于生成动态样式 React 组件的工具集，通过自然语言命令实现快速组件生成。

核心功能

1. MCP Cursor 集成：在 Cursor 编辑器中通过自然语言命令直接生成组件。
2. 前端沙盒：一个基于 Web 的沙盒环境，用于测试组件生成。
3. 命令行工具：通过命令行脚本生成组件。

适用场景

• 快速生成 React 组件，减少手动编写代码的时间。
• 在开发过程中快速原型设计和测试组件样式。
• 通过自然语言命令简化组件生成流程。

工具列表

1. 前端沙盒：提供可视化界面，支持自然语言命令生成组件，并实时预览。
2. Cursor 集成：在 Cursor 编辑器中通过快捷键和自然语言命令生成组件。
3. 命令行工具：通过命令行脚本生成组件，支持批量操作。

常见问题解答

1. MCP 服务器未运行：确保 MCP 服务器在 http://localhost:3000 运行。
2. 命令解析失败：尝试使用不同的自然语言命令格式。
3. 组件类型未指定：确保在命令中指定了有效的组件类型。

使用教程

使用依赖

• Node.js 14+ 已安装。
• MCP 服务器在 http://localhost:3000 运行。

安装教程

1. 启动 MCP 服务器： bash npm run dev
2. 使用前端沙盒： bash cd sandbox npm install npm start
3. Cursor 集成： bash node setup-cursor-mcp.js
4. 命令行工具： bash node cursor-nlp-component-generator.js "create a button component with olivia gray"

调试方式

1. 检查 MCP 服务器是否运行。
2. 查看控制台或终端的错误信息。
3. 尝试不同的自然语言命令格式。

许可证

该项目遵循 MIT 开源许可条款。