Claude Code MCP サーバー：追加・確認・実用

MCP サーバーとは何か

Claude Code に新しいツールを貸し出す小さなアダプター。

1. 1

   MCP サーバーは差し込み式のアダプター

   MCP（Model Context Protocol）は、モデルがコードベースの外にあるツール——データベース、ブラウザ、ドキュメントライブラリ——を呼び出せるようにする Anthropic 製のオープンプロトコル。外部サービスと実際にやり取りするのは Claude Code ではなくサーバーで、その結果はモデルが呼び出せるツールとして返される。

   

2. 2

   ディレクトリからサーバーを選ぶ

   pulsemcp.com のようなディレクトリには既製のサーバーが数百件登録されており、各プロジェクトのサイトにはカバー範囲が書かれている——Context7 のトップページには、最新ドキュメントを取得できるフレームワークとライブラリの一覧が並ぶ。このページでインストールするのは、最新ドキュメント用の Context7 と、ブラウザ自動化用の Playwright。

   

Context7 サーバーを追加する

ターミナルに1行、リポジトリに1つの JSON ファイル。

1. 3

   2つのトランスポート、1つのコマンド

   Anthropic の MCP ドキュメントには3つの追加方法が載っているが、実際に使うのはローカルの stdio プロセスとリモートの HTTP 接続の2つ。どちらもコマンドの形は同じ：claude mcp add、サーバー名、二重ダッシュ、その後に起動コマンド。

   

2. 4

   プロジェクトの README からコマンドをコピーする

   手入れの行き届いた MCP プロジェクトは、インストール用のコマンドをそのまま用意している。Context7 の GitHub リポジトリでは、Claude Code のセクションにローカル接続コマンドが表示され、その上にはリモート接続のバリエーションがある——自分の環境に合うものをコピーする。

   

3. 5

   --scope project でスコープを固定する

   実行する前に --scope project を付けると、設定がプロジェクトの .mcp.json に書き込まれ、リポジトリと一緒に移動する——チームメイトは clone するだけで同じサーバーを手に入る。代替は local（自分だけ、このプロジェクトだけ）と global（このマシンのすべてのプロジェクト）。Windows では npx コマンドの前に cmd /c を付け、実行後にシェルが閉じるようにする。

   

4. 6

   .mcp.json は Claude Code が書いてくれる

   追加に成功すると、プロジェクトのルートに .mcp.json が作られ、その中に mcpServers オブジェクトが現れる。各エントリにはトランスポートの種類と、サーバーの起動に必要な情報——ここでは command と args 配列を持つ stdio プロセス——が保存される。

   

5. 7

   ローカルが失敗したらリモートに切り替える

   これらのパッケージは移り変わりが早く、ローカルの stdio 接続は時々不安定になる。頼れるのはホスト版：Context7 の README には HTTP トランスポートのコマンド行が載っており、こちらも --scope project を付ければ同じファイルに書かれる。ターミナルは追加の成功と変更したファイルを確認してくれる。

   

6. 8

   HTTP エントリは3行で済む

   リモートサーバーはローカルプロセスを必要としないため、設定は最小限——type: http とサーバーの URL だけ。ファイルを手編集した後は Claude Code を再起動し、新しい接続を読み込ませる。

   

接続を確認して実際に使う

まず緑のチェックを、次に実タスクを。

1. 9

   /mcp で接続を確認する

   セッション内で /mcp と入力すると Manage MCP servers パネルが開く。サーバーの横に緑のチェックが付いていれば接続済み。失敗したエントリは Enter で再試行できる。パネルには各スコープがどのファイルを読むかも一覧される——設定変更が反映されないときはまずここを見る。

   

2. 10

   プロンプトでサーバー名を指定する

   「use context7」と明示すると、そのサーバーのツールへルーティングされる。ここでのタスクは Tailwind の設定を最新ドキュメントと照合することで、@src/app/globals.css を付けて、Claude が正しいファイルを読んだ上でサーバーに問い合わせるようにしている。

   

3. 11

   Context7 はまずライブラリ ID を解決する

   ドキュメントを取得する前に、Context7 は resolve-library-id を実行し、「Tailwind CSS」を正しいライブラリ ID とトピックに照合する。ツール呼び出しを承認すれば、そのままドキュメント取得へ進む——古い推測ではなく、2回の短い呼び出し。

   

4. 12

   回答は最新のドキュメントに基づく

   返答は——テーマ変数は Tailwind CSS v4 向けに正しく設定されており、根拠は箇条書きで列挙される——鮮度の落ちた訓練データではなく、取得したばかりのドキュメントに裏付けられている。これがサーバーの意味あるところだ：ライブラリの今の姿に合った答えが返る。

   

5. 13

   CLAUDE.md に書けば習慣になる

   プロンプトで # と入力するとプロジェクトメモリを保存できる。「Use Context7 to check up-to-date docs when needed for implementing new libraries or frameworks.」は CLAUDE.md に書き込まれ、このプロジェクトの将来のすべてのセッションで自動的に適用される。

   

Playwright を追加してブラウザを制御する

同じ手順で、2つ目の超能力を。

1. 14

   Playwright も同じ手順でインストール

   Playwright MCP の README の Claude Code セクションにも同じインストール形——npx パッケージを指す1行の claude mcp add——が載っている。--scope project を付け、プロジェクトのルートで実行し、セッションを再起動して新しいサーバーを接続させる。

   

2. 15

   2つのサーバーが1つのファイルを共有

   プロジェクトの .mcp.json には、HTTP 経由の Context7 とローカルの stdio プロセスとしての Playwright、2つのエントリが並ぶ。どちらも、起動フラグが変わったときは手で編集すればよい——このファイルが唯一の正確な情報源だ。

   

3. 16

   Claude に実ブラウザを運転させる

   Playwright が接続されていれば、ページを開いて要約してほしいと頼むと Navigate to a URL ツールが起動——実際にブラウザウィンドウが開き、モデルはレンダリング済みのページを読む。自分のサイトのスモークテストや、コンポーネントの実環境での見え方の確認に役立つ。

   

さらに進む