9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめてのアドベントカレンダーAdvent Calendar 2024

Day 14

Claude for Desktop(Windows版)でMCP(Filesystem)を使う!日本語で一番詳しい手順を解説

Posted at

そもそも

Claude for Desktop

Claude for DesktopがBata版としてリリースされています。見た感じWebアプリっぽい感じのアプリケーションになっていて、ネイティブっぽいChatGPTのWindowsアプリとはちょっと雰囲気が違います。
image.png

Model Context Protocol(MCP)とは

AIシステムがクライアントとなり、Google Drive、Slack、GitHub、Postgresなどの多様なデータソースやツールがサーバ側となり、AIシステムが中核となり共通の標準プロトコルで連携できるようにする新しいオープンスタンダードを目指す動きになってきています。

General Architecture

公式サイトにアーキテクチャの記載がありますので念のため見ておくと良さそう。

要は?

PC等のローカルリソースへのアクセス(CRUD)の新しいプロトコルだと捉えた方がいいですね。そのローカルアクセスの間に今回のようにClaudeが軸になれば人間がやっていたPC作業を代行してもらえる可能性が出てきますね。

例えば?どんな事ができるの?

ローカルのTXTファイルで書いてあった内容(アンケート結果とか調査結果とか)をClaudeで読み込んだ上でまとめてもらって、SQLを発行してPC上のDBにまとめるみたいな事ができます(複数のMCPサーバを使った場合)。Filesystemだけ使っても、雑多なTXTファイルから読み込んで整理してCSVに出力できたりしますね。

プログラミングへの応用は?

MCPのfilesystemgitを使えば、自分達のリポジトリを便利に使えるかもしれないし、GitHub MCP Serverを使えばコーディングに使えそうですし、Gitlabにも対応しているので、これまでコピペした作業をなんとかできるかもしれないですね。

どんな人が使うと嬉しいか?

当然ですが「Claude Pro」を契約している方が使うと良さそうです。
何故かというと?Claudeは非常に便利で優秀ですが、メチャクチャ利用制限が厳しいです。特に現状一番優秀な「Sonnet3.5」なんか一気に枠を使い切ります。これを無料枠で使おうと思ったら満足に業務に役立つ作業にはホボ使えないでしょう。

インストール

原文

こちら本家Anthropic社のQuickstartガイドです(5分でデキる!)

躓きポイント

後述しますけど、Claudeの設定ファイル(claude_desktop_config.json)の書き方が一番躓きます。
それ以外は非常に簡単なので、特に問題無くインストールできるでしょう。

Windwsあるある:ユーザ名が日本語だったら?

結論=日本語名でも大丈夫です。後述する手順のなかでユーザ名がファイルパスに入っきます。C:\Users\{あなたのユーザ名}\・・・のところですね。ただ、日本語(というかマルチバイト)のユーザ名であっても問題無く動きます。

PowerShellを管理者として実行する

基本的なNode.jsやFilesystemのインストールはPowerShellで行います。
image.png

特別な記述が無い限りコマンド実行はPowerShellになります。

Node.js

MCPでFilesystemだけ使うのであれば、基本的にはNode.jsのインストールだけで大丈夫です。他のMCPサーバを使おうとするとPythonが必要だったりしますので注意してください。(MCPサーバが何で実装されているか次第です)

インストーラの実行

前述のインストーラをダウンロードしてインストール実行して完了させてください。
色んなオプションが表示されますが特にデフォルトのままで大丈夫です。

インストール確認

PoweShellから

node -v

で確認してみましょう。
image.png

と出てくれば大丈夫です。

npmのアップデート

npmは最新化しておきましょう。現時点で最新の10.9.1を明示的に指定してます。

npm install -g npm@10.9.1

でアップデート完了です。
image.png

Filesystem MCPサーバーのインストール

環境準備が整ったところでserver-filesystemをインストールします。
PowerShellから以下のコマンドを実行します。

npm install -g @modelcontextprotocol/server-filesystem

念のためインストールされた実体を確認してみます。

cd C:\Users\{あなたのユーザ名}\AppData\Roaming\npm\node_modules\@modelcontextprotocol\server-filesystem\dist

で移動してlsで確認すると。

image.png

といった感じでインストールされているのが確認できます。

躓きポイント(補足)

後述するClaude for DesktopのJSON設定でこのインストールされたindex.jsのファイルパスを使います。覚えておいてください。

Claude for Desktopの設定

デベロッパーモードの有効化

非常に分かりづらいので明示しておきます。左上のハンバーガーメニューのHelpから有効化してください。

image.png

なお、一度EnableにするとHelpの中にはでてきません。

MCPサーバの設定

左上のハンバーガーメニューからセッティングを開きましょう。
image.png

デベロッパーモードを有効にしていると
image.png

Edit Configを押下してください。
自分のPCの設定ファイルが置いてあるフォルダがExplorerで開かれるハズです。

claude_desktop_config.json の設定

対象ファイルのパスです。

C:\Users\{あなたのユーザ名}\AppData\Roaming\Claude\claude_desktop_config.json

claude_desktop_config.json の編集

今回は自分のデスクトップにClaudeがアクセスできるようにてみます。
{あなたのユーザ名}の所は書き換えてください。

{
    "mcpServers": {
        "filesystem": {
            "command": "C:\\Program Files\\nodejs\\node.exe",
            "args": [
                "C:\\Users\\{あなたのユーザ名}\\AppData\\Roaming\\npm\\node_modules\\@modelcontextprotocol\\server-filesystem\\dist\\index.js",
                "C:\\Users\\{あなたのユーザ名}\\Desktop"
            ]
        }
    }
}

前述のインストール通りやっていれば、この設定で大丈夫です。

躓きポイント

なんとargs[]の第1引数がNode.jsの実行ファイルになっています。
まず無いとは思いますが、このパスと中身があるかは前述の通りインストール時にちゃんと確認しておきましょう。

C:\Users\{あなたのユーザ名}\AppData\Roaming\npm\node_modules\@modelcontextprotocol\server-filesystem\dist\index.js

自分はこれ最初分からずに、第1引数からClaudeで扱いたいフォルダのパスを記載してしまっていて思い切り躓きました。

MCPでアクセスさせる対象のディレクトリ

args[]の第2引数以降に対象ディレクトリを記載していきます。

記載の注意点

  • ファイルパスはで囲いましょう
  • ファイルパスのディレクトリは\\2つで区切りましょう
  • 対象ディレクトリを複数記述する際は,でつなげます

Claudeの再起動

左上のハンバーガーメニューからExitを選んで一度Claudeを落としてから再起動してください。
image.png

MCP機能の有効化を確認

ちゃんとMCPとの連携ができていればトンカチマークが表示されます。
image.png

デベロッパー機能の確認(オマケ)

左上のハンバーガーメニューからデベロッパー機能による確認ができます。
image.png

使ってみる

お題

サイトに書き込まれたコメント結果から共通部分を注出してCSV化させるデモをやってみます。

用意するもの

サンプルとして「あなたの職場でどの程度生成AIが活用されていますか?インタビュー」の結果を作ってみました(この結果もClaudeでテストデータを生成しています)。
image.png

TXT→解釈整理→CSVの流れ

MCP発動の儀

プロンプト

インタビュー結果.txtを確認して、内容の共通部分整理してCSVファイルに出力して。

すると
image.png

こんなポップアップが表示されて「利用許可」を求めてきます。

ちなみに表示されている内容は?

タイトル:
Allow tool from "filesystem" (local)?
(「filesystem」ツール(ローカル)の許可)


本文:
Run read_file from filesystem
(「filesystem」ツールからの read_file コマンドを実行します)

警告:
Malicious MCP servers or conversation content could potentially trick Claude into attempting harmful actions through your installed tools.
(悪意のあるMCPサーバーや会話内容が、インストールされたツールを通じて有害なアクションを試みる可能性があります)

Review each action carefully before approving.
(承認する前に各アクションを慎重に確認してください)


選択肢:

  1. Allow for This Chat(このチャットで許可)
  2. Allow Once(1回だけ許可)
  3. Deny(拒否)

CSVが自動生成中・・・

結果を読み込んで自動的に分類してCSVにまとめてくれます。
image.png

CSVファイルを見てみる

ちゃんとCSVファイルを出力してくれます。
image.png

ただ、一発目開いて見たらUTF-8だったのでExcelとかで見たいならShit-JISでってお願いした方が良かったかもしれませんね。(自分で変換しました)

image.png
見事に変換できてます!

最後に

使えるのがClaudeだけだったり、まだまだMCPサーバが少なかったりしますが・・・めちゃくちゃ可能性を感じさせてくれますね。
プログラミングの助けにもなりそうなので今後も活用の幅をじゃんじゃん増やしていきたいと思います。

9
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?