Claude Code MCPチュートリアル：MCPサーバーの正しい追加方法
Context7やPlaywright、任意のMCPサーバーをClaude Codeに接続する方法——トランスポート、スコープ、.mcp.json、APIキー、/mcpパネルまで、図解付きで一気に解説します。
要点だけ
- どんなサーバーも1コマンドで追加できます。ローカルサーバーなら claude mcp add name -- npx -y @scope/package、リモートなら claude mcp add --transport http name url です。
- トランスポートは3種類。stdioは手元のマシンでコマンドを実行、SSEは旧方式のリモート、streamable HTTPが現行のリモート方式です。
- スコープが3つあり、誰がサーバーを使えるかを決めます。local（自分だけ）、project（.mcp.json で共有）、user（すべてのプロジェクト）です。
- セッション内で /mcp を実行すると状態とツール一覧を確認できます。最初のツール呼び出し時に権限を求められ、1回だけ許可するか常時許可を選べます。
Claude Code Tutorial #7 - MCP Servers
チャンネル：The Net Ninja14:16
Claude Code MCP: How to Add MCP Servers (Complete Guide)
チャンネル：Leon van Zyl17:58
Model Context Protocol (MCP) — official Claude Code docs
ドキュメント：code.claude.com/docs
スクリーンショットはThe Net Ninjaの章——クリーンな全画面録画——から。コマンドの分解、スコープ、Windowsの修正はLeon van Zylのより詳しいウォークスルーと公式ドキュメントに拠りました。
フレームの権利は各作者に帰属し、該当する瞬間へのディープリンク付きでクレジットを表記しています。記事は当サイトによるものです。
ゼロから動くMCPサーバー2個まで
パート1 · MCPサーバーでできること
- 1
MCPがClaude Codeに何をもたらすか
Claude Codeにはファイルとシェル用のツールが組み込まれていますが、コードベースの外には手が届きません。MCP（Model Context Protocol）はAnthropic標準の拡張ツールの仕組みで、サーバーが機能を公開し、Claude Codeが組み込みツールと同じように呼び出せます。
MCPを1行で定義した講座のスライド。0:52 を視聴 - 2
作業に合ったサーバーを選ぶ
サーバーごとに専用ツールが付きます。Supabaseサーバーはテーブル一覧・Edge Functionsのデプロイ・SQL実行、Playwrightは実ブラウザの操作、Context7は最新フレームワークドキュメントを担当。繰り返しの手間を消してくれるものから入れましょう。
Supabaseの例：3つのツールで1つの外部サービスを操作。1:24 を視聴 - 3
サーバーのREADMEでインストールコマンドを探す
多くのサーバー作者はREADMEにClaude Code用コマンドを用意しています——Context7もPlaywrightも例外ではありません。何があるか見て回るなら、PulseMCPのようなディレクトリが便利です。
Playwright MCPのREADMEには機能と要件が書かれています。2:02 を視聴 - 4
3つのトランスポートを理解する
公式ドキュメントはインストールをローカルとリモートに分けています。stdioサーバーは手元のマシンでコマンドを実行する方式で、これがデフォルト。SSEとHTTPサーバーは接続先のリモートエンドポイントで、SSEは旧方式、後継がstreamable HTTPです。claude mcp add の書き方はそれぞれ少し違います。
ローカルのstdioとリモートのSSE・HTTPを比較した公式ドキュメント。3:02 を視聴
パート2 · 最初のサーバーを追加
- 5
projectスコープでContext7を追加
ターミナルで claude mcp add context7 --scope project -- npx -y @upstash/context7-mcp を実行します。名前は自由、ダッシュ2つの後が実行コマンドで、--scope project を付けると個人設定ではなくプロジェクト共有の設定に書き込まれます。
Context7ドキュメントサーバーを追加するコマンド。5:22 を視聴 - 6
生成された .mcp.json を読む
projectスコープのサーバーはリポジトリ直下の .mcp.json の mcpServers キーに記録されます。各エントリにはタイプ（ここではstdio）とコマンド、引数が入り、CursorやClaude Desktopと同じ形式です。
.mcp.json の中身：stdioサーバーの type・command・args。6:42 を視聴 - 7
Windowsは cmd /c 接頭辞に注意
WSLを使わないネイティブWindowsでは、stdioコマンドの npx の前に cmd /c を付けて、サーバー終了後にシェルがきれいに閉じるようにします。公式ドキュメントが警告ボックスで触れており、解説動画でも具体的な修正箇所を確認できます。
Windowsのstdioサーバーに関する公式の警告ボックス。3:24 を視聴 - 8
ファイルがリポジトリに入ったか確認
projectスコープで追加すると、.mcp.json が未追跡ファイルとしてエクスプローラに現れます。コミットすればチームメンバーも同じサーバーを使えます。localスコープはこのファイルに一切触れません。
プロジェクト直下に新しくできた、コミット前の .mcp.json。8:32 を視聴 - 9
リモートがよければHTTPトランスポート
stdioがうまく動かないときの逃げ道がリモートエンドポイントです：claude mcp add --transport http context7 --scope project https://mcp.context7.com/mcp。ローカルプロセスもnpmも不要で、Claude CodeがURLに直接接続します。
Context7エンドポイントに対するHTTP版の追加コマンド。8:36 を視聴 - 10
/mcp で接続を確認
Claude Codeを起動して /mcp を実行します。サーバーごとに状態とツール一覧が表示されます。失敗は内蔵の再接続で直ることが多く、直らない場合はこの後のトラブルシューティング章で原因を確認してください。
/mcp パネルに接続中のcontext7と2つのツールが表示。9:22 を視聴
パート3 · 実務でサーバーを使う
- 11
本物のプロンプトでサーバーを呼ぶ
組み込みツールではできないことを頼み、サーバー名を指定します：「最新のTailwindドキュメントを確認して、僕のグローバルCSSファイルと照らして——context7を使って」。@メンションでファイルを付けると、回答が自分のコードに即したものになります。
context7経由で最新Tailwindドキュメントを求めるプロンプト。9:38 を視聴 - 12
ツール呼び出しを承認する
サーバーのツールが初めて動くとき、Claude Codeは許可を求めてきます。1回だけ許可してもよいですし、信頼できるサーバーなら「常に許可」を選べば、以後の呼び出しは確認なしで進みます。
Context7の resolve-library-id ツールの許可カード。10:00 を視聴 - 13
根拠のある回答を読む
ツールは関連ドキュメント——ここではTailwind v4のテーマ変数ガイド——をトークンコスト付きで返し、Claude Codeがファイルに適用します。これがMCPの真価です：学習データの推測ではなく、最新ドキュメントに基づく回答が得られます。
テーマ設定を確認する get-library-docs のレスポンス。10:15 を視聴 - 14
CLAUDE.md で習慣にする
ハッシュ記号を入力するとプロジェクトメモリを追加できます。例：「新しいライブラリやフレームワークを実装するときは、最新ドキュメントをContext7で確認」。この1行が CLAUDE.md に書き込まれ、以後のセッションすべてに引き継がれます。
Context7をデフォルトにする1行のCLAUDE.mdメモリ。10:42 を視聴 - 15
2個目のサーバー：Playwright
ブラウザ操作も同じパターンです：claude mcp add playwright --scope project -- cmd /c npx @playwright/mcp@latest——macOSやLinuxでは cmd /c の部分を外します。1つのリポジトリに複数サーバー、設定ファイルは1つのまま。
projectスコープでPlaywright MCPサーバーを追加。11:22 を視聴 - 16
ブラウザを動かすところを見る
Claude Codeにページを開いて要約させましょう——Playwrightがナビゲート・クリック・読み取りを行い、結果を報告します。Context7のドキュメントとPlaywrightのブラウザがあれば、外部作業の大半は1プロンプトで済みます。
要約のためにサイトへ移動するPlaywright MCP。12:42 を視聴
環境変数・ヘッダー・APIキー
リモートサーバーや認証付きAPIには資格情報が要ります。Claude Codeはstdioサーバーには環境変数を、リモートサーバーにはヘッダーを使います。設定ファイルの手編集は不要です。
- 1stdioサーバー：claude mcp add myserver -e API_KEY=your-key -e ZONE=your-zone -- npx -y @some/mcp-server——変数ごとに -e を繰り返し、サーバー名の直後に置きます。
- 2リモートHTTPサーバー：claude mcp add --transport http myserver https://example.com/mcp --header "Authorization: Bearer your-key"——このヘッダーは毎回のツール呼び出しで送信されます。
- 3スコープのおさらい：localはこのプロジェクトの自分だけ、projectは .mcp.json で共有、userは全プロジェクトにインストール。追加時に -s または --scope で指定します。
- 4サーバーの削除：claude mcp remove name——projectスコープの場合は .mcp.json の変更をコミットして、チーム側にも削除を反映しましょう。
-e で渡した値は設定ファイルに平文で保存されます。APIが許すなら権限を絞ったキーを使い、本番の資格情報をprojectスコープの .mcp.json にコミットしないでください。
/mcp がfailedになるとき
Claude CodeのMCPトラブルは、原因がいくつかに集約されます。削除して再追加する前に、このリストを上から潰しましょう。
- 1Windowsで Unknown option -y：端末によってはnpmのこのフラグを解釈できません。PowerShellやコマンドプロンプトから追加コマンドを実行するか、-y を外して追加し、後から .mcp.json のargs配列に手動で戻してください。
- 2ネイティブWindowsでstdioが失敗：コマンドに cmd /c を付けます——例：cmd /c npx -y @some/package@latest。WSLなしでは必須で、@latest タグが古いキャッシュビルドの使用も防いでくれます。
- 3ステータスがfailed：/mcp を開いて再接続——一時的な失敗は2回目で直ることが多いです。直らなければパネルにサーバーログの場所が表示されるので、本当のエラーを確認しましょう。
- 4別のプロジェクトにサーバーがない：それはスコープが正常に働いています。projectスコープのサーバーはそのリポジトリの .mcp.json にしかいません。マシン全体に入れたければuserスコープへ。
- 5接続できても使われない：プロンプトで名前を指名します——「context7でドキュメントを確認して」——か、CLAUDE.md のメモリに追加します。言われないとモデルは慣れた組み込みツールに手を伸ばしがちです。
すべてダメなら：claude mcp remove name で削除し、ターミナルを再起動、確実に動くトランスポート——経験上はリモートHTTP版が一番安定——で再追加しましょう。