MCP Modus

🚀 MCP Modus

Modus Web ComponentsのAIアシスタント - IDE内でコンポーネントのドキュメント、デザインルール、セットアップガイドに関する即座のヘルプを得ることができます。

🚀 クイックスタート

このMCPサーバーは、AIアシスタント（Cursor、Claude、VS Codeなど）にModus Web Componentsの完全なドキュメントへのアクセスを提供します。以下のような質問をすることができます。

• "プライマリカラーのModusボタンを使うにはどうすればいいですか？"
• "Modusのカラーガイドラインは何ですか？"
• "Modusコンポーネントを使ってReactプロジェクトをセットアップする方法を教えてください"
• "どのコンポーネントに無効属性がありますか？"

📦 インストール

以下の2つのオプションから1つを選択してください。

オプション1: NPX（推奨 - インストール不要）

MCPをサポートするすべてのIDEに対して:

{
  "mcpServers": {
    "modus-docs": {
      "command": "npx",
      "args": ["-y", "@julianoczkowski/mcp-modus"]
    }
  }
}

メリット: インストール不要、常に最新バージョンを使用、パーミッションの問題がない。

オプション2: グローバルインストール

1. グローバルにインストールする:

npm install -g @julianoczkowski/mcp-modus

注意: 一部のシステムでは、sudo npm install -g @julianoczkowski/mcp-modusが必要になる場合があります。

2. この設定を使用する:

{
  "mcpServers": {
    "modus-docs": {
      "command": "mcp-modus"
    }
  }
}

メリット: 起動が速い、インストール後はオフラインでも動作する。

📚 詳細ドキュメント

IDE別の手順

Cursor IDEの場合

1. Settings → Features → MCPに移動します。
2. "Add New MCP Server"をクリックします。
3. 上記のJSON設定のいずれかを使用します。

VS Code (Continue付き)の場合

上記のJSON設定のいずれかを使用して、~/.continue/config.jsonに追加します。

Claude Desktopの場合

上記のJSON設定のいずれかを使用して、設定ファイルに追加します。

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

得られるもの

📚 コンポーネントドキュメント (43以上のコンポーネント)

• すべてのModus Web Componentsの完全なAPIドキュメント
• 使用例とベストプラクティス
• 属性とイベントのリファレンス

🎨 デザインシステムガイドライン

• カラーパレットと使用ルール
• アイコンガイドラインと利用可能なアイコン
• スペーシング、タイポグラフィ、レイアウトシステム
• ボーダー半径とストロークガイドライン

⚙️ プロジェクトセットアップガイド

• HTMLプロジェクトのセットアップ手順
• Reactプロジェクトの統合ガイド
• テーマの実装とカスタマイズ
• テストガイドラインとベストプラクティス

💻 使用例

設定が完了したら、AIアシスタントに以下のように質問します。

"警告色で中サイズのModusボタンを作成してください"
"Modusデザインで使用すべきスペーシング値は何ですか？"
"Modus Web Componentsを使って新しいReactプロジェクトをセットアップする方法を教えてください"
"すべてのModusフォームコンポーネントを表示してください"
"利用可能なModusカラートークンは何ですか？"

AIはMCPサーバーを使用して最新のドキュメントを取得し、正確で最新の回答を提供します。

🔧 トラブルシューティング

サーバーに接続できない場合

• Node.js 18以上がインストールされていることを確認します: node --version
• グローバルインストールの場合: mcp-modus --helpで確認します。
• IDEのログを確認してエラーメッセージを確認します。

ダウンロードしたドキュメントを削除する場合

NPXオプション（オプション1）を使用した場合、ドキュメントはNPXによって一時的にキャッシュされます。このキャッシュをクリアするには:

# このパッケージのNPXキャッシュをクリアする
npx clear-npx-cache @julianoczkowski/mcp-modus

# または、すべてのNPXキャッシュをクリアする
npm cache clean --force

グローバルインストールオプション（オプション2）を使用した場合、以下のコマンドでアンインストールします。

npm uninstall -g @julianoczkowski/mcp-modus

ヘルプが必要な場合

• GitHub Issues
• Modus Web Components Docs

Modus Web Componentsを使用する開発者向けに構築 | MITライセンス | Julian Oczkowskiによる作成