Component Builder MCP Server

组件生成器MCP服务器

MCP服务器，用于根据Shadcn UI标准和条件生成自定义组件。

特性

• 🎨 按照Shadcn/UI模式生成自定义React组件
• 📝 TypeScript支持正确的类型定义
• 🎯 顺风CSS与类方差权威的集成
• ✅ 组件验证和标准检查
• 📚 基于模板的生成系统
• ♿ 无障碍优先方法
• 🔍 提供建议的全面验证

安装

npm install
npm run build

用法

作为MCP服务器

服务器通过stdio运行，可以与MCP兼容的客户端集成：

npm start

测试

运行内置测试以验证功能：

npm test

可用工具

🔧 发电机组件

根据以下规格创建新组件：

• 组件类型选择（按钮、输入、卡、模式等）
• 自定义道具定义
• 造型和可访问性配置
• 尺寸和变体选项

✅ validate_component

检查组件是否符合Shadcn标准：

• TypeScript验证
• 无障碍合规性
• 性能建议
• 代码质量检查

📋 列表_组件_类型

通过以下方式获取可用的组件类型和模板：

• 详细说明
• 可用变体
• 使用示例

📖 get_component_template

检索特定组件模板信息：

• 模板结构
• 配置选项
• 实施示例

🎯 generate_component_示例

生成组件类型的使用示例：

• 基本使用模式
• 高级配置
• 现实世界场景

组件类型

组件标准

此服务器遵循Shadcn/UI标准，包括：

✨ 代码质量

• 使用泛型进行正确的TypeScript类型
• React.forwardRef用于参考处理
• 用于调试的DisplayName
• 一致的命名约定（PascalCase）

🎨 样式

• 带有语义标记的顺风CSS类
• 用于变量处理的类差异权限
• cn() 类名组合实用程序
• 一致的配色方案和尺寸

♿ 无障碍

• ARIA属性和角色
• 键盘导航支持
• 焦点管理和可见焦点指标
• 语义HTML元素

⚡ 演出

• 优化的重新渲染模式
• 正确记忆用法
• 组件尺寸考虑因素
• 高效的道具处理

示例用法

生成自定义按钮

{
  "name": "SubmitButton",
  "type": "button",
  "description": "Form submission button with loading state",
  "variant": "default",
  "size": "lg",
  "props": [
    {
      "name": "loading",
      "type": "boolean",
      "required": false,
      "description": "Show loading spinner"
    }
  ],
  "children": true,
  "accessibility": {
    "ariaLabel": "Submit form"
  }
}

验证组件代码

{
  "componentCode": "your-component-code-here",
  "strict": true
}

配置

MCP客户端配置示例：

{
  "mcpServers": {
    "component-builder": {
      "command": "node",
      "args": ["/path/to/component-builder-mcp-server/dist/index.js"],
      "description": "Component Builder MCP Server"
    }
  }
}

发展

项目结构

src/
├── index.ts              # Main MCP server
├── types/
│   └── component.ts      # TypeScript type definitions
├── templates/
│   ├── *.hbs            # Handlebars templates
│   └── index.ts         # Template registry
├── utils/
│   ├── generator.ts     # Component generation logic
│   ├── validator.ts     # Component validation
│   └── helpers.ts       # Utility functions
examples/
├── basic-usage.md       # Basic usage examples
├── advanced-usage.md    # Advanced examples
└── api-reference.md     # Complete API documentation
test/
└── basic-test.js        # Integration tests

建筑

npm run build    # Build TypeScript and copy templates
npm run dev      # Watch mode for development

测试

npm test         # Run integration tests

贡献

1. 分叉存储库
2. 创建要素分支
3. 添加新功能的测试
4. 更新文档
5. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件。