.github

React Design Systems

React Design Systems は、React 向けに作成されたデザインシステムに関する包括的な情報を提供する Model Context Protocol（MCP）サーバーです。現在のバージョンでは、AWS Cloudscape Design System のコンポーネントとコード生成機能のみに対応しています。FastMCP フレームワークと TypeScript を使用して構築されています。

今後のバージョンでは、Material UI、Chakra UI、Ant Design、Blueprint、Mantine など、React の人気デザインシステムにも対応する予定です。

変更履歴

CHANGELOG.md を参照してください。

機能

コンポーネント情報と検索

• 高度なフィルタリングオプションを使って Cloudscape コンポーネントを検索
• プロパティ、イベント、関数など、コンポーネントの詳細情報を取得
• コンポーネントの使用ガイドラインとベストプラクティスを参照
• コンテンツ、セクション、特定のコンポーネントでコンポーネントの使用ガイドラインを横断検索
• 詳細なコードスニペットを含むコンポーネントの例を取得
• コンポーネントとその機能を比較

コード生成

• カスタマイズオプションを使ってコンポーネントのコードを生成
• 一般的な UI パターンやレイアウトのコードを生成
• 複数のコンポーネントによるレイアウトや構成を生成
• コンポーネントの props と設定を検証

高度な機能

• 使用ガイドライン：リソースとツールを組み合わせたアプローチにより、コンポーネントの使用ガイドラインに包括的にアクセスできます
  • cloudscape://usage/{componentId} リソース URI から直接アクセス
  • すべての使用コンテンツを対象とした高度な検索機能
  • セクションごとのフィルタリング（機能、一般的なガイドラインなど）
  • コンポーネントを横断したコンテンツ検索
• イベントと関数：コンポーネントのイベントと関数 API を検索して確認
• パターンライブラリ：デザインパターンとアーキテクチャに関するガイダンスを参照
• セットアップ手順：frontend-code モードのセットアップおよび設定ガイダンスを取得

要件

• Node.js：24.0.1 以上
• npm：10.x 以上（Node.js 24.0.1 に付属）

インストール

依存関係として使用する場合

# Install from npm
npm install @agentience/react-design-systems-mcp

グローバルインストール

# Install globally to use as a CLI tool
npm install -g @agentience/react-design-systems-mcp

# Then you can run it directly
react-design-systems-mcp

Claude Desktop の設定

React Design Systems を Claude Desktop で使用するには、npm パッケージを MCP サーバーとして設定します。これにより、必要に応じて Claude Desktop がサーバーを自動的に起動できます。

設定ファイル

以下の設定を Claude Desktop の MCP 設定ファイルに追加してください。

場所：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

設定：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "npx",
      "args": [
        "@agentience/react-design-systems-mcp"
      ]
    }
  }
}

コマンドラインパラメーター

サーバーでは、以下のコマンドラインパラメーターを使用できます。

• --transport <type> または -t <type>：トランスポートの種類（stdio または sse）。既定値：stdio
• --port <number> または -p <number>：SSE トランスポートのポート。既定値：3001
• --bind <address> または -b <address>：SSE トランスポートのバインドアドレス。既定値：0.0.0.0

Claude での使用

この MCP サーバーを Claude で使用する際に最適な結果を得るには、専用のシステムプロンプトの使用を検討してください。AWS Amplify Gen 2 の知識を備えた Cloudscape のエキスパート開発者として Claude を設定する、システムプロンプトの例を用意しています。詳細は、Claude Cloudscape & Amplify Expert を参照してください。

高度な設定例

カスタムパラメーターを使用する場合

{
  "mcpServers": {
    "react-design-systems": {
      "command": "npx",
      "args": [
        "@agentience/react-design-systems-mcp",
        "--transport",
        "stdio"
      ]
    }
  }
}

ローカルインストールを使用する場合

パッケージをグローバルまたはローカルにインストールしている場合：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "react-design-systems-mcp"
    }
  }
}

開発用の設定

ローカルビルドを使って開発する場合：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "node",
      "args": [
        "/path/to/react-design-systems-mcp/dist/server.js"
      ],
      "cwd": "/path/to/react-design-systems-mcp"
    }
  }
}

確認

設定を追加した後、以下を実行してください。

1. Claude Desktop を再起動します
2. 新しい会話を開始します
3. React Design Systems MCP サーバーが自動的に利用可能になります
4. search_components などのツールを使って接続を確認できます

接続の問題のトラブルシューティングについては、MCP Protocol Guide を参照してください。

Docker によるデプロイ

このプロジェクトは Docker を使用してデプロイできます。詳しい手順については、Docker デプロイガイドを参照してください。

Docker ですぐに始める

# Pull the image from GitHub Container Registry
docker pull ghcr.io/agentience/react-design-systems-mcp:latest

# Run the container
docker run -d -p 3005:3005 --name react-design-systems-mcp ghcr.io/agentience/react-design-systems-mcp:latest

Docker Compose の使用

# Clone the repository
git clone https://github.com/agentience/react-design-systems-mcp.git
cd react-design-systems-mcp

# Start with Docker Compose
docker-compose up -d

Docker イメージを GitHub Container Registry にビルドして公開する方法については、Docker 公開ガイドを参照してください。

FastMCP の実装

このプロジェクトでは、より構造化され、型安全な MCP サーバー構築を実現するために、FastMCP フレームワークを使用しています。FastMCP の実装と開発環境のセットアップについて詳しくは、DEVELOPMENT.mdを参照してください。

利用可能なツールとリソース

MCP ツール

コンポーネント情報

• search_components - 高度なフィルタリングでコンポーネントを検索します
• get_component_details - コンポーネントの詳細情報を取得します
• get_component_properties - コンポーネントのプロパティと仕様を取得します
• get_component_events - コンポーネントのイベントとイベント処理に関する情報を取得します
• get_component_functions - コンポーネントの関数とメソッド API を取得します
• get_component_examples - オプションで例 ID を指定して、コンポーネントの例を取得します

使用ガイドライン

• get_component_usage - オプションでセクションを指定して、特定のコンポーネントの使用ガイドラインを取得します
• search_usage_guidelines - クエリ、セクション、コンポーネントのフィルターを使用して、コンポーネントの使用ガイドライン全体を検索します

コード生成

• generate_component_code - カスタマイズしてコンポーネントのコードを生成します
• generate_pattern_code - 一般的な UI パターンのコードを生成します
• validate_component_props - コンポーネントのプロパティと設定を検証します

パターンと検索

• search_patterns - デザインパターンとアーキテクチャに関するガイダンスを検索します
• search_properties - すべてのコンポーネントからコンポーネントのプロパティを検索します
• search_events - フィルターオプションを指定して、コンポーネントのイベントを検索します
• search_functions - コンポーネントの関数とメソッドを検索します

ユーティリティツール

• compare_components - 複数のコンポーネントとその機能を比較します
• generate_layout_code - 複数コンポーネントのレイアウトを生成します
• get_frontend_setup - frontend-code モードのセットアップ手順を取得します
• get_link_resource - usage.md ファイル内の内部リンクを、適切なバックエンドリソースに解決します

MCP リソース

コンポーネントの使用ガイドライン

• cloudscape://usage/{componentId} - コンポーネントの使用ガイドラインに Markdown 形式で直接アクセスします

使用例

# Search for button-related components
search_components({"query": "button", "category": "actions"})

# Get detailed information about a specific component
get_component_details({"componentId": "button"})

# Access usage guidelines directly
Resource: cloudscape://usage/button

# Search across usage guidelines
search_usage_guidelines({"query": "primary button", "section": "Features"})

# Generate component code
generate_component_code({"componentId": "button", "variant": "primary"})

ドキュメント

• アーキテクチャ
• コンポーネントライブラリ
• FastMCP の実装
• フロントエンドコードモード
• MCP プロトコルガイド
• Roo 統合ガイド
• 使用ガイド
• Docker デプロイガイド
• Docker 公開ガイド

システムプロンプト

• Claude Cloudscape & Amplify エキスパート - AWS Amplify Gen 2 を使用する Cloudscape のエキスパート開発者として Claude を利用するためのシステムプロンプトの例

ロードマップ

React Design Systems は現在 AWS Cloudscape Design System をサポートしていますが、今後、ほかの人気のある React デザインシステムにもサポートを拡大する予定です。

• Material UI：React 向けの Google の Material Design 実装を包括的にサポートします
• Chakra UI：アクセシブルでカスタマイズ可能な Chakra UI ライブラリに焦点を当てたコンポーネントのサポートを提供します
• Ant Design：React アプリケーション向けのエンタープライズグレードの UI システムです
• Blueprint：Web アプリケーション向けの Palantir の UI ツールキットをサポートします
• Mantine：ダークモードを優れた形でサポートするモダンな React コンポーネントです

ほかのデザインシステムへのサポートの追加に貢献したい場合は、貢献ガイドラインをご確認ください。

依存関係としての使用

このパッケージをプロジェクトの依存関係として使用する場合は、次のようにインポートして使用できます。

// CommonJS
const { createReactDesignSystemsServer } = require('@agentience/react-design-systems-mcp');

// ES Modules
import { createReactDesignSystemsServer } from '@agentience/react-design-systems-mcp';

// Create and configure the server
const server = createReactDesignSystemsServer({
  // Configuration options
});

// Start the server
server.start();

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add some amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します

ライセンス

MIT - 詳細については、LICENSEを参照してください。## 利用可能なドキュメント

• React Design Systems の開発
• React Design Systems の Docker デプロイ
• React Design Systems v1.0.4