AI导哈

UI配置生成器

一个通过自然语言提示生成UI配置JSON的MCP服务器，适用于创建表单配置、分析需求和验证JSON结构。

  • by KayMas2808
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 kaymas2808/mcp-config-generator

使用说明

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 -g

CLI使用情况

全局安装后，您可以从任何地方使用该工具：

# 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设置

  1. 打开光标设置 (Cmd+, 或 Cursor → Settings)
  2. 搜索“MCP” 在设置搜索中
  3. 查找“Mcp:Config” 章节
  4. 添加此配置:
{
  "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

相关 MCP