Composer Kit MCP Server

Composer Kit MCP サーバー

Celo ブロックチェーン上で Web3 アプリケーションを構築するために設計された Composer Kit React コンポーネントライブラリのドキュメント、例、使用方法にアクセスするための Model Context Protocol（MCP）サーバーです。このサーバーでは、Composer Kit に関する包括的な情報にアクセスできます。

インストール

1. リポジトリをクローンします。

git clone https://github.com/celo-org/composer-kit-mcp
cd composer-kit-mcp

2. 依存関係をインストールします。

pip install -e .

MCP クライアントの設定

Cursor での設定

1. MCP サーバーをインストールします（まだの場合）。

   pip install composer-kit-mcp
   

2. MCP サーバーを Cursor の設定に追加して、Cursor を設定します。

   • Cursor の設定を開きます（Cmd/Ctrl + ,）
   • 「Features」→「Model Context Protocol」に移動します
   • 次の設定で新しい MCP サーバーを追加します。

   {
     "mcpServers": {
       "composer-kit-mcp": {
         "command": "uvx",
         "args": ["composer-kit-mcp"]
       }
     }
   }
   

3. MCP サーバーを読み込むため、Cursor を再起動します

4. Cursor に Composer Kit コンポーネントについて質問して、設定を確認します。

   • 「利用できる Composer Kit コンポーネントを教えてください」
   • 「Wallet コンポーネントの使い方を見せてください」
   • 「決済関連のコンポーネントを検索してください」

Claude Desktop での設定

1. MCP サーバーをインストールします（まだの場合）。

   pip install composer-kit-mcp
   

2. Claude Desktop の設定ファイルを確認します。

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

3. MCP サーバーを追加するために、設定ファイルを編集します。

   {
     "mcpServers": {
       "composer-kit-mcp": {
         "command": "uvx",
         "args": ["composer-kit-mcp"]
       }
     }
   }
   

   ファイルが存在しない場合は、上記の内容で作成します。

4. MCP サーバーを読み込むため、Claude Desktop を再起動します

5. Claude に Composer Kit について質問して、設定を確認します。

   • MCP ツールが利用可能であることを示す 🔌 アイコンがチャットインターフェースに表示されていることを確認します
   • 「どの Composer Kit コンポーネントを手伝ってもらえますか？」と質問します
   • 「Payment コンポーネントの使用例を見せてください」と試します

その他のインストール方法

pipx を使用する（分離環境での使用を推奨）

# Install pipx if you haven't already
pip install pipx

# Install composer-kit-mcp in an isolated environment
pipx install composer-kit-mcp

# The command will be available globally
composer-kit-mcp

仮想環境を使用する

# Create a virtual environment
python -m venv composer-kit-mcp-env
source composer-kit-mcp-env/bin/activate  # On Windows: composer-kit-mcp-env\Scripts\activate

# Install the package
pip install composer-kit-mcp

# Use the full path in your MCP config
# e.g., /path/to/composer-kit-mcp-env/bin/composer-kit-mcp

トラブルシューティング

よくある問題

1. コマンドが見つからない：パッケージがインストールされており、コマンドが PATH に含まれていることを確認してください。

   which composer-kit-mcp  # Should show the path to the command
   

2. 権限エラー：--user フラグを付けてインストールするか、pipx を使用してください。

   pip install --user composer-kit-mcp
   

3. MCP サーバーに接続できない：設定内のコマンドパスが正しいことを確認してください。

   composer-kit-mcp  # Should start the server (will wait for input)
   

4. Python のバージョンに関する問題：Python 3.11 以降を使用していることを確認してください。

   python --version  # Should be 3.11+
   

デバッグ

MCP サーバーが正しく動作しているか確認するには、次を実行します。

# Test the server directly
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | composer-kit-mcp

利用可能なツールを含む JSON レスポンスが返されます。

使用方法

サーバーの実行

# Run the MCP server
python -m composer_kit_mcp.server

# Or use the CLI entry point
composer-kit-mcp

利用可能なツール

コンポーネント情報

1. list_components

   • 利用可能な Composer Kit コンポーネントを、説明とカテゴリとともにすべて一覧表示します
   • パラメーターは不要です

2. get_component

   • ソースコード、props、使用方法など、特定のコンポーネントの詳細情報を取得します
   • パラメーター：component_name（例：'button'、'wallet'、'payment'、'swap'）

3. get_component_example

   • 実際の使用例を含む、特定のコンポーネントの使用例コードを取得します
   • パラメーター：component_name、example_type（省略可：'basic'、'advanced'、'with-props'）

4. search_components

   • 名前、説明、機能に基づいてコンポーネントを検索します
   • パラメーター：query（例：'wallet'、'payment'、'token'、'nft'）

5. get_component_props

   • 型、説明、要件など、特定のコンポーネントの props に関する詳細情報を取得します
   • パラメーター：component_name

インストールとセットアップ

6. get_installation_guide

   • セットアップ手順や設定など、Composer Kit のインストール手順を取得します
   • パラメーター：package_manager（省略可：'npm'、'yarn'、'pnpm'、'bun'）

7. get_components_by_category

   • 指定したカテゴリに含まれるすべてのコンポーネントを取得します
   • パラメーター：category（例：'Core Components'、'Wallet Integration'、'Payment & Transactions'）

Celo Composer ツール

8. list_celo_composer_templates

   • 説明、ユースケース、機能を含む、利用可能なすべての Celo Composer テンプレートを一覧表示します
   • パラメーターは不要です

9. get_celo_composer_template

   • 特定の Celo Composer テンプレートの詳細情報を取得します
   • パラメーター：template_name

10. list_celo_composer_frameworks

    • Celo Composer でサポートされているフレームワーク（React/Next.js、Hardhat）を一覧表示します
    • パラメーターは不要です

11. get_celo_composer_commands

    • フラグと使用例を含む、利用可能な Celo Composer CLI コマンドを取得します
    • パラメーターは不要です

12. get_celo_composer_guide

    • さまざまな Celo Composer タスクのステップごとのガイドを取得します
    • パラメーター：guide_type（'quick-start'、'smart-contract-deployment'、'local-development'、'ui-components'、'deployment'）

13. get_integration_guide

    • Composer Kit を Celo Composer プロジェクトに統合するための包括的なガイドを取得します
    • パラメーターは不要です

14. create_celo_composer_project

    • 新しい Celo Composer プロジェクトを作成するための完全なコマンドを生成します
    • パラメーター：project_name、owner、template、include_hardhat（任意。デフォルトは true）
    • 戻り値：次の手順とテンプレート情報を含む、完全な CLI コマンド

利用可能なコンポーネント

コアコンポーネント

• Address：短縮表示とコピー機能を備えた Ethereum アドレスの表示
• Balance：精度を制御しながら、トークン残高を表示および管理
• Identity：アドレス、名前、残高、ソーシャルリンクを含むユーザー情報の表示

ウォレット統合

• Wallet：ウォレット接続とユーザー情報の表示
• Connect：コールバックに対応したウォレット接続ボタン

支払いとトランザクション

• Payment：組み込みのダイアログとエラー処理を備えた支払いの送信
• Transaction：ステータス追跡機能を備えたブロックチェーントランザクションの実行
• Swap：交換するトークンを選択できるトークン交換インターフェース

トークン管理

• TokenSelect：フィルタリング機能を使って、一覧からトークンを検索して選択

NFT コンポーネント

• NFT：NFT の詳細表示とミント用インターフェースの提供
• NFTCard：NFT 表示用のカードレイアウト
• NFTImage：NFT 画像の表示コンポーネント
• NFTMeta：NFT メタデータの表示
• NFTMint：NFT ミント用インターフェース

主な機能

コンポーネントのドキュメント

• 完全な API リファレンス：すべてのコンポーネントのプロパティに関する詳細情報
• 使用例：各コンポーネントの実用的なコード例
• インストールガイド：セットアップ手順を順を追って説明
• カテゴリ別の整理：機能ごとにコンポーネントを整理

Celo Composer との統合

• テンプレート管理：すべての Celo Composer テンプレートにアクセス
• プロジェクト作成：新しいプロジェクト用の完全な CLI コマンドを生成
• フレームワークのサポート：React/Next.js および Hardhat との統合に関する情報
• ステップごとのガイド：プロジェクトのセットアップ、デプロイ、開発に関する包括的なガイド
• 統合ドキュメント：Composer Kit のコンポーネントを Celo Composer プロジェクトと組み合わせる方法

検索と探索

• セマンティック検索：機能やユースケースからコンポーネントを検索
• カテゴリによる絞り込み：カテゴリ別にコンポーネントを閲覧
• プロパティのドキュメント：型と要件に関する詳細情報

コード例

• 基本的な使い方：簡単な実装例
• 高度なパターン：複雑な使用シナリオ
• ベストプラクティス：推奨される実装パターン

Celo Composer テンプレート

Minipay テンプレート

• 目的：Celo 上でミニ決済 dApp を構築するための事前設定済みテンプレート
• ユースケース：モバイルファーストの決済アプリケーション、マイクロトランザクション、P2P 決済
• 機能：モバイルに最適化された UI、決済フロー用コンポーネント、Celo との統合、PWA サポート

Valora テンプレート

• 目的: Valora ウォレットとの連携を簡単に行えるように設計されています
• ユースケース: Valora ウォレットとの連携、ソーシャル決済、DeFi アプリケーション
• 機能: Valora ウォレット接続、ソーシャル機能、DeFi コンポーネント、マルチトークン対応

連携ワークフロー

1. テンプレートを選択: ユースケースに応じて、Minipay または Valora から選択します
2. プロジェクトを作成: create_celo_composer_project ツールを使用して、セットアップコマンドを生成します
3. 依存関係をインストール: 生成されたコマンドでプロジェクトをセットアップします
4. Composer Kit を追加: UI を強化する Composer Kit コンポーネントをインストールします
5. 開発: デプロイと開発環境のセットアップについて、ステップごとのガイドに従います

アーキテクチャ

サーバーから、ハードコードされた Composer Kit コンポーネントのデータと Celo Composer の情報にアクセスできます。

src/composer_kit_mcp/
├── components/         # Component data and models
│   ├── data.py        # Hardcoded component and Celo Composer information
│   └── models.py      # Pydantic models for components and Celo Composer
├── server.py          # Main MCP server with Composer Kit and Celo Composer tools
└── __init__.py        # Package initialization

データ構造

• Composer Kit コンポーネント: props、例、使用方法の情報を含む完全なコンポーネントライブラリ
• Celo Composer テンプレート: ユースケースと機能を含むテンプレート設定
• Celo Composer ガイド: 一般的なタスクについてのステップごとの手順
• 連携ドキュメント: 両方のツールを組み合わせて dApp を迅速に開発する方法

コンポーネントのカテゴリ

コアコンポーネント

基本機能に欠かせない UI コンポーネント

ウォレット連携

ウォレット接続とユーザー管理のためのコンポーネント

決済とトランザクション

決済とブロックチェーントランザクションを処理するためのコンポーネント

トークン管理

トークンの選択と管理のためのコンポーネント

NFT コンポーネント

NFT の表示と操作のためのコンポーネント

開発

テストの実行

pytest

コードのフォーマット

black .
ruff check .

型チェック

mypy .

ライセンス

MIT ライセンスの詳細については、LICENSE ファイルをご覧ください。

コントリビューション

1. リポジトリをフォークします
2. 機能ブランチを作成します
3. 変更を加えます
4. 該当する場合はテストを追加します
5. プルリクエストを送信します

サポート

問題や質問がある場合：

• GitHub Issues: composer-kit-mcp/issues
• ドキュメント: Composer Kit ドキュメント