【初心者向け🔰】MCP 導入・環境構築〜基本的な使い方の全手順（Claude デスクトップ編）

## 概要
MCP どころか、そもそも AI ツールをパソコンに導入すらしていなかった人のための全手順まとめ。
今回は Claude デスクトップ（Claude for Desktop）を利用したバージョンで解説。

**「すみません。そもそも MCP ってなんすか？」** という方は、時間がある時にこちらをゆっくりご覧ください👇

https://qiita.com/to3izo/items/99dd3cde237c2e5a007f

（知識があると、より理解が進みますが）知識がなくても、一旦下記の手順で構築は可能です。

### 前提
- 筆者のPCは macOS です。Windows の場合は、都度、読み替えてください
- 今回導入するのは以下
  - Claude for Desktop
  - Node.js

### 今回の内容の流れ
- MCP ホスト（**Claude for Desktop**）の導入
- MCP サーバ事前準備（実行環境としての Node.js 導入）
- ファイル操作をさせる MCP サーバ導入（**Filesystem**）
- 導入時にエラーが発生した時の対処法
- ブラウザを自動操作させる MCP サーバ導入（**Playwright**） 
- MCP サーバ一覧とまとめ

## 手順（Claude for Desktop 導入）

:::note warn
**注意**
Homebrew にも "claude" が存在するが、執筆現在では、これが公式なのか・問題ないのかが判別できなかったので、brew でのインストールは推奨しない。Webページからのダウンロードする下記を推奨
:::

Claude 公式のダウンロードページへ行く

https://claude.ai/download

自分のパソコンのOSに該当するものを選び、インストーラーをダウンロード。

![1_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/e80cacb5-9715-4c71-8aac-520d1e3e3f44.png)

ダウンロードしたら、ファイルをダブルクリックしてインストールする。

![1_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/27d43b7d-538b-4962-8fc7-d4b1450392a1.png)

Claude のアイコンをアプリケーションフォルダに移動すれば、PC へのインストール完了（ダウンロードフォルダにあるインストーラの方は削除してOK）

![1_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/7771b4d0-b162-43c9-95e4-53c1ed516a72.png)

メールアドレスを入力してログイン（Gmail 等を使えば、その場でアカウント作成して進める）

![1_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/0fcf7949-e247-4d0b-a516-26b6d616ee6d.png)

以下のような画面になったら Claude for Desktop 導入は完了（右下部分を掴んで、使いやすい画面サイズに変更する）。

![1_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/c5e6f0e0-577c-42d6-b25a-e7be38a4717e.png)

あとは普通に使うだけ。Claude for Desktop でできることは、Web 版 Claude とほぼ同じ。

## MCP 環境の構築

:::note warn
ネットには色んな記事が落ちているが、古かったりする可能性もあるので基本的に、公式ページを見るのが正しい👇（Claude for Desktop 利用者向け導入手順）
https://modelcontextprotocol.io/quickstart/user
:::

### 事前準備
MCP はローカルマシン内にサーバを起動することになる。
そのためには起動に必要なソフトをインストールしておく必要がある。

今回の場合は、**Node.js** というソフトを事前にインストールする。

- 公式サイトからインストーラを手にいれる方法（推奨じゃないが、簡単）
  - `https://nodejs.org/ja` でトップページのボタンから入手可能
  - ダウンロードしたファイルをダブルクリックするだけでインストールが完了する
- パッケージマネージャを利用する方法（推奨）
  - インストーラで入れるとバージョンが固定されるので、可能ならこちらを入れたい
  - 導入方法①：[Volta で Node.js をインストールする方法](https://qiita.com/to3izo/items/dbad59b1dbdd548f4271)
  - 導入方法②：[nodenv で Node.js をインストールする方法](https://qiita.com/to3izo/items/b85effe27a5ecd2056d4)
  - おまけ：[【初心者向け🔰】パッケージマネージャとは](https://qiita.com/to3izo/items/1be0d0d85c42433bfe48)

### MCP サーバ導入の基本的な流れ
MCP の環境構築とは「MCP ホスト」「MCP クライアント」「MCP サーバ」の３つを用意することである。

- MCP ホスト：ここでは Claude for Desktop のことを指すので準備OK
- MCP クライアント：Claude for Desktop に勝手に内包されているので準備OK
- MCP サーバ：👈 これを今から用意する必要がある

今から導入する MCP サーバは、何か１つ入れたら終わりなのではなく、目的・利用サービスに合わせて、**複数の MCP サーバをパソコンに導入する** ことで完了する。

導入する際は、**「設定ファイルを開く → MCP サーバを追記（必要に他の値も追記）→ Claude を再起動 → 使用可能状態になる」** という流れになる。この許可する操作は、MCP サーバを追加する度に発生する。

### ファイルシステム MCP サーバの追加
**「ファイルシステム MCP サーバ（Filesystem MCP Server）」** とは、ローカルマシンのファイルシステムへのアクセス・操作に特化した MCP サーバのこと。
Claude for Desktop が、ユーザのパソコン内のファイルを操作（検索・移動・読み書きなど）するために必要。

まず、パソコン左上のメニューから「Claude」→「設定」を選択

![1_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/f946014d-3be9-4138-a430-9526f3039307.png)

設定メニュー「開発者」→「構成を編集」をクリック（「はじめる」は説明用 Web サイトに飛ぶだけです）。

![1_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/a48f318c-8161-493d-b021-4d7aeff82fff.png)

「構成を編集」をクリックすると、`claude_desktop_config.json` というファイルが、アプリケーションの内部に自動で作成される。

できる場所は OS で変わるが、ボタンから開けるので別に覚えなくても良い。
macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
Windows: `%APPDATA%\Claude\claude_desktop_config.json`

![1_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/958d7f43-f59f-4c21-94f3-e80dbe212032.png)

設定ファイルを何か任意のエディタで開く（VS Code でも Cursor でもメモ帳でもなんでも良い）

![1_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/482d5da6-3d76-47dd-82f6-ac24dd3a506c.png)

ファイルを開くと、最初は以下のように空の JSON 形式になっているはず。
```json:claude_desktop_config.json
{}
```

ここに以下の様に設定を追加する（正しくは、公式ページを参照してください）

**macOS/Linux** の場合
```json:claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/ユーザ名/Desktop",
        "/Users/ユーザ名/Downloads"
      ]
    }
  }
}
```

**Windows** の場合
```json:claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\ユーザ名\\Desktop",
        "C:\\Users\\ユーザ名\\Downloads"
      ]
    }
  }
}
```

この時、上記の「ユーザ名」の部分は、ログインユーザ ID に変更してから保存すること。
編集・保存まで間違いなく完了したら MCP サーバの最低限の環境構築は完了。

:::note warn
**詳しい人向け**
❶ 今回は Node.js を実行環境としているので `npx` をコマンドに指定したが、Python の場合は `uv` を用意して指定するなど、使う言語で設定値は変わる。
❷ `npx` コマンドの実行が怖い、リスク上避けたい場合は、事前にパッケージをインストールしてから `node` を指定することもできる。
:::


## 追加した MCP サーバを利用してみる
MCP サーバ側の設定が終わったら、Claude for Desktop を再起動する。

MCP 導入前には無かった、「ツールマーク」「コネクタマーク」が表示されたら、導入は成功。
![1_10_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/3879e1d3-f3bb-49a3-87e2-52204994b9c4.png)

- 🔨 **ツールマーク**（ハンマーのマーク）：MCP として利用可能な機能（Tools）が表示される
- 🔌 **コネクタマーク**：インストールした MCP サーバの名前が確認できる

メニュー「Claude」→「設定」→「開発者」でも導入した MCP サーバの一覧が確認できる

![1_10_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/76dda944-2811-44d8-89ab-77703ef1c5b0.png)

### 何ができる様になったか
今回は、**ファイルを操作する MCP サーバ** を追加した。加えて、２つの引数 `"/Users/ユーザ名/Desktop"`、`"/Users/ユーザ名/Downloads"` も追加した。これは **「デスクトップとダウンロードフォルダのみ、AI（Claude）が操作可能になる」** という設定をしている（他のフォルダにはアクセスできない）。

### MCP でファイルを作らせてみた
MCP の動作確認で、以下のプロンプトを実行してみた。
**『俳句を１つ作って、デスクトップに出力してください』**

すると、俳句を作って、ファイルを作成しようとし始めた。

![1_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/1187e513-e5ad-4c8e-885d-93dfc06ce1a5.png)

**ファイルを操作する** という行為は、AI が勝手にできないことなので、このように許可を求めてくる。「一度承認したら以降は確認しなくても良い」などはその場で判断して選ぶこと。

![1_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/84ae9457-2dd2-4f63-87d6-224f8740b53c.png)

この確認するアクションは、機能が異なれば毎回表示される（例：今回は「フォルダを作る」と「ファイルを作る」で２回聞かれた）。

処理が完了して、完了の報告が来た。

![1_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/fb1e674b-de9c-49e0-b9f3-b0a066a6bd3c.png)

実際にフォルダを見に行くと、確かにデスクトップにファイルができている。

![1_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/c6acf0fa-a4f6-48aa-9e78-dd0e58435e81.png)

### 許可していないことをやらせてみた
今回の設定では、「デスクトップとダウンロードフォルダ」しかファイル操作を許可していない。
試しに、『そのファイルをユーザーフォルダに移動してください』と指示してみた。

![1_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/ed034104-24d8-4722-86ac-7ca4a4324ac8.png)

すると、許可していないフォルダへのアクセスはできないと返答が来た。
この様に、MCP はルールに沿ったことだけを実行してくれるように処理する様子（悪意あるプログラムなどを導入しなければ）。

## エラーが発生する場合
通常なら、環境構築でエラーが発生すると悩むところだが、対話式の AI 機能は普通に使えるので、エラー内容を AI に調べさせれば、対応方法や答えが出てくる。

### エラーが発生した時の表示
以下の様な表示になるので、**「MCP設定を開く」** ボタンをクリックする
![1_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/affb96f0-46ff-4a3f-83cd-67dcc9195e91.png)

するとエラー詳細画面が表示される。より詳細なエラーログは **「ログフォルダを開く」** をクリックして対象のフォルダを開くことでログファイルを確認可能

![1_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/1ea41ad1-8b74-4136-8d13-2038caeb80a2.png)

### Claude for Desktop のエラーログの場所
macOS の場合、以下の場所にログファイルが出力される

`/Users/ユーザ名/Library/Logs/Claude`

出力されるファイルは2種類

- `mcp-server-filesystem.log`
- `mcp.log`

### AI に原因と対策を調べさせる
実際に、私が使用したプロンプトは以下で、ログファイルも２つ読み込ませて一気に質問した。

```bash
claude desktop で mcp サーバの設定をしたけどエラーだった。なぜ？

# 👇 設定したJSONファイルの中身も貼っておく
```

私の場合は、Node.js の導入に「Volta」というものを使用しているので、通常の "npx" の設定ではダメで、絶対パスで指定しなければいけない様でした。

```json:claude_desktop_config.json（修正版）
{
  "mcpServers": {
    "filesystem": {
      "command": "/Users/ユーザ名/.volta/bin/npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/ユーザ名/Desktop",
        "/Users/ユーザ名/Downloads"
      ]
    }
  }
}
```

※「ユーザ名」にはログインユーザ ID を使用

上記で無事解決した！

## 他にどんな MCP サーバがあるの？

とりあえず、怪しい MCP サーバを入れてしまうのが怖い場合は、こちらの公式リポジトリの README に記載されているものから試してみると良い。

https://github.com/modelcontextprotocol/servers

## ブラウザ自動操作ができる「Playwright」を追加してみた
前述の GitHub の MCP サーバ一覧には記載されていないが、Microsoft が公式に出している **"Playwright"（プレイライト）** という Web ブラウザ自動操作機能を MCP で使えるようにしてみた。

（※ 前述のリンクにも別アカウントの "Playwright" があるが、それは別物）

https://github.com/microsoft/playwright-mcp

公式資料によると、以下の設定をすれば動くらしい。
```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}
```

### 設定を追加する
先ほどの手順と同様に設定ファイルを開き、以下のように設定を追記。
複数の MCP サーバを設定する場合は、`mcpServers` の中に並べるように書いていく。

```json5
{
  "mcpServers": {
    "filesystem": {
      // 既に設定したやつ
    },
    // ここに追加 👇
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

```

※ JSON形式の書き方に慣れていない人は、余計なカンマ（`,`）を付けたり、逆に、付けるべき場所にカンマが無かったりすると、正しく動かないので注意すること。

### AI にブラウザを操作させてみた
こんな指示をしてみた。
『今日の渋谷の天気をブラウザで検索して』

![スクリーンショット 2025-04-11 14.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/c1ecb0ff-b4b6-41b1-8889-9cf31eb3bab0.png)

当然、Web ブラウザを操作しても良いか許可を求められるので、許可する。

![スクリーンショット 2025-04-11 14.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/e8042048-84da-4e22-8efb-f10cda930c19.png)

すると、ちゃんと Web ブラウザを起動して、ネット検索をして、結果を返してくれた（この画像のブラウザは私が起動したのではなく、AI が勝手に起動して操作している）。

![スクリーンショット 2025-04-11 14.02.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/38a8a7e1-8809-46bf-b8fa-1755e279a938.png)

是非、いろんな活用方法を試してみてほしい。

## まとめ
- MCP 環境構築は MCP ホストの用意と MCP サーバの設定をするだけ
- MCP サーバは許可したことだけやってくれる
- 事前に Node.js などのソフトを入れておく必要がある（Pythonや他の言語の場合は、Node.js ではなく別のものを準備する）