Goodcode Reablocks MCP Server

增强型Reablocks MCP服务器

一个强大的模型上下文协议（MCP）服务器，提供智能React 使用 扩孔器 设计系统。此服务器结合了自然 利用深度组件知识进行语言处理，生成生产就绪 React组件。

🚀 特性

• 🧠 自然语言处理 -用简单的英语描述你想要什么
• ⚛️ 智能元件生成 -生成完整的React组件

使用TypeScript

• 📚 全面的组件知识 -对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

1. 安装依赖项

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

1. 更换您的 src/index.ts 使用增强的服务器代码

1. 部署到Cloudflare Workers

wrangler deploy

1. 配置Claude桌面

添加到您的 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 （string）：对您想要构建的内容的自然语言描述
• 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 （string）：关于组件的问题

示例：

"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 （string）：组件的名称（例如，“按钮”、“输入”）

例子：

componentName: "Button"

5. list_all_components

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

参数： 无

💡 使用示例

创建登录表单

Prompt: "Create a login form with email, password fields, and validation"

Generated Output:
- Complete React component with TypeScript
- Form validation and error handling  
- Responsive design
- Accessibility features
- Loading states

构建仪表板

Prompt: "Generate a dashboard with metrics cards, user table, and navigation"

Generated Output:
- Grid-based responsive layout
- Metric cards with data visualization
- Interactive data table with search/filter
- Navigation sidebar
- Loading and error states

数据显示组件

Prompt: "Show me components for displaying file sizes and dates"

Generated Output:
- DataSize component for human-readable file sizes
- DateFormat component for flexible date display
- Usage examples and props documentation

🎨 生成的组件特征

所有生成的组件包括：

✅ React最佳实践

• 带挂钩的功能部件
• 适当的状态管理
• 事件处理
• 构件合成

✅ TypeScript支持

• 完整类型定义
• 接口声明
• 类型安全道具
• 通用类型支持（如适用）

✅ 响应式设计

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

✅ 无障碍

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

✅ 错误处理

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

✅ 现代风格

• 顺风CSS类
• CSS网格和Flexbox
• 一致的间距
• 主题感知颜色

📋 组件类别

元素（UI构建块）

• 按钮 -主要、次要和文本变体
• 图标按钮 -具有可访问性的仅图标按钮
• 徽章 -状态指示器和计数
• 阿凡达 -用户资料图片和首字母
• 芯片 -标签、标记和可选项目

表单组件

• 输入 -文本、电子邮件、密码和其他输入类型
• 选择 -带有搜索和多选功能的下拉选择
• 文本区域 -多行文本输入
• 复选框 -单个和组复选框
• 收音机 -单选按钮组
• 切换 -开关控制
• 日历 -支持范围的日期选择

布局组件

• 卡 -内容物容器
• 堆栈 -灵活的间距和对齐
• 分隔线 -视觉分离
• 标签页 -标签界面
• 面包屑 -导航轨迹
• 步进器 -循序渐进的过程

数据显示

• 数据大小 -人类可读文件大小（1.2 MB，3.4 GB）
• 日期格式 -灵活的日期格式
• 持续时间 -持续时间显示
• 省略号 -文本截断与扩展
• 寻呼机 -分页控制
• 排序 -可排序的列标题

叠加组件（层）

• 对话 -模态对话框和弹出窗口
• 抽屉 -滑出式面板
• 通知 -Toast消息和警报
• 工具提示 -上下文帮助文本
• 弹出框 -丰富的上下文内容
• 菜单 -下拉菜单和上下文菜单

🔧 定制

造型选项

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

组件道具

所有生成的组件都支持标准Reablocks道具：

• variant -视觉风格变体
• size -小、中、大尺码
• color -基于主题的配色方案
• disabled -残疾州
• className -自定义CSS类

🤖 自然语言处理

服务器了解描述组件需求的各种方法：

意图识别

• 仪表盘：“仪表板”、“管理面板”、“概述”、“指标”
• 表格：“表单”、“输入”、“提交”、“验证”、“联系”
• 表格：“表”、“列表”、“数据网格”、“行和列”
• 导航：“菜单”、“导航”、“侧边栏”、“面包屑”

组件映射

• 按钮：“按钮”、“点击”、“操作”、“提交”
• 数据：“显示数据”、“显示信息”、“文件大小”
• 布局：“卡片”、“容器”、“部分”、“组织”
• 交互式：“选择”、“选定”、“切换”、“检查”

📖 对话示例

建立联系表格

You: "I need a contact form with name, email, message fields and validation"

Server Response:
- Suggests Input, Textarea, Button, Card components
- Generates complete form with validation
- Includes error handling and submission logic
- Provides TypeScript interfaces

创建数据仪表板

You: "Create a dashboard showing user metrics with charts and action buttons"

Server Response:
- Generates responsive grid layout
- Creates metric cards with DataSize components
- Adds interactive buttons and navigation
- Includes loading and error states

组件发现

You: "What components can I use to display file information?"

Server Response:
- DataSize for file sizes
- DateFormat for timestamps  
- Ellipsis for long filenames
- Badge for file types
- Complete usage examples

🚨 错误处理

服务器为以下对象提供有用的错误消息：

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

🔄 更新和维护

保持组件最新

服务器的组件数据库基于最新的Reablocks文档。 要更新，请执行以下操作：

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

性能优化

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

🤝 贡献

添加新组件

1. 将组件架构添加到 ENHANCED_REABLOCKS_COMPONENTS
2. 包括全面的道具定义
3. 添加使用示例和用例
4. 更新类别映射

改进NLP

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

📄 许可证

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

🔗 相关链接

• Reablocks文档
• 模型上下文协议
• 克劳德桌面
• Cloudflare员工

🆘 支持

关于以下问题：

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

______________________________________________________________________

内置于❤️ React和Reablocks社区