Reablocks MCP Server Experiment

🚀 增强型 Reablocks MCP 服务器

这是一个强大的模型上下文协议（MCP）服务器，借助 Reablocks 设计系统，能够智能生成和组合 React 组件。该服务器将自然语言处理与深入的组件知识相结合，生成可用于生产环境的 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（对象，可选）：主题和样式偏好。 示例：

Generate a dashboard with user metrics, data visualization, and action buttons for an admin panel

2. explore_reablocks_components

按类别或搜索条件发现和探索可用的 Reablocks 组件。 参数：

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

Category: "Form"
Search: "button"

3. ask_about_components

用自然语言询问有关组件的问题，并获得智能推荐。 参数：

• question（字符串）：你关于组件的问题。 示例：

"I need a form with validation and error handling"
"How do I create a data table with sorting and filtering?"
"What's the best way to display file sizes?"

4. get_component_documentation

获取任何 Reablocks 组件的详细文档。 参数：

• componentName（字符串）：组件名称（例如，"Button"、"Input"）。 示例：

componentName: "Button"

5. list_all_components

获取按类别组织的所有可用 Reablocks 组件的完整概述。 参数： 无

💻 使用示例

创建登录表单

提示："Create a login form with email, password fields, and validation"

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

构建仪表盘

提示："Generate a dashboard with metrics cards, user table, and navigation"

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

数据显示组件

提示："Show me components for displaying file sizes and dates"

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

🎨 生成组件的特性

所有生成的组件都具备以下特性：

✅ React 最佳实践

• 使用钩子的函数式组件
• 正确的状态管理
• 事件处理
• 组件组合

✅ TypeScript 支持

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

✅ 响应式设计

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

✅ 无障碍访问

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

✅ 错误处理

• 加载状态
• 错误边界
• 优雅降级
• 用户反馈

✅ 现代样式

• Tailwind CSS 类
• CSS 网格和 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"

📖 示例对话

构建联系表单

你："I need a contact form with name, email, message fields and validation"

服务器响应：
- 推荐 Input、Textarea、Button、Card 组件
- 生成带有验证功能的完整表单
- 包含错误处理和提交逻辑
- 提供 TypeScript 接口

创建数据仪表盘

你："Create a dashboard showing user metrics with charts and action buttons"

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

组件发现

你："What components can I use to display file information?"

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

🚨 错误处理

服务器会针对以下情况提供有用的错误消息：

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

🔄 更新与维护

保持组件更新

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

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

性能优化

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

🤝 贡献

添加新组件

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

改进自然语言处理

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

📄 许可证

此 MCP 服务器是为与 Reablocks 组件库一起使用而构建的。有关组件使用条款，请参考 Reablocks 许可协议。

🔗 相关链接

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

🆘 支持

如果你遇到以下问题，可以参考相应的文档：

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

为 React 和 Reablocks 社区用心打造 ❤️