Reablocks MCP Server Experiment

🚀 Enhanced Reablocks MCP Server

強力なModel Context Protocol (MCP)サーバーです。Reablocksデザインシステムを使用して、インテリジェントなReactコンポーネントの生成と構成を提供します。このサーバーは、自然言語処理と深いコンポーネント知識を組み合わせて、本番環境で使用可能なReactコンポーネントを生成します。

🚀 主な機能

• 🧠 自然言語処理 - 平易な英語で何が必要かを説明できます。
• ⚛️ インテリジェントなコンポーネント生成 - TypeScriptを使用して完全なReactコンポーネントを生成します。
• 📚 包括的なコンポーネント知識 - 50以上のReablocksコンポーネントを深く理解しています。
• 🎨 スマートなコード構成 - 適切なpropsとパターンでコンポーネントを自動的に組み合わせます。
• 📱 レスポンシブデザイン - 生成されるコンポーネントにはモバイルファーストのレスポンシブレイアウトが含まれます。
• ♿ アクセシビリティ対応 - ARIAラベルを持つWCAG 2.1 AA準拠のコンポーネントです。
• 🔧 本番環境での使用に適しています - エラーハンドリング、ローディングステート、および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 (列挙型、オプション): Elements、Form、Layout、Layers、Data、Typography
• 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コンポーネントの完全な概要を取得します。

パラメーター: なし

💻 使用例

ログインフォームの作成

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

Generated Output:
- TypeScriptを使用した完全なReactコンポーネント
- フォームのバリデーションとエラーハンドリング
- レスポンシブデザイン
- アクセシビリティ機能
- ローディングステート

ダッシュボードの構築

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

Generated Output:
- グリッドベースのレスポンシブレイアウト
- データビジュアライゼーションを持つメトリックカード
- 検索/フィルタリング機能を持つインタラクティブなデータテーブル
- ナビゲーションサイドバー
- ローディングとエラーステート

データ表示コンポーネント

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

Generated Output:
- 人間が読みやすいファイルサイズを表示するDataSizeコンポーネント
- 柔軟な日付表示を行うDateFormatコンポーネント
- 使用例とpropsのドキュメント

🎨 生成されるコンポーネントの特徴

すべての生成されるコンポーネントには以下が含まれます。

✅ Reactのベストプラクティス

• フックを使用した関数型コンポーネント
• 適切な状態管理
• イベントハンドリング
• コンポーネントの構成

✅ TypeScriptサポート

• 完全な型定義
• インターフェース宣言
• 型安全なprops
• 該当する場合はジェネリック型のサポート

✅ レスポンシブデザイン

• モバイルファーストのアプローチ
• 柔軟なグリッドレイアウト
• ブレークポイントを意識したスタイリング
• タッチ操作に適したインタラクション

✅ アクセシビリティ

• 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"
  }
}

コンポーネントのprops

すべての生成されるコンポーネントは、標準のReablocks propsをサポートしています。

• variant - 視覚的なスタイルのバリアント
• size - 小、中、大のサイズ
• color - テーマベースの配色
• disabled - 無効状態
• className - カスタムCSSクラス

🤖 自然言語処理

サーバーは、コンポーネントのニーズを説明するさまざまな方法を理解します。

意図認識

• Dashboard: "dashboard"、"admin panel"、"overview"、"metrics"
• Form: "form"、"input"、"submit"、"validation"、"contact"
• Table: "table"、"list"、"data grid"、"rows and columns"
• Navigation: "menu"、"nav"、"sidebar"、"breadcrumbs"

コンポーネントマッピング

• Buttons: "button"、"click"、"action"、"submit"
• Data: "display data"、"show information"、"file size"
• Layout: "card"、"container"、"section"、"organize"
• Interactive: "select"、"choose"、"toggle"、"check"

📖 会話例

お問い合わせフォームの構築

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

Server Response:
- Input、Textarea、Button、Cardコンポーネントを提案します。
- バリデーション機能付きの完全なフォームを生成します。
- エラーハンドリングと送信ロジックを含みます。
- TypeScriptインターフェースを提供します。

データダッシュボードの作成

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

Server Response:
- レスポンシブなグリッドレイアウトを生成します。
- DataSizeコンポーネントを持つメトリックカードを作成します。
- インタラクティブなボタンとナビゲーションを追加します。
- ローディングとエラーステートを含みます。

コンポーネントの探索

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

Server Response:
- ファイルサイズの表示にはDataSizeを使用します。
- タイムスタンプの表示にはDateFormatを使用します。
- 長いファイル名の表示にはEllipsisを使用します。
- ファイルタイプの表示にはBadgeを使用します。
- 完全な使用例を提供します。

🚨 エラーハンドリング

サーバーは、以下の問題に対して役立つエラーメッセージを提供します。

• 無効なコンポーネント名
• 必須パラメーターの欠落
• 互換性のないコンポーネントの組み合わせ
• 形式が正しくないリクエスト

🔄 更新とメンテナンス

コンポーネントの最新化

サーバーのコンポーネントデータベースは、最新のReablocksドキュメントに基づいています。更新するには、以下の手順を実行します。

1. 新しいReablocksリリースを確認する
2. コード内のコンポーネントスキーマを更新する
3. 新しい例とユースケースを追加する
4. 生成されたコンポーネントをテストする

パフォーマンスの最適化

• コンポーネントのメタデータはメモリにキャッシュされます。
• 生成されるコードはバンドルサイズが最適化されています。
• ランタイムの依存関係が最小限です。
• ツリーシェイキング可能なインポートが使用されています。

🤝 コントリビューション

新しいコンポーネントの追加

1. ENHANCED_REABLOCKS_COMPONENTSにコンポーネントスキーマを追加する
2. 包括的なprops定義を含める
3. 使用例とユースケースを追加する
4. カテゴリーマッピングを更新する

NLPの改善

1. ComponentNLPの意図パターンを拡張する
2. 新しいキーワードマッピングを追加する
3. コンポーネントの提案ロジックを改善する
4. さまざまなユーザー入力でテストする

📄 ライセンス

このMCPサーバーは、Reablocksコンポーネントライブラリとともに使用するために構築されています。コンポーネントの使用条件については、Reablocksのライセンスを参照してください。

🔗 関連リンク

• Reablocksドキュメント
• Model Context Protocol
• Claude Desktop
• Cloudflare Workers

🆘 サポート

以下に関連する問題については、以下の情報を参照してください。

• 生成されたコンポーネント: Reablocksドキュメントを確認してください。
• MCPサーバーの機能: このREADMEとエラーメッセージを確認してください。
• デプロイ: Cloudflare Workersのドキュメントを参照してください。

ReactとReablocksコミュニティのために❤️ で作られました