增强型 Reablocks MCP 服务器

一个强大的模型上下文协议（MCP）服务器，使用 Reablocks 设计系统提供智能的 React 组件生成和组合。该服务器结合了自然语言处理与深度组件知识，生成可用于生产的 React 组件。

🚀 特性

• 🧠 自然语言处理 - 使用简单的英语描述你想要的内容
• ⚛️ 智能组件生成 - 生成带有 TypeScript 的完整 React 组件
• 📚 全面的组件知识 - 对 50 多个 Reablocks 组件有深入的理解
• 🎨 智能代码组合 - 自动组合组件及其属性和模式
• 📱 响应式设计 - 生成的组件包括以移动设备优先的响应式布局
• ♿ 内置无障碍功能 - 符合 WCAG 2.1 AA 标准并带有 ARIA 标签的组件
• 🔧 生产就绪 - 包括错误处理、加载状态和 TypeScript 定义

📦 安装

需求

• Node.js 18+
• Cloudflare Workers 账户
• Claude Desktop 或兼容 MCP 的客户端

设置

1. 克隆或创建你的 MCP 服务器项目

mkdir reablocks-mcp-server
cd reablocks-mcp-server
npm init -y

2. 安装依赖

npm install @modelcontextprotocol/sdk zod
npm install -D typescript @types/node

3. 替换你的 src/index.ts 文件中的增强服务器代码

4. 部署到 Cloudflare Workers

wrangler deploy

5. 配置 Claude Desktop

在你的 claude_desktop_config.json 中添加：

{
  "mcpServers": {
    "reablocks": {
      "command": "node",
      "args": ["path/to/your/server"],
      "env": {
        "MCP_SERVER_URL": "https://your-worker.your-subdomain.workers.dev"
      }
    }
  }
}

🛠️ 可用工具

1. generate_intelligent_dashboard

从自然语言描述中生成完整的仪表板组件。

参数：

• description (字符串)：你想要构建的内容的自然语言描述
• requirements (数组，可选)：具体需求
• styling (对象，可选)：主题和样式偏好

示例：

生成一个包含用户指标、数据可视化和操作按钮的管理员面板仪表板

2. explore_reablocks_components

按类别或搜索来发现和探索可用的 Reablocks 组件。

参数：

• category (枚举，可选)：元素、表单、布局、层、数据、排版
• search (字符串，可选)：用于过滤组件的搜索词

示例：

类别："Form"
搜索："button"

3. ask_about_components

用自然语言提问关于组件的问题，并获得智能推荐。

参数：

• question (字符串)：关于组件的问题

示例：

“我需要一个带有验证和错误处理的表单”
“如何创建一个具有排序和筛选功能的数据表格？”
“显示文件大小的最佳方法是什么？”

4. get_component_documentation

获取任何 Reablocks 组件的全面文档。

参数：

• componentName (字符串)：组件名称（例如，“Button”，“Input”）

示例：

componentName: "Button"

5. list_all_components

获取所有可用 Reablocks 组件的完整概述，按类别组织。

参数： 无

💡 使用示例

创建登录表单

提示："创建一个带有电子邮件、密码字段和验证的登录表单"

生成的输出：
- 带有 TypeScript 的完整 React 组件
- 表单验证和错误处理
- 响应式设计
- 无障碍功能
- 加载状态

构建仪表板

提示："生成一个带有指标卡片、用户表格和导航的仪表板"

生成的输出：
- 基于网格的响应式布局
- 带有数据可视化的指标卡片
- 带有搜索/筛选功能的交互式数据表格
- 导航侧边栏
- 加载和错误状态

数据展示组件

提示："给我展示一些用于显示文件大小和日期的组件"

生成的输出：
- 用于人类可读文件大小的 DataSize 组件
- 用于灵活日期显示的 DateFormat 组件
- 使用示例和属性文档

🎨 生成组件特性

所有生成的组件都包括：

✅ React 最佳实践

• 使用钩子的功能组件
• 合适的状态管理
• 事件处理
• 组件组合

✅ TypeScript 支持

• 完整类型定义
• 接口声明
• 类型安全属性
• 在适用的情况下支持泛型类型

✅ 响应式设计

• 移动设备优先的方法
• 灵活的网格布局
• 断点感知样式
• 触摸友好交互

✅ 无障碍

• ARIA 标签和角色
• 键盘导航
• 屏幕阅读器支持
• 焦点管理
• 颜色对比度合规

✅ 错误处理

• 加载状态
• 错误边界
• 平滑降级
• 用户反馈

✅ 现代样式

• Tailwind CSS 类
• CSS Grid 和 Flexbox
• 一致的间距
• 主题感知颜色

📋 组件类别

元素（UI 构建块）

• Button - 主要、次要和文本变体
• IconButton - 带有无障碍性的图标按钮
• Badge - 状态指示器和计数
• Avatar - 用户头像和首字母
• Chip - 标签、标签和可选项目

表单组件

• Input - 文本、电子邮件、密码和其他输入类型
• Select - 带有搜索和多选的下拉选择
• Textarea - 多行文本输入
• Checkbox - 单个和组复选框
• Radio - 单选按钮组
• Toggle - 开关控件
• Calendar - 带有范围支持的日期选择

布局组件

• Card - 内容容器
• Stack - 灵活的间距和对齐方式
• Divider - 视觉分隔
• Tabs - 标签界面
• Breadcrumbs - 导航路径
• Stepper - 步骤流程

数据展示

• DataSize - 人类可读的文件大小（1.2 MB，3.4 GB）
• DateFormat - 灵活的日期格式化
• Duration - 时间持续显示
• Ellipsis - 文本截断和扩展
• Pager - 分页控件
• Sort - 可排序的列标题

覆盖组件（层）

• Dialog - 模态对话框和弹出窗口
• Drawer - 滑出面板
• Notification - 通知消息和警告
• Tooltip - 上下文帮助文本
• Popover - 丰富的上下文内容
• Menu - 下拉菜单和上下文菜单

🔧 自定义

样式选项

{
  styling: {
    theme: "light" | "dark" | "auto",
    spacing: "compact" | "normal" | "spacious",
    colorScheme: "blue" | "green" | "purple" | "custom"
  }
}

组件属性

所有生成的组件都支持标准的 Reablocks 属性：

• variant - 视觉风格变体
• size - 小、中、大尺寸
• color - 基于主题的颜色方案
• disabled - 禁用状态
• className - 自定义 CSS 类

🤖 自然语言处理

服务器理解各种描述组件需求的方式：

意图识别

• 仪表板："dashboard"，"admin panel"，"overview"，"metrics"
• 表单："form"，"input"，"submit"，"validation"，"contact"
• 表格："table"，"list"，"data grid"，"rows and columns"
• 导航："menu"，"nav"，"sidebar"，"breadcrumbs"

组件映射

• 按钮："button"，"click"，"action"，"submit"
• 数据："display data"，"show information"，"file size"
• 布局："card"，"container"，"section"，"organize"
• 交互："select"，"choose"，"toggle"，"check"

📖 示例对话

构建联系表单

你："我需要一个带有姓名、电子邮件、消息字段和验证的联系表单"

服务器响应：
- 建议使用 Input、Textarea、Button、Card 组件
- 生成完整的表单，带有验证
- 包括错误处理和提交逻辑
- 提供 TypeScript 接口

创建数据仪表板

你："创建一个显示用户指标并带有图表和操作按钮的仪表板"

服务器响应：
- 生成响应式网格布局
- 创建带有 DataSize 组件的指标卡片
- 添加交互式按钮和导航
- 包括加载和错误状态

组件发现

你："我可以使用哪些组件来显示文件信息？"

服务器响应：
- 使用 DataSize 显示文件大小
- 使用 DateFormat 显示时间戳
- 使用 Ellipsis 显示长文件名
- 使用 Badge 显示文件类型
- 完整的使用示例

🚨 错误处理

服务器提供了有用的错误消息：

• 无效的组件名称
• 缺少必需的参数
• 不兼容的组件组合
• 格式错误的请求

🔄 更新和维护

保持组件最新

服务器的组件数据库基于最新的 Reablocks 文档。要更新：

1. 查看新的 Reablocks 发布
2. 更新代码中的组件模式
3. 添加新的示例和用例
4. 测试生成的组件

性能优化

• 组件元数据在内存中缓存
• 生成的代码针对包大小进行了优化
• 最小的运行时依赖项
• 可摇树导入

🤝 贡献

添加新组件

1. 在 ENHANCED_REABLOCKS_COMPONENTS 中添加组件模式
2. 包含全面的属性定义
3. 添加使用示例和用例
4. 更新类别映射

改进 NLP

1. 扩展 ComponentNLP 中的意图模式
2. 添加新的关键词映射
3. 改进组件建议逻辑
4. 使用各种用户输入进行测试

📄 许可证

此 MCP 服务器是为使用 Reablocks 组件库而构建的。请参阅 Reablocks 许可证了解组件使用条款。

🔗 相关链接

• Reablocks 文档
• 模型上下文协议
• Claude Desktop
• Cloudflare Workers

🆘 支持

对于以下问题：

• 生成的组件：查看 Reablocks 文档
• MCP 服务器功能：查阅此 README 和错误消息
• 部署：参考 Cloudflare Workers 文档

---

为 React 和 Reablocks 社区打造 ❤️