Zenn
👨‍💻

Claude MCPでコーディング環境をセットアップ (Mac ✖️ mise利用版)

2024/12/30に公開
mcp
Claude
tech

Claude MCPが最近熱いので試してみたい。
ファイル生成、Git管理まで出来ると生成AIのコーディング補助が捗るので、Claude MCPのfilesystem, gitの連携まで出来るようにしてみる。
(ClineはAPIトークン消費があり料金が高くつく、GitHub Copilotはファイル生成までは出来なかったはず。)

公式チュートリアル

https://modelcontextprotocol.io/quickstart/user

事前準備

Claude Pro Planに契約

Claude MCPを使用するにはPro Planである必要がある。$20/monthで契約。
https://claude.ai/

Claude Desktopのインストール

brew install --cask claude

https://formulae.brew.sh/cask/claude

Node.jsのインストール

筆者はmiseを使用しています。

$ mise use -g nodejs@latest
$ node --version
v23.5.0

MCP初導入: FileSystem

https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem

Claude Desktopの設定ファイルを開く

Claude Desktopの設定ファイルを開く
Macの場合はトップバーのsettingsから。

「Edit config」をクリック

設定ファイルが表示される。エディターでファイルを開く。

Claude Desktopの設定ファイルを編集

開いた設定ファイルに、Claudeにファイルの読み込み/書き込みを許可するディレクトリを設定して保存する。

※usernameは書き換える。

claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "/Users/username/.local/share/mise/shims/npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/dev/claude",
      ]
    }
  }
}

参考: 公式サンプル
ここで指定したモジュールをデスクトップアプリ起動時に、サーバーとして起動するよう？

Claude Desktopを再起動

アプリを終了して再起動する。

$ osascript -e 'quit app "Claude"'
$ open -a "Claude"

接続がうまくいくと右側に 🔨 のアイコンが表示される。

アイコンを開くと使用可能なMCPツールが確認できる。

使ってみる

適当なファイル生成を指示する。

すると、ファイルシステムにアクセスするタイミングで承認ポップアップが表示される。
「Allow for This Chat」を選択。

保存しようとしたが、保存先のディレクトリを認識できていなかったよう。
許可ディレクトリ一覧の取得も追加で承認する。「Allow for This Chat」を選択。

保存が完了した。

出力されている！

これは便利。続いて、Gitコミットも連動させるためMCP Serverを追加してみる。

MCP導入: Git

https://github.com/modelcontextprotocol/servers/tree/main/src/git

uvのインストール

Git MCP ServerはPythonで実装されている。
公式ではuvが推奨されているためインストールする。

$ mise use -g uv
$ uv --version
uv 0.5.13 (c456bae5e 2024-12-27)

出力先のGitリポジトリを用意

$ cd ~/dev/claude
$ git init

Git MCPサーバーは git initに対応していないようです。
https://github.com/modelcontextprotocol/servers/issues/272

Claude Desktopの設定ファイルを編集

以下を先ほどの設定ファイルに追記する。
※usernameは書き換える。

claude_desktop_config.json
"mcpServers": {
  "filesystem": {
    ...
  },
  "git": {
      "command": "/Users/username/.local/share/mise/shims/uvx",
      "args": [
        "mcp-server-git",
        "--repository",
        "/Users/username/dev/claude"
      ]
    }
}

Claude Desktopを再起動

アプリを終了して再起動する。

$ osascript -e 'quit app "Claude"'
$ open -a "Claude"

🔨アイコンの数が増え、Git操作も増えました。

使ってみる

コミットを指示します。

許可します。

完了したよう。

コミットされた！

$ git show
commit 43d9b675a7dd06e261de7b4a6bab570b120b7515 (HEAD -> main)
Author: xxx <xxx>
Date:   Mon Dec 30 12:45:22 2024 +0900

    Add Trump administration summary document

これで開発補助に使えそう。

💡 エラーが発生した時の参考

MCP Serverが上手く動かなかった時に出るアプリのエラーメッセージは情報が少ないです。
エラーが解消できない時は、以下でログを出力できるため、こちらから何が原因で失敗しているか確認するのがよいです。

$ tail -n 20 -f ~/Library/Logs/Claude/mcp*.log

https://modelcontextprotocol.io/docs/tools/debugging

Discussion