MUI の MCP 完全ガイド - AI がドキュメントを正確に参照できるようになる仕組み

はじめに

Material UI (MUI) を使って開発している時、AI アシスタントに質問しても「存在しないリンクを提示される」「古い情報を教えられる」といった経験はありませんか? MUI の MCP はこの問題を解決する画期的な仕組みです。

この記事では、MUI の MCP とは何か、どう使うか、そして実際にどう便利なのかを、初心者にもわかりやすく解説します。

MCP とは?

MCP (Model Context Protocol) は、AI アシスタントが「信頼できる情報源」に直接アクセスするための標準規格です。Anthropic 社が開発した、いわば 「AI のための USB ポート」 のような仕組みです。

なぜ MCP が必要なのか?

従来の AI アシスタントは、学習済みの知識だけで回答していました。これには以下のような問題がありました:

• ❌ 古い情報: 学習時点の情報しか知らない
• ❌ 不正確なリンク: 存在しないドキュメントへのリンクを生成することがある
• ❌ 検証が困難: 情報源が不明確で、正しさを確認しづらい

MCP はこれらの問題を解決します:

• ✅ 最新の公式ドキュメントを直接参照
• ✅ 実在するリンクのみを提示
• ✅ 出典が明確で検証可能

MUI の MCP でできること

MUI の MCP を導入すると、AI アシスタントは以下のことができるようになります:

1. 公式ドキュメントの正確な引用

   • 最新の MUI ドキュメントを直接参照
   • 存在しないページへのリンクを生成しない

2. 正確なコンポーネント情報の提供

   • 正しい props の名前と型
   • 実際に動作するコード例

3. 複雑な質問への的確な回答

   • 複数のドキュメントページにまたがる情報を統合
   • コンテキストを理解した提案

セットアップ方法

それでは実際に MUI の MCP を設定してみましょう。主要な開発環境別に説明します。

1. VS Code / Cursor / Windsurf での設定

ステップ 1: MCP 設定を開く

1. 設定を開く: Settings → MCP → Add Server
2. 以下の JSON を追加:

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

ステップ 2: VS Code ユーザーの追加設定

VS Code を使用している場合は、settings.json に以下を追加:

{
  "chat.mcp.enabled": true,
  "chat.mcp.discovery.enabled": true
}

そして、Agent モード (Copilot Chat 用) を有効にします。

2. JetBrains IDE (IntelliJ, WebStorm など) での設定

1. 設定を開く: Settings → Tools → AI Assistant → Model Context Protocol (MCP)
2. 以下の情報を入力:
   • Name: MUI MCP
   • Command: npx
   • Arguments: -y @mui/mcp@latest
3. OK をクリックして適用

3. Zed での設定

Zed では 2 つの方法があります:

方法 A: 拡張機能として (推奨)

1. cmd-shift-x (macOS) または ctrl-shift-x (Linux) を押す
2. "MUI MCP" を検索してインストール
3. 追加の設定は不要!

方法 B: カスタムサーバーとして

1. コマンドパレットで agent: add context server を検索
2. 以下を追加:

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

4. Claude Code での設定

Claude Code はターミナルで動作する Anthropic の AI コーディングツールです。

ローカルプロジェクト用 (そのプロジェクトのみ)

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

グローバル設定 (全プロジェクトで使用)

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

実際の使用例

設定が完了したら、実際に使ってみましょう! 以下は具体的な使用例です。

例 1: 基本的なコンポーネントの使い方を聞く

質問:

MUI の Button コンポーネントで、アイコン付きのボタンを作りたいです。
どうすればいいですか?

MCP なしの場合:

• 古い API の説明
• 存在しない props の提案
• 動かないコード例

MCP ありの場合:

• 最新の公式ドキュメントから引用
• 実際に動作するコード例
• 正しい import 文とともに提示

import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';

function App() {
  return (
    <Button variant="contained" endIcon={<SendIcon />}>
      送信
    </Button>
  );
}

例 2: 複雑なレイアウトの実装

質問:

MUI で、レスポンシブなダッシュボードレイアウトを作りたいです。
サイドバーとメインコンテンツエリアがあって、
モバイルではサイドバーがドロワーになるようにしたいです。

MCP の動き:

1. Grid システムのドキュメントを参照
2. Drawer コンポーネントのドキュメントを参照
3. レスポンシブデザインのベストプラクティスを参照
4. これらを統合した実装例を提示

import { Box, Drawer, AppBar, Toolbar, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';

function DashboardLayout() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  return (
    <Box sx={{ display: 'flex' }}>
      {isMobile ? (
        <Drawer
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
        >
          {/* サイドバーの内容 */}
        </Drawer>
      ) : (
        <Box sx={{ width: 240, flexShrink: 0 }}>
          {/* 固定サイドバー */}
        </Box>
      )}
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        {/* メインコンテンツ */}
      </Box>
    </Box>
  );
}

例 3: テーマのカスタマイズ

質問:

MUI のテーマで、カスタムカラーパレットを設定して、
ダークモードにも対応させたいです。

MCP は以下のドキュメントを参照して回答:

• Theme customization のページ
• Dark mode のページ
• Palette のページ

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CssBaseline } from '@mui/material';

const theme = createTheme({
  palette: {
    mode: 'dark', // または 'light'
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
    background: {
      default: '#0a1929',
      paper: '#001e3c',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* アプリのコンテンツ */}
    </ThemeProvider>
  );
}

トラブルシューティング

問題 1: MCP が接続できない

解決方法: MCP Inspector を使用

npx @modelcontextprotocol/inspector

ターミナルに表示される URL (通常 http://127.0.0.1:6274) をブラウザで開き:

1. Transport type: Stdio を選択
2. Command: npx を入力
3. Arguments: -y @mui/mcp@latest を入力
4. Connect をクリック

接続に成功すると、利用可能なツールのリストが表示されます。接続できない場合は、ターミナルのログでエラーを確認してください。

問題 2: MCP が使われない

AI アシスタントが MCP を使うように、ルールを設定する必要がある場合があります。

VS Code の場合、.github/instructions/mui.md を作成し、以下を追加:

## MUI に関する質問には mui-mcp サーバーを使用する

1. `useMuiDocs` ツールを呼び出して、関連するパッケージのドキュメントを取得
2. 必要に応じて `fetchDocs` ツールで追加のドキュメントを取得
   (返されたコンテンツ内の URL のみを使用)
3. すべての関連ドキュメントを取得するまで 1-2 を繰り返す
4. 取得したコンテンツを使用して質問に回答

問題 3: npx が見つからない

特に JetBrains IDE や Zed で、npx のパスが通っていない場合があります。

解決方法:

絶対パスを指定します:

# macOS/Linux の例
/Users/username/.volta/bin/npx
# または
/usr/local/bin/npx

# Windows の例
C:\Users\username\AppData\Roaming\npm\npx.cmd

パスを確認するには:

which npx  # macOS/Linux
where npx  # Windows

MCP の仕組み (詳しく知りたい人向け)

アーキテクチャ

MCP は以下の 3 つのコンポーネントで構成されています:

1. ホスト (Host): AI アプリケーション (VS Code, Claude など)
2. クライアント (Client): 接続を管理
3. サーバー (Server): データや機能を提供 (MUI MCP はこれ)

┌─────────────┐
│   ホスト    │ (VS Code, Claude など)
│ (AI App)    │
└──────┬──────┘
       │
       ↓
┌──────────────┐
│ クライアント │ (MCP Client)
└──────┬───────┘
       │
       ↓
┌──────────────┐
│ サーバー     │ (@mui/mcp)
│             │
│ - ドキュメント取得
│ - コード例の提供
│ - コンポーネント情報
└──────────────┘

通信プロトコル

MCP は JSON-RPC 2.0 ベースのプロトコルを使用しています。MUI MCP の場合、以下のようなツールを提供:

1. useMuiDocs: MUI のドキュメントを検索・取得
2. fetchDocs: 特定の URL のドキュメントを取得

AI アシスタントは、これらのツールを適切に呼び出して、最新の情報を取得します。

まとめ

MUI の MCP を導入することで:

✅ 正確な情報: 公式ドキュメントから直接引用
✅ 最新の知識: 常に最新の API 情報にアクセス
✅ 信頼性の向上: 存在しないリンクや間違った情報がなくなる
✅ 開発効率アップ: より的確な回答で開発がスムーズに

セットアップは数分で完了し、一度設定すれば自動的に動作します。MUI を使った開発をしているなら、ぜひ導入してみてください!

参考リンク

• MUI 公式 MCP ドキュメント
• Model Context Protocol 公式サイト
• Anthropic MCP ドキュメント

---

この記事が役に立ったら、いいね & フォローをお願いします! 🙌