MCP サーバー

mdui は専用の MCP（Model Context Protocol） サーバー @mdui/mcp を提供しています。これは、ローカルで AI エージェントにコンポーネント、アイコン、CSS カスタムプロパティ、ドキュメントのクエリ機能を提供します。

Claude Code、Cursor、GitHub Copilot などの開発ツールと連携して、コード生成を支援し、mdui のコンポーネントとスタイルをより効果的に使用できるようにします。

ツール

mdui の MCP サーバーは、AI エージェントに以下のツールを公開します：

• list_components：すべての mdui コンポーネントを一覧表示します。
• get_component_metadata：単一コンポーネントの詳細な API メタデータを取得します。
• list_css_classes：グローバル CSS クラス名を一覧表示します。
• list_css_variables：グローバル CSS カスタムプロパティを一覧表示します。
• list_documents：すべてのドキュメントを一覧表示します。
• get_document：単一ドキュメントの完全な内容を取得します。
• list_icon_codes：属性や API で使用できるアイコンコードを一覧表示します。
• list_icon_components：独立したアイコンコンポーネントとその ESM インポート文を一覧表示します。

使用方法

MCP サーバーは stdio トランスポート のみをサポートしており、VS Code、Cursor、Claude Code、Windsurf、Zed などのクライアントや、stdio プロトコルをサポートする AI エージェントで直接使用できます。

VS Code

GitHub Copilot と GitHub Copilot Chat 拡張機能がインストールされていることを確認してください。

1. プロジェクトのルートディレクトリに .vscode/mcp.json を作成し、以下の設定を追加します：

   {
     "servers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. mcp.json ファイル内の「起動」ボタンをクリックします。

3. GitHub Copilot Chat で会話を開始します。

Cursor

1. プロジェクトのルートディレクトリに .cursor/mcp.json を作成または編集し、以下の設定を追加します：

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

2. Settings > Cursor Settings > MCP & Integrations に移動し、mdui サーバーを有効にします。

3. Cursor Chat で会話を開始します。

Claude Code

1. ターミナルで以下のコマンドを実行して mdui MCP サーバーを追加します：

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. その後、claude を実行してセッションを開始します。

3. プロンプトを入力して使用を開始します。

Windsurf

1. Settings > Windsurf Settings > Cascade に移動します

2. Manage MCPs をクリックし、「View raw config」をクリックして、設定ファイルに以下を追加します：

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

   MCP サーバーが自動的に表示されない場合は、Refresh をクリックしてリストを更新してください。

3. プロンプトを入力して会話を開始します。

Zed

1. Settings > Open Settings を開き、settings.json ファイルに以下の設定を追加します：

   {
     "context_servers": {
       "mdui": {
         "source": "custom",
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. プロンプトを入力して使用を開始します。

カスタム MCP クライアント

ローカルまたは開発環境でカスタム MCP クライアントを使用する場合、そのサーバーをクライアントの設定ファイルに追加します。例：

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