Claude Media
MUI MCPをClaude Codeに入れてMaterial UIの最新資料を参照させる
Claude CodeMCPClaude連携チュートリアル

MUI MCPをClaude Codeに入れてMaterial UIの最新資料を参照させる

MUIの@mui/mcpをclaude mcp addで登録し、CLAUDE.mdに使わせ方を書いて、古いAPIを出させにくくする手順をまとめます。

読了目安 約13分

MUI(Material UI)は、ドキュメントとコード例をAIクライアントに渡すMCPサーバー@mui/mcpを配布しています。Claude Codeにはclaude mcp add1行で登録でき、/mcpで接続を確かめれば使い始められます。ただし登録しただけでは呼ばれないことがあります。本記事は、登録コマンドとスコープの選び方、呼ばれないときの対処、つながらないときの切り分けをまとめます。MCPサーバー追加の一般論はClaude CodeのMCPサーバー設定ガイドにあり、ここではMUI固有の部分に絞ります。

MUI MCPとは何をするサーバーか

@mui/mcpは、MUIが公開しているnpmパッケージです。Material UIのドキュメントとコード例にAIクライアントからアクセスするためのもので、ローカルで動き、stdioトランスポートでクライアントと通信します。

狙いは、複数ページにまたがる込み入った質問で、AIアシスタントが存在しないリンクを示したり、根拠を確かめにくい回答をしたりしがちな点を補うことです。MCP経由では次の3点が変わります。

  • 実際のドキュメントを引用して答える
  • 実在するドキュメントへリンクする
  • 正式に公開されたレジストリのコンポーネントコードを使う

つまり目的は「学習データの時点で止まったAPIを書かせない」ことです。MUIのバージョンが上がるたびに変わるprops名やインポートパスを、Claudeの記憶ではなくMUIのドキュメントから引かせる構図です。

Claude Codeに登録する

Claude Code向けの登録は1行です。

claude mcp add mui-mcp -- npx -y @mui/mcp@latest

--より前がClaude Code自身のオプション、後ろがサーバーの起動コマンドです。npx -y @mui/mcp@latestは、@latestタグでパッケージを指定して起動する書式です。この形は、Claude Codeのstdioサーバー追加の書式そのままです。

--を忘れるとどうなるか

npx -y @mui/mcp@latestの-yは、npxに渡すフラグです。--を抜くと、Claude Codeが-yを自分のオプションとして読もうとし、サーバーが意図どおりに起動しません。Claude Codeのドキュメントでは、--以降はサーバーにそのまま渡されると説明されています。claude mcp add --transport stdio myserver -- npx serverがnpx serverを実行する、という対応です。

--envでキーを渡すサーバーでは、--envの直後にサーバー名を置くと、名前が別のKEY=VALUEの組として読まれて失敗します。--envとサーバー名のあいだに--transport stdioのような別のオプションを挟めば避けられます。@mui/mcpは環境変数を要求しないので、この点は他のサーバーを足すときの注意です。

コマンドを打たずにJSONで一括登録したいときは、claude mcp add-jsonも使えます。

claude mcp add-json mui-mcp '{"command":"npx","args":["-y","@mui/mcp@latest"]}'

スコープは3つから選ぶ

何も付けずに登録すると、そのプロジェクトだけで使える自分専用のサーバー(ローカルスコープ)になります。用途で次のように選べます。

スコープフラグ読み込まれる範囲チーム共有保存先
ローカル(既定)フラグなし読み込まれる範囲今のプロジェクトのみチーム共有しない保存先~/.claude.json
プロジェクトフラグ--scope project読み込まれる範囲今のプロジェクトのみチーム共有する保存先プロジェクト直下の.mcp.json
ユーザーフラグ-s user読み込まれる範囲自分の全プロジェクトチーム共有しない保存先~/.claude.json

全プロジェクトで使うならユーザースコープです。

claude mcp add mui-mcp -s user -- npx -y @mui/mcp@latest

MUIを使うリポジトリが決まっているなら、プロジェクトスコープにして.mcp.jsonをコミットする手もあります。チーム全員に同じMCPが配られるためです。その場合、各メンバーは初回に承認を求められます。

claude mcp add mui-mcp --scope project -- npx -y @mui/mcp@latest

例えば次のような.mcp.jsonが作られる形になります(Claude CodeのドキュメントにあるmcpServersの書式に沿った例示です)。

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

エディタ向けに配られているJSONは、"type": "stdio"を明示した形です。.mcp.jsonを手で書くときも、この1行を足してかまいません。typeを省いたエントリはstdioサーバーとして読まれるので、commandで起動するこのサーバーでは省いても動きます。

同じ名前のサーバーを複数のスコープに置くと、優先順はローカル、プロジェクト、ユーザーの順です。エントリはフィールド単位でなく丸ごと上書きされます。

登録し直すときは、まずclaude mcp remove mui-mcp --scope <scope>で消します。同じ名前を複数のスコープに残すと、どの定義が読み込まれたのか分かりにくくなります。個人で試して効果を確かめたあと、チーム用にプロジェクトスコープへ移す流れなら、ローカルの登録を消してから--scope projectで入れ直すのが安全です。

どのスコープにするかは、使い方で決まります。

使い方向くスコープ理由
個人で試す向くスコープローカル(既定)理由設定が他人に及ばず、消すのも簡単
MUIを使うリポジトリをチームで固定する向くスコーププロジェクト理由.mcp.jsonのコミットで全員に同じ設定が届く
MUIを使う複数のリポジトリを自分だけで扱う向くスコープユーザー理由一度の登録で全プロジェクトに効く

つながったかを確かめる

登録後はclaude mcp listで状態を見ます。✔ Connectedと出れば接続済みです。claude mcp get mui-mcpで個別の詳細も見られます。セッション中なら/mcpのパネルでツール数が分かります。

claude mcp list
claude mcp get mui-mcp

接続に成功すると、/mcpのパネルにmui-mcpが並び、ツール数が表示されます。ここでuseMuiDocsとfetchDocsの2つが見えていれば、前節のルールが指すツールはそろっています。見えないなら、claude mcp get mui-mcpの出力を確かめてください。

プロジェクトスコープで入れた場合は、⏸ Pending approvalと出ることがあります。claudeを対話で起動して承認すると接続されます。

登録しただけでは使われないときの対処

よくあるつまずきが、インストールしたのに質問しても使われないケースです。対処は、AIクライアントにルールを与えてMCPを使うよう指示することです。

VS Codeでは.github/instructions/mui.mdにルールを書く形が示されていて、同じ文面は他のIDEのルールにも流用できます。内容は次の手順です。

  1. useMuiDocsツールで、質問に関係するパッケージのドキュメントを取得する
  2. 必要ならfetchDocsツールで追加の資料を取る。使うURLは返された内容にあるものだけにする
  3. 1と2を、質問に必要なドキュメントがそろうまで繰り返す
  4. 取得した内容を使って答える

Claude Codeでは、この種のルールを置く場所はCLAUDE.mdです。MUIのMCPページが示すルールはVS Code向けの文面だけなので、以下はそれをCLAUDE.mdに置き換えた適用例です。

## MUI(Material UI)について
MUIのコンポーネントやpropsを書く・直すときは、記憶で書かない。
1. mui-mcpの`useMuiDocs`で該当パッケージのドキュメントを取得する
2. 足りなければ`fetchDocs`で追加取得する。URLは返却内容にあるものだけを使う
3. 取得した内容に書かれたAPIだけを使ってコードを書く

CLAUDE.mdの書き方そのものは、テストコマンドの書き方を扱ったVitestのCLAUDE.md記述が具体例として参考になります。

古いAPIが出たときの確かめ方

ルールを書いたあとも、生成されたコードに非推奨のpropsが残ることはあります。確かめ方は、依頼文で取得先をドキュメントに固定することです。例えば次のように頼みます。

Dialogのコード中に非推奨のpropsが残っていないか確認して。
まずmui-mcpのuseMuiDocsでDialogのドキュメントを取得し、足りない情報はfetchDocsで補うこと。
直すときは、取得した内容に載っているpropsだけを使って。

期待する動きは、先にuseMuiDocsでDialogのドキュメントが取得され、足りない部分だけfetchDocsが呼ばれ、そのあとでコードの修正案が出る順序です。fetchDocsに渡すURLが、useMuiDocsの返答に含まれるものかどうかも見てください。返答にないURLが渡されていたら、ルールの「返却内容にあるものだけ」が守られていません。

呼び出しが一度も出ないまま答えが返ってきたら、記憶で書かれた可能性が高い状態です。次の順で切り分けます。

  1. /mcpのパネルでmui-mcpが接続済みで、2つのツールが見えているか
  2. CLAUDE.mdに上記のルールが入っていて、作業中のディレクトリから読める位置にあるか
  3. 依頼文でuseMuiDocsから取得するよう名指ししているか

ツール名はMUI側が示している2つだけを使い、推測で別の名前を呼ばせないでください。

つながらないときの切り分け

接続エラーのときは、MCP Inspectorでサーバー単体を確かめる方法があります。

npx @modelcontextprotocol/inspector

起動後にターミナルへ表示されるURL(http://127.0.0.1:6274)を開き、次のように設定します。

項目値
Transport type値Stdio
Command値npx
Arguments値-y @mui/mcp@latest

Connectを押して接続でき、利用可能なツールの一覧が出れば、サーバー自体は動いています。一覧にuseMuiDocsとfetchDocsが見えるかも、ここで合わせて確かめられます。つながらなければ、Inspectorを起動したターミナルのログに詳細が出ます。

Inspectorで動くのにClaude Codeだけ失敗するなら、Claude Code側を疑います。claude mcp get mui-mcpのIssue:行に失敗の詳細が出ます。起動が遅くタイムアウトしている場合は、MCP_TIMEOUT環境変数で起動の待ち時間を延ばせます。

MCP_TIMEOUT=10000 claude

失敗したサーバーをまとめてやり直すなら、/mcp reconnect allが使えます(v2.1.284以降。手順は/mcp reconnect allの解説にあります)。

他のクライアントとの差

Claude Code以外のクライアントでも、同じnpx -y @mui/mcp@latestを、クライアントごとの設定画面へ渡す形で使えます。

  • VS Code・Cursor・Windsurf: MCP設定のmcpServersにmui-mcpを追加。VS Codeはエージェントモードを有効にし、settings.jsonにchat.mcp.enabledとchat.mcp.discovery.enabledをtrueで加える必要があります
  • JetBrains IDE: SettingsのTools > AI AssistantにあるModel Context Protocol (MCP)で、名前に「MUI MCP」、コマンドにnpx、引数に-y @mui/mcp@latestを指定し、OKとApplyで確定
  • Zed: 拡張機能「MUI MCP」を入れるか、カスタムサーバーとして登録

Claude Codeはclaude mcp addの1行で済み、VS Codeのようなエディタ側の有効化設定が要らない点が違いです。

まとめ

@mui/mcpを入れても、Claudeに使わせる指示がなければ呼ばれないことがあります。登録はスコープを決めて1行、使わせ方はCLAUDE.mdにuseMuiDocsから始まる手順として書く、の2段で考えると整理しやすくなります。つながらないときはMCP Inspectorでサーバー単体を確かめ、そのうえでClaude Code側のclaude mcp getに進むと原因を絞れます。同じ「最新ドキュメントを渡す」発想のサーバーとしてはContext7のMCP設定もあります。Claude Code全体の使い方はClaude Code完全ガイドにまとめています。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →