💠

Claude for DesktopのMCPをMac OSで使用したい!

に公開

はじめに

最近のAI事情で特に気になっていたMCP(Model Context Protocol)がClaude for Desktopから気軽に触れることを知ったので、チャレンジしてみました。
自分はMacBook(M1)を使用しているので、macOSに向けたセットアップ方法を記載していきます!

1. Claudeのデスクトップアプリをインストール

https://claude.ai/download
上記サイトにアクセス後、macOS用のデスクトップアプリをインストールします。

2. claude_desktop_config.jsonに設定を記載

https://modelcontextprotocol.io/quickstart/user
上記サイトを参考に進めていきます!

① インストールしたClaudeアプリを立ち上げます。
② 左上の「Claude」メニューからSettings...を選択します。

③ サイドメニューのDeveloperからEdit Configへと進んでいきます。

④ claude_desktop_config.jsonがあるかと思うのでそちらを何らかのエディタで開いていきます。
今回はfilesystemの利用設定をして、デスクトップとダウンロードディレクトリへのアクセスを許可していきたいと思います。下記のように記述していきます。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/Users/username/Downloads"
      ]
    }
  }
}

3. アプリを再起動

その後アプリを再起動するとMCPが使用できるように...なっているはずなのですが、私はエラーが出てしまいました。

何でだ、、、と思いここから調査を開始しました。

4. 原因追及

端的に原因だけ述べると
MCPサーバー・コマンド環境では、nvm経由でインストールされたNode.js実行ファイルに直接アクセスできないからでした。

↓下記サイトで原因追及がされていました。↓
https://medium.com/@jonigl/mcp-filesystem-server-disconnected-750e00917eec

私はnvmを利用してnodeのバージョン管理をしていたので、これが原因でClaudeが推奨しているnodeのバージョンが使えていませんでした、、、。
ですので、このサイトに則って、正しいNode.js環境にアクセスできるようにスクリプトを作成しました。

5. スクリプト作成

① which nodeでパスを確認
ターミナルを開いて下記を実行します。

which node

すると下記のようなパスが表示されます。(後に使用いたします。)
ex) /Users/{username}/.nvm/versions/node/{node-version}/bin/node

② スクリプトを作成
/usr/local/bin/配下にnpx-for-claudeを作成し、下記を記載します。

#!/usr/bin/env bash

export PATH="/Users/YOUR-USERNAME/.nvm/versions/node/YOUR-NODE-VERSION/bin:$PATH"
exec npx "$@"

③ 作成したスクリプトを実行可能状態へ
下記を実行したらスクリプトの追加は完了です。

chmod +x /usr/local/bin/npx-for-claude

6. claude_desktop_config.json修正

下記のようにcommandを作成したスクリプトに置き換えます。

{
    "mcpServers": {
        "filesystem": {
-           "command": "npx",
+           "command": "npx-for-claude",
            "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "/Users/username/Desktop",
                "/Users/username/Downloads"
            ]
        }
    }
}

その後、デスクトップアプリを再起動するとエラーが消え、下記のようにトンカチマークが出てきます。

こちらには設定したMCPでできることが記載されています。

実際に使ってみる

実際に触ってみました!

プロンプトは下記の通り!実行していきます!

上司に謝罪する文面のメールテンプレを.txt形式でデスクトップに作って。

すると、デスクトップに上司への謝罪メール.txtというファイルができていて中身は下記の通りで、いい感じに謝れそうな感じでした。

件名:【お詫び】〇〇〇〇について

〇〇部長

お世話になっております。〇〇課の〇〇です。

この度は、〇〇〇〇についてご迷惑をおかけし、誠に申し訳ございませんでした。

[具体的な謝罪内容・経緯を記載]
例:昨日提出予定であった週次報告書の提出が遅れてしまい、部内のスケジュールに影響を与えてしまいました。原因は私の管理不足であり、言い訳の余地はございません。

今後はこのようなことがないよう、以下の対策を講じてまいります。

1. 〇〇〇〇(具体的な改善策)
2. 〇〇〇〇(具体的な改善策)

今回の件を深く反省し、信頼回復に努めてまいります。
何卒ご容赦いただきますようお願い申し上げます。

〇〇〇〇(日付)
〇〇 〇〇(あなたの名前)
内線:〇〇〇〇
メール:〇〇〇〇@〇〇〇〇.co.jp

まとめ

今回はfilesystemのみでしたが、他にもPlaywrightなどのMCPもあって触ってみました。
実際にブラウザを操作してE2Eテスト的なこともできたので、今後いろいろな使い方ができるようになっていくんだろうなと感じました。

一方で、AIがここまでやってくれるのなら、Vibe Coding(LLMに自然言語で指示しながらコーディングを進める。アイデアや雰囲気(ノリ)に集中し進めていく。)といった手法が自身の開発でも増えていきそうな予感もしています。
開発は加速するメリットがある一方で、生成したコードを理解しないまま進めてしまうことが懸念されるので、改めてエンジニアとしてコードを理解し学び、責任を持つということを意識しつつ、AIと仲良くしていきたいと思ってます。

参考文献

https://qiita.com/ore88ore/items/106c851e56631045fe25
https://qiita.com/takurot/items/f683190de8f141844202
https://modelcontextprotocol.io/quickstart/user

Discussion