MCP配置生成器
从自然语言提示生成UI配置JSON的MCP服务器。非常适合使用简单的英文描述创建表单配置、分析需求和验证JSON结构。
当发现更多的UI配置JSON示例时,或者当渲染器完成时,这将需要更新,因此所有可能的规则和输入都是已知的。它目前基于我能找到的一个例子。
特性
- 自然语言处理 -从简单的英文提示生成UI配置
- CLI和MCP集成 -直接在终端中使用或与Cursor/其他MCP客户端集成
- 配置验证 -验证现有JSON配置
- 需求分析 -解析和分析提示,无需完整生成
快速开始
安装
# Clone and install locally
git clone https://github.com/KayMas2808/mcp-config-generator.git
cd mcp-config-generator
npm install
npm run build
# For using globally in the terminal
npm install -gCLI使用情况
全局安装后,您可以从任何地方使用该工具:
# Generate a form configuration
config-gen generate "Create a contact form with Name, Email, and Phone"
# Analyze a prompt
config-gen analyze "Student registration form with Name, Roll Number, Amount"
# Validate a configuration
config-gen validate '{"data": {"configName": "test"}, "username": "place", "password": "holder"}'
# Get help
config-gen --help本地使用(无全局安装)
# Generate a form
node cli.js generate "Create an employee form with Name, Email, Phone, Salary"
# Or use npm scripts
npm run gen "Create a form with Name and Email"
npm run analyze "Student registration form"光标集成
步骤1:安装软件包
# do this in a terminal window rather than in cursor,
# since you will have to restart cursor after changing the mcp.json file.
git clone https://github.com/KayMas2808/mcp-config-generator.git
cd mcp-config-generator
npm install
npm run build
# run this every time you want to use the tools in cursor
npm start步骤2:配置光标MCP设置
- 打开光标设置 (
Cmd+,或Cursor → Settings) - 搜索“MCP” 在设置搜索中
- 查找“Mcp:Config” 章节
- 添加此配置:
{
"mcpServers": {
"config-generator": {
"command": "/opt/homebrew/bin/node", // your node path - run "which node"
"args": ["/path/to/your/mcp-config-generator/dist/index.js"],
"env": {
"NODE_ENV": "production"
}
}
}
}步骤4:重新启动游标
保存配置后,完全重新启动Cursor以使更改生效。
步骤5:在光标聊天中使用
@config-generator generate a form to capture employee Name, Email, Phone, and Salary
@config-generator analyze "Create a student registration form"
@config-generator validate {"data": {...}, "username": "place", "password": "holder"}可用命令
CLI命令
| 命令 | 描述 | 示例 |
|---|---|---|
generate | 根据提示生成UI配置 | config-gen generate "Contact form with Name, Email" |
analyze | 分析提示并显示需求 | config-gen analyze "Student registration form" |
validate | 验证配置JSON | config-gen validate '{"data": {...}}' |
CLI选项
| 选项 | 描述 | 默认值 |
|---|---|---|
--username | 配置用户名 | "place" |
--password | 配置密码 | "holder" |
--help | 显示帮助消息 | - |
MCP工具(在游标中可用)
| 工具 | 说明 |
|---|---|
generate_config | 生成完整的UI配置JSON |
analyze_prompt | 解析需求而不进行完整生成 |
validate_config | 验证配置结构 |
使用示例
基本表单生成
config-gen generate "Create a simple contact form with Name, Email, and Phone"输出:使用表单字段、验证和UI结构完成JSON配置。
具有自定义设置的高级表单
config-gen generate "Student registration form with Name, Roll Number, Email, and Fee Amount" --username admin --password secret123需求分析
config-gen analyze "Create a conference registration form with Name, Email, Company, and Registration Fee"输出:检测到的字段、验证规则和表单结构的详细细分。
配置验证
config-gen validate '{"data": {"configName": "test_form", "json": {...}}, "username": "obiwan", "password": "kenobi"}'项目结构
mcp-config-generator/
├── src/
│ ├── index.ts # MCP server implementation
│ ├── generator.ts # Configuration generation logic
│ ├── parser.ts # Natural language parsing
│ └── types.ts # Type definitions
├── dist/ # Compiled JavaScript
├── cli.js # CLI interface
├── examples/ # Example prompts and configurations
└── package.json需求
- Node.js >= 18.0.0
- npm >= 8.0.0
可能的问题
游标中“启用了0个工具”:
- 确保Node.js路径在MCP配置中是绝对的
- 验证项目是否已构建(
npm run build) - 配置更改后重新启动Cursor
未找到CLI命令:
- 从项目根目录全局安装:
npm install -g - 或使用本地:
npm run cli或node cli.js
权限错误:
- 使CLI可执行:
chmod +x cli.js - 检查Node.js权限
获取帮助
# Show detailed help
config-gen --help
# Check version
config-gen --version