Zenn
🤖

Claude × MCP：AIとローカル作業スペースで共同開発

2024/12/08に公開
AI
GitHub
mcp
Claude
Anthropic
tech

Claude × filesystem MCP連携 セットアップガイド（ローカル編）

このガイドでは、MCP（Model Context Protocol）を活用して、Claudeとユーザーが常に同じローカルディレクトリを参照し、そこでソースコードを直接修正・加筆・デバッグできる環境を構築します。

前回はGitHub連携を解説しましたが、今回はローカル中心のワークフローに焦点を当て、ファイル操作サーバー（server-filesystem）を用いて、Claudeとユーザーが同一のローカル環境を参照できる設定を行います。

1. 前提条件

  • Claude デスクトップアプリがインストール済みで前回ガイドに準拠した基本環境が整っていること
  • Node.jsがインストールされ、npmが使用可能であること
  • C:\git\claude-filesystem ディレクトリをローカル共通作業スペースとして使用予定

注：前回のGitHub連携は必須ではありませんが、組み合わせることでローカル→リモートへの反映がスムーズになります。

2. MCPファイルシステムサーバーのインストールと設定

2-1. MCPファイルシステムサーバーのインストール

以下のコマンドで、server-filesystem パッケージをグローバルインストールします。

npm install -g @modelcontextprotocol/server-filesystem

インストール後、以下のコマンドで実行ファイルの存在を確認します。（Windowsの例）

ls C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules\@modelcontextprotocol\server-filesystem\dist\index.js

ここで <ユーザー名> を実際のOSユーザー名に置き換えてください。
index.js が存在すればインストール成功です。

2-2. Claudeデスクトップ設定ファイルの修正

claude_desktop_config.json を修正・更新して、MCPファイルシステムサーバーをClaudeが認識するようにします。
下記は例です。<ユーザー名> 部分をあなたの環境に合わせて書き換えてください。

{
  "mcpServers": {
    "filesystem": {
      "command": "node",
      "args": [
        "C:\\Users\\<ユーザー名>\\AppData\\Roaming\\npm\\node_modules\\@modelcontextprotocol\\server-filesystem\\dist\\index.js",
        "C:\\git\\claude-filesystem"
      ]
    }
  }
}

ポイント：

  • filesystem サーバーが C:\git\claude-filesystem ディレクトリを参照するよう設定。
  • 今回はローカルディレクトリ（C:\git\claude-filesystem）を共通作業基盤としています。

2-3. Claudeアプリの再起動

claude_desktop_config.json を編集後、Claudeデスクトップアプリを一旦終了し、再起動します。再起動後、MCP filesystemサーバーが有効になり、C:\git\claude-filesystem 配下のファイルを操作できる状態になります。

3. 基本的なローカル操作例

この設定により、Claudeとユーザーは同一のローカル環境を参照できます。

  • ファイル読込：read_file
  • ファイル書込：write_file
  • ディレクトリ操作：list_directory, create_directory, move_file など

3-1. ファイル参照例

read_file(
  path="C:\\git\\claude-filesystem\\my_project\\src\\main.py"
)

AIがmain.pyの内容を取得し、表示します。その上で「この関数を改善して」といった指示が可能です。

3-2. ファイル修正例

AIが改善後のコードを提示したら、それをwrite_fileで適用します。

write_file(
  path="C:\\git\\claude-filesystem\\my_project\\src\\main.py",
  content="<AI提案の修正後コード>"
)

これで即座にローカルファイルが更新され、エディタやターミナルから変更を確認できます。

3-3. デバッグ作業の短縮

問題発生時、read_fileで該当箇所を読み込み、AIに原因特定を依頼、その場でwrite_fileで修正、再テストというループを簡単に回せます。

4. リモート（GitHub）との組み合わせ

このローカル環境で安定的な開発とデバッグを行った後、push_filesを用いてGitHubリポジトリへ反映することも可能（事前にGitHubサーバー設定済みの場合）です。
こうした二段階フロー（ローカルで検証→リモートへ反映）は、安定した開発プロセスをサポートします。

5. 運用上の留意点

  • アクセス範囲：
    今回は C:\git\claude-filesystem 配下を自由に操作可能な設定としました。必要に応じてディレクトリ構成や権限を限定しましょう。

  • バックアップ・バージョン管理：
    ローカルでの上書き操作が容易なため、Gitでのバージョン管理を併用して変更履歴を追跡することをおすすめします。

6. まとめ

本ガイドでは、server-filesystemを用いて、Claudeとユーザーが同じローカルディレクトリ上でコード編集・デバッグを行える環境の構築手順を示しました。

これにより：

  • 同一ローカル環境での円滑な開発サイクル
  • リアルタイムなファイル参照・修正によるスピードアップ
  • ローカルで安全に試行後、必要に応じてリモート（GitHub）へ反映

といった流れが実現できます。

今後はより複雑なプロジェクトへの拡大や、CI/CDとの連携を検討してさらなる効率化を目指せます。

トップに戻る

Discussion