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 社區用心打造 ❤️