Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【Claude Code】MCPサーバーの使い方をわかりやすく解説

AIが外部ツールを操作するMCPサーバーについて解説します。Windows環境でのMCPサーバー構築から、ブラウザ自動操作ツールPlaywrightを例に、サーバーの追加、Claude Codeからの利用、設定の確認・削除までを実践的に学べます。個人用とチーム共有の設定スコープも理解できます。

作成日: 更新日:

開発環境

  • OS: Windows10(WSL2 / Ubuntu)
  • Editor: Visual Studio Code
  • Node.js: v22.22.2
  • claude-code: 2.1.118
  • 作業ディレクトリ: ~/dev/mcp-demo(新規作成して使う)

MCP(エムシーピー)とは?

MCP(Model Context Protocol/モデルコンテキストプロトコル)は、**AIであるClaudeに、外部のツールを操作させるための共通ルール(規格)**です。 これはAnthropicという企業が中心となって開発しているオープンな規格であり、Claudeだけでなく、他のAIツールでも利用されています。

MCPを使うと、AIが様々な外部のツールやサービスと連携できるようになります。 具体的には、コンピュータ上のファイルを編集したり、コマンド(Bash)を実行したりする基本的な操作は、AIが直接行えます。 しかし、GitHubでプルリクエスト(PR)を作成する、ビジネスチャットツールであるSlackにメッセージを投稿する、インターネット上のウェブブラウザを操作するといった、より専門的で高度な作業は、MCPサーバーという仕組みを介してAIに追加され、利用できるようになります。

公式ドキュメント: https://code.claude.com/docs/ja/mcp

注意: 「MCPサーバー」という言葉を聞くと、ご自身でコンピュータのサーバーを用意する必要があると思うかもしれませんが、基本的にその必要はありません。 通常は、npxというツールを使って配布されているものを利用するのが一般的です。これにより、特別な準備なしにMCPの機能を使えます。

MCPサーバーには2種類ある

MCPサーバーには、大きく分けて2つの種類があります。これらを理解することは、今後のシステム開発やテストを行う上で重要になります。

  1. 自分のPC上で動くタイプ このタイプは、PCの中に直接プログラムをインストールして動かす形式です。外部のインターネットサービスに接続する必要がなく、自分のPCだけで全ての操作やテストが完結します。 今回学習するPlaywrightは、この自分のPC上で動作するタイプに該当します。自分のPCだけで動作するため、インターネット環境がなくても作業を進められるという利点があります。

  2. ネット上のサービスに接続するタイプ 一方、このタイプはインターネット上に存在するサービスに接続して利用する形式です。例えば、プログラムの管理に使うGitHubや、情報共有ツールであるNotionなどがこれに該当します。 これらのサービスを利用するには、通常、ユーザー名とパスワードなどを使った「認証」が必要になります。認証を行うことで、サービスが誰によって利用されているかを確認し、適切なアクセス権限を与える仕組みです。

システムエンジニアを目指す上で、まず最初におすすめするのは、自分のPCだけで完結するPlaywrightのようなツールを試すことです。外部サービスへの接続や認証の複雑さを気にすることなく、開発やテストの基本的な流れを学ぶことができるため、初心者の方でもスムーズに学習を進められます。

動作確認用ディレクトリを作る

まず、これから作業を行うための専用のディレクトリ(フォルダ)を作成し、そのディレクトリへ移動します。これにより、他のファイルと混ざることなく、このプロジェクトに必要なファイルを整理して管理することができます。

1mkdir -p ~/dev/mcp-demo && cd ~/dev/mcp-demo
2claude

このコマンドについて詳しく説明します。 mkdir -p ~/dev/mcp-demo は、ディレクトリを作成するためのコマンドです。mkdir は「make directory」の略です。 ~ は、お使いのコンピューターのホームディレクトリ(ユーザーの個人ファイルが保存されている場所)を表します。 このコマンドは、ホームディレクトリの中に dev というディレクトリを作り、さらにその中に mcp-demo というディレクトリを作成します。 -p オプションは、途中の dev ディレクトリが存在しなかった場合でも、自動的にそれを作成してから mcp-demo を作るように指示する便利なオプションです。 && は、前のコマンド(mkdir)がエラーなく成功した場合にのみ、次のコマンドを実行するという意味です。 cd ~/dev/mcp-demo は、「change directory」の略で、カレントディレクトリ(現在作業している場所)を、先ほど作成した mcp-demo ディレクトリへ移動するコマンドです。 最後の claude は、ここで claude というコマンドを実行することを示しています。

次に、現在の作業を一旦区切り、claude mcp コマンドのヘルプを確認します。ヘルプは、そのコマンドがどのような機能を持っていて、どのように使うのかを知るための重要な情報源です。今回は、特に add、list、get、remove の4つのコマンドに注目して確認します。

1claude mcp --help

これは、claude mcp コマンドの使い方や利用可能なオプション、サブコマンドなどを表示するためのコマンドです。--help オプションは、多くのコマンドで利用でき、そのコマンドの詳しい情報を確認する際に非常に役立ちます。

出力結果
1Commands:
2  add <name>      Add a server
3  remove <name>   Remove an MCP server
4  list            List configured MCP servers
5  get <name>      Get details about an MCP server
6  ...

上記の出力結果は、claude mcp --help コマンドを実行したときに表示される内容です。Commands: の下に、claude mcp コマンドで利用できる主要なサブコマンドと、それぞれの簡単な説明がリストされています。ここで、今後よく利用する add(サーバーを追加)、remove(サーバーを削除)、list(設定されているサーバーを一覧表示)、get(特定のサーバーの詳細情報を取得)といったコマンドが確認できます。

ローカル型MCPサーバーを追加する(Playwright編)

「MCPサーバー」とは、プログラムからブラウザなどの外部サービスを操作するための仕組みの一つです。特に、ここではブラウザを自動で操作するためのサーバーについて説明します。

今回は、ブラウザを操作するMCPサーバーを追加する方法をご紹介します。このサーバーは、すでに配布されている「npmパッケージ」と呼ばれる形で提供されているため、ご自身でサーバーのプログラムを作成する必要はありません。

npmパッケージとは、JavaScriptなどの開発で利用できる便利なプログラムの集合体のことです。これをインストールして使うことで、開発の手間を大幅に減らすことができます。

1claude mcp add playwright -- npx -y @playwright/mcp@latest

上記のコマンドは、claudeというCLIツール(コマンドラインインターフェースツール)を使って、新しいMCPサーバーを追加するためのものです。

具体的には、claude mcp add コマンドに続けて、追加したいMCPサーバーの「名前」と、そのサーバーを「起動するためのコマンド」を指定しています。

ここでは、サーバー名として「playwright」を指定しています。

そして、「--」(ハイフンを2つ)に続いて、実際にサーバーを起動するコマンド「npx -y @playwright/mcp@latest」が指定されています。

npxコマンドは、npmパッケージを一時的に実行するためのコマンドです。これにより、まずパッケージをインストールしてから実行するという手間を省けます。

-yオプションは、パッケージのインストール確認などのプロンプトに対して、自動的に「はい」と答えることを意味します。

@playwright/mcp@latestは、ブラウザ操作の自動化ライブラリであるPlaywrightを利用したMCPサーバーのnpmパッケージの名前と、最新版(@latest)を指定しています。

出力結果
1Added stdio MCP server playwright with command: npx -y @playwright/mcp@latest to local config

上記の出力結果は、MCPサーバー「playwright」が、指定されたコマンド「npx -y @playwright/mcp@latest」でローカル設定に追加されたことを示しています。これで、このMCPサーバーが使える状態になりました。

書式のポイントはこちら。

1claude mcp add <名前> -- <起動コマンド> [引数...]

この書式について説明します。

<名前>の部分には、追加するMCPサーバーを識別するための任意の名前を指定します。 <起動コマンド>の部分には、そのMCPサーバーを起動するための実際のコマンドを記述します。 [引数...]は、起動コマンドに追加で渡したい引数がある場合に記述します。

重要なのは、claude mcp add <名前>の後に必ず「--」(ハイフンを2つ)を挟むことです。

注意: -- を忘れると引数が Claude 側のオプションとして解釈されてエラーになる。必ず -- で区切る。

この注意書きにあるように、「--」は非常に重要な役割を持っています。

この「--」は、それ以降の文字列が「claude」コマンド自体のオプションではなく、その後ろに続く「起動コマンド」とその「引数」であることを明確に区切るための目印です。

もし「--」を忘れてしまうと、起動コマンドやその引数がclaudeコマンド自身のオプションとして誤って解釈されてしまい、エラーが発生する可能性があります。

したがって、必ず「--」で区切るようにしてください。

追加状況を確認する

何かツールやライブラリをシステムに追加した後、それが正しく認識され、利用できる状態になっているかを確認する方法を説明します。

追加状況を確認するためには、以下のコマンドを実行します。

1claude mcp list

このコマンドを実行すると、システムに登録されているモジュールの一覧と、それぞれの接続状況が表示されます。

コマンドを実行した際の出力結果の例は以下のようになります。

出力結果
1playwright: npx -y @playwright/mcp@latest - ✓ Connected

出力結果の中で最も重要な点は、行の最後に ✓ Connected と表示されているかどうかです。 ✓ Connected は、対象のモジュール(上記の例では playwright の一部)が正しくシステムに接続され、問題なく利用できる状態であることを示しています。

もし、✓ Connected の代わりに ✗ が表示された場合は、以下のいずれかの問題が考えられます。

  • npx または Node.js がインストールされていない: npx は、Node.jsというJavaScriptの実行環境に含まれるツールです。これがシステムにインストールされていないと、上記のコマンドを正しく実行できません。
  • コマンドに誤りがある (タイポ): 入力したコマンドのスペルに間違い(タイポ)がある可能性があります。もう一度コマンドを注意深く確認してください。

注意: 初回は npx が裏でパッケージをダウンロードするため、Connected 表示まで数秒〜十数秒かかる。

上記の注意点にあるように、このコマンドを初めて実行する際は、必要なパッケージがインターネット経由で自動的にダウンロードされるため、✓ Connected と表示されるまでに数秒から十数秒の時間がかかることがあります。表示が遅い場合でも、焦らずにしばらくお待ちください。

これで、システムに追加したモジュールの状況を確認する方法と、その結果の読み方が理解できたと思います。

Claude Code から使ってみる

Claude Code は、AIであるClaudeが、コードの生成だけでなく、実際にプログラムを実行できる環境です。この機能を使うことで、Claudeに指示を出すだけで、さまざまなプログラミングタスクを実行させることができます。

まず、以下のコマンドでClaude Codeを起動します。

1claude

起動後、Claudeのチャットインターフェース内で、/mcp コマンドを実行します。このコマンドは、現在Claudeが接続している「MCPサーバー」と呼ばれる、コード実行環境の一覧を確認するために使用します。

1/mcp

このコマンドを実行すると、以下のような出力結果が表示されます。

出力結果
1MCP Servers
2─ playwright   connected   tools: 21
3(接続済みサーバー一覧が表示される)

この出力結果は、playwright という名前のMCPサーバーが「connected」(接続済み)の状態であり、このサーバー上で「tools: 21」(21種類のツール)が利用可能であることを示しています。playwright は、Webブラウザを操作するための有名なライブラリの名前です。これにより、ClaudeがPlaywrightを使ってWebサイトを操作できる状態にあることがわかります。

接続済みのサーバーが確認できたら、そのままプロンプト(Claudeへの指示)で依頼を行います。例えば、以下のようにWebサイトの情報を取得するよう指示できます。

1playwrightでhttps://example.com を開いてh1を教えて

このプロンプトを受け取ると、Claudeは、指示内容を理解し、その指示を実行するために必要な「MCPツール」を自動的に呼び出します。具体的には、mcp__playwright__browser_navigate のような、Playwrightを使ってWebブラウザを操作するツールを呼び出そうとします。

ツールを呼び出す際には、Claudeが外部の機能を利用することになるため、セキュリティ上の確認として「許可ダイアログ」が表示されます。表示されたら、そのダイアログの内容を確認し、実行を「承認」してください。これにより、Claudeが指定された操作を実行できるようになります。

注意: 初めてPlaywrightを使用する場合、Webページを開くために必要なブラウザのプログラム(バイナリ)がまだインストールされていないことがあります。そのため、初回はバイナリの取得に時間がかかる場合があります。もし、この処理が失敗するようであれば、一度Claude Codeの環境を終了し、npx playwright install chromium を手動で実行して、必要なChromiumブラウザをインストールしてみてください。

3つのスコープ

「スコープ」とは、ある設定や情報が「どこまで影響を及ぼすか」という範囲のことです。システム開発において、設定がどの範囲で有効になり、誰と共有されるのかを理解することはとても重要です。ここでは、主に3つのスコープについて説明します。

スコープ読み込まれる範囲チーム共有保存先
local現在のプロジェクトのみしない~/.claude.json
project現在のプロジェクトのみgit経由で共有プロジェクトルートの .mcp.json
user全プロジェクトしない~/.claude.json

localスコープ

localスコープは、現在作業している「特定のプロジェクトだけ」に影響する設定です。この設定は、あなたのPCのホームディレクトリにある~/.claude.jsonというファイルに保存されますが、他のチームメンバーとは共有されません。

これは、「自分だけで一時的に試したい設定」や、「他のチームメンバーには影響させたくない個人的な設定」をする場合に適しています。

projectスコープ

projectスコープも、localスコープと同様に「特定のプロジェクトだけ」に影響する設定です。しかし、localスコープと大きく異なるのは、「git経由で共有」される点です。

これは、Gitというバージョン管理ツールを通じて、プロジェクトのフォルダ内にある.mcp.jsonというファイルに設定が保存され、その設定ファイルをチームメンバー全員で共有できることを意味します。そのため、チーム全員が同じプロジェクト設定を使って開発を進められるため、チーム開発において非常に重要なスコープです。

userスコープ

userスコープは、「すべてのプロジェクト」に影響する設定です。これは、あなたのPC上のすべてのプロジェクトで共通して使われる、あなた個人の設定と考えられます。

この設定もチームメンバーとは共有されず、localスコープと同じく、あなたのPCのホームディレクトリにある~/.claude.jsonというファイルに保存されます。複数のプロジェクトで共通して使いたい、あなた個人のグローバルな設定をしたい場合に利用します。


注意: デフォルトは local。「とりあえず自分だけで試したい」ならそのままでOK。

新しい設定をする際、特に指定がなければlocalスコープが適用されます。もし「まずは自分一人で動作を確認したい」「他の人に影響を与えずに試してみたい」という場合は、localスコープのままで問題ありません。チームで共有する設定にする場合は、意識的にprojectスコープを選択する必要があります。

userスコープ(全プロジェクトで使う)

システム開発において、特定のツールや設定を「すべてのプロジェクト」で共通して使いたい場合があります。この「すべてのプロジェクト」で使えるようにする設定を「userスコープ」と呼びます。

例えば、Webブラウザを使う際に、どのウェブサイトを開いていても共通で使える機能(例えばブックマークや拡張機能など)がありますよね。それと同じように、開発作業で「どこの作業でも共通して使う」ツールや設定は、userスコープで管理すると非常に便利です。

具体的には、コマンドを実行する際に --scope user というオプションを付けることで、そのツールや設定が、特定のプロジェクト内だけでなく、ユーザー全体で使えるようになります。

次に示すコマンドは、playwright というツールを userスコープで追加する例です。playwrightはWebアプリケーションのテストなどで使われるツールです。

1claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest

このコマンドを実行すると、playwrightの設定情報が ~/.claude.json というファイルに保存されます。このファイルは、ユーザーアカウントの設定をまとめているファイルです。

一度 ~/.claude.json に保存されると、その後は別のプロジェクトに移動して作業を開始しても、追加した playwright をすぐに使えるようになります。これにより、プロジェクトごとに同じツールを何度も設定し直す手間が省け、効率的に開発を進めることができます。

projectスコープ(チーム共有)

プロジェクトルートとは、プロジェクトの最も上の階層にあるフォルダのことです。ここに.mcp.jsonというファイルを作成し、チーム内で共有することで、チームのメンバー全員が同じMCPサーバー設定を利用できるようになります。これにより、新しくリポジトリをクローン(ダウンロード)した他のメンバーも、特別な設定なしに同じ環境で作業を開始できるようになります。MCPサーバー設定とは、特定のツール(この例ではPlaywrightという自動テストツール)を動作させるための環境設定のことです。

もし、既に同じ名前のMCPサーバーを個人の設定(ローカルスコープ)として追加している場合は、まずそれを削除してから、プロジェクト全体で共有する設定(プロジェクトスコープ)として追加し直す必要があります。これは、個人設定とプロジェクト共有設定が衝突するのを防ぐためです。

1claude mcp remove playwright
2claude mcp add --scope project playwright -- npx -y @playwright/mcp@latest

上記のコマンドについて説明します。 まず claude mcp remove playwright コマンドで、もし既にローカルに playwright という名前のMCPサーバー設定が存在していれば、それを削除します。

次に claude mcp add --scope project playwright -- npx -y @playwright/mcp@latest コマンドで、MCPサーバー設定を追加します。

  • claude mcp add: MCPサーバーを追加するコマンドです。
  • --scope project: この設定をプロジェクト全体で共有する設定として追加するためのオプションです。これが重要です。
  • playwright: 追加するMCPサーバーの名前です。
  • --: これ以降の引数は、このMCPサーバーを起動する際に実行されるコマンドとして扱われます。
  • npx -y @playwright/mcp@latest: PlaywrightのMCPパッケージを最新版で実行するためのコマンドです。npx は、Node.jsのパッケージを実行するためのツールです。
出力結果
1Added stdio MCP server playwright with command: npx -y @playwright/mcp@latest to project config

上記の出力結果は、MCPサーバーの設定がプロジェクト設定に追加されたことを示しています。

設定が正しく追加されたかを確認するため、生成された.mcp.jsonファイルの内容を確認します。

1cat .mcp.json

cat コマンドは、指定したファイルの内容を画面に表示するコマンドです。

出力結果
1{
2  "mcpServers": {
3    "playwright": {
4      "command": "npx",
5      "args": ["-y", "@playwright/mcp@latest"]
6    }
7  }
8}

上記の出力結果は、.mcp.jsonファイルにplaywrightという名前のMCPサーバーが追加され、その起動コマンドがnpxで、引数(オプション)が["-y", "@playwright/mcp@latest"]として設定されていることを示しています。これは、先ほど実行したclaude mcp addコマンドの内容と一致しています。

注意: プロジェクトスコープのサーバーは、初回起動時に「このサーバーを承認するか?」と必ず聞かれる。セキュリティ上の理由で、git 経由で共有された MCP サーバーは無承認では動かない仕様。

プロジェクトスコープで共有されたMCPサーバーは、セキュリティ保護のため、初めて起動する際に「このサーバーを承認しますか?」という確認メッセージが表示されます。これは、チームメンバーが共有した設定の中に、悪意のあるコマンドが含まれていないかを確認するための仕組みです。Gitなどのバージョン管理システムを通じて共有された設定は、ユーザーが明示的に承認しない限り実行されないようになっています。

もし、一度承認した選択をリセットしたい場合や、誤って拒否してしまった場合などは、以下のコマンドを使用します。

1claude mcp reset-project-choices

このclaude mcp reset-project-choicesコマンドは、プロジェクトスコープのMCPサーバーに関する承認の選択をリセットします。これにより、次回起動時に再度承認の確認が行われるようになります。

設定の確認・削除

システム開発では、さまざまなツールやサービスを利用しますが、それらの設定を管理することは非常に重要です。ここでは、特定のツールの設定を確認し、不要になった設定を削除する方法について学習します。

まず、現在設定されている内容を確認する方法から見ていきましょう。

詳細を見る。

1claude mcp get playwright
出力結果
1playwright:
2  Scope: Local config
3  Type: stdio
4  Command: npx
5  Args: -y @playwright/mcp@latest

上記のコマンドは、「claude mcp」というツールを使って、「playwright」という名前のサービスやツールの設定情報を取得する指示です。このコマンドを実行すると、以下のような結果が出力されます。

この出力結果は、「playwright」の設定がどのように構成されているかを示しています。一つずつ見ていきましょう。

  • playwright: これは、これから表示される情報が「playwright」というツールの設定であることを示しています。
  • Scope: Local config この設定が「ローカル」、つまり現在操作しているコンピュータだけに適用されることを意味します。他のコンピュータには影響しません。
  • Type: stdio これは、システムが「playwright」とどのように情報をやり取りするかの一種の方法を示しています。「stdio」は「標準入出力」を指し、一般的なテキストベースの通信方法です。
  • Command: npx 実際に「playwright」を動かすときに使われるコマンドが「npx」であることを示しています。「npx」は、Node.jsという開発環境で、特定のパッケージ(プログラムのまとまり)を一時的に実行する際に便利なコマンドです。
  • Args: -y @playwright/mcp@latest これは、「npx」コマンドに渡される「引数(ひきすう)」と呼ばれる追加情報です。ここでは、「@playwright/mcp」という特定のパッケージを、最も新しいバージョン(@latest)で実行し、途中の確認を省略する(-y)という指示を含んでいます。

このように、getコマンドを使うことで、ツールの設定がどのような状態になっているかを詳しく把握することができます。

次に、不要になった設定を削除する方法について見ていきましょう。

削除する。

1claude mcp remove playwright

このコマンドは、「claude mcp」ツールを使用して、「playwright」という名前のサービスやツールの設定を削除する指示です。システムエンジニアとして、使わなくなった設定や誤って設定したものを整理することは、システムの健全性を保つ上でとても大切です。このコマンドを実行すると、以下のような結果が出力されます。

出力結果
1Removed MCP server playwright from local config

このメッセージは、「playwright」に関する設定が、ローカルの設定から正常に削除されたことを示しています。これで、この設定はシステムに影響を与えなくなります。

設定の確認と削除は、システムエンジニアとして日常的に行う基本的な作業です。これらの操作を理解し、適切に実行できるようになることは、安全で効率的なシステム運用に繋がります。

おわりに

本記事では、AIであるClaudeが外部ツールを操作するための共通ルールであるMCPについて、その基本から実践的な使い方までを解説しました。claude mcp add コマンドを用いてPlaywrightのようなローカル型MCPサーバーを追加し、claude mcp list で追加状況を確認、さらにClaude Code内で /mcp コマンドを実行して利用する一連の流れを体験しました。また、local、user、projectといった設定の適用範囲を示す3つのスコープの概念を理解し、claude mcp get で設定内容を確認し、claude mcp remove で不要な設定を削除する方法も習得しました。これらの知識は、AIを活用したシステム開発の一歩として、皆さんの今後の学習にきっと役立つことでしょう。

関連コンテンツ

関連IT用語