MCPとは?
MCP(Model Context Protocol)は、AIと様々なサービス・デバイスを共通規格で繋げるための新しいプロトコルです。
物理世界のUSB-Cのように、AIがファイル操作やブラウザ操作など多様な動作を実現できる仕組みです…とよく言われるが、
AIを使って、自分のローカル環境の世界と対話していく、2024年11月にClaudeのAnthropic社が提唱した、生成AI業界で実質上、初の共通規格のことである。
「MCP」(Model Context Protocol)は、AI(人工知能)と外部システムの接続を標準化するプロトコル。
https://atmarkit.itmedia.co.jp/ait/articles/2504/09/news066.html
AnthropicはMCPのリファレンス実装として「Google Drive」「Slack」「GitHub」「Git」「Postgres」「Puppeteer」などと連携可能なMCPサーバーを公開している。
https://gigazine.net/news/20241126-anthropic-model-context-protocol/
Introducing the Model Context Protocol \ Anthropic
https://www.anthropic.com/news/model-context-protocol
MCP登場の背景
MCP(Model Context Protocol)は、AIと様々なサービス・デバイスを共通規格で繋げるための新しいプロトコル
物理世界のUSB-Cのように、AIがファイル操作やブラウザ操作など多様な動作を実現できる仕組み。
AI活用の壁
AI活用が一般化するにつれ、個々のアプリやサービス間の連携が課題となっていました。AIが各サービスを使いこなすには、それぞれ個別の実装が必要でした。
統一された連携方法の必要性
従来はAPIごとに個別実装が必要でしたが、MCPにより柔軟かつ安全な連携が可能になりました。標準化されたプロトコルにより、開発者の負担も軽減されます。
MCPの全体構造
ホスト側
AIと対話し、様々なサービスを呼び出す
AIが支援するコードエディタ・テキストエディタなど
OpenAIのチャットAI
GoogleのAIアシスタント
サーバー側
PCのファイルへアクセス・操作
Webページの閲覧・操作
クラウド上のファイル操作
様々なAPI・サービスと連携
MCPの本質: ホスト側とサーバー側の双方を用意することで、AIと様々なサービスが柔軟につながり、複雑な操作や自動化が実現できます。統一された規格のため、拡張性と将来性に優れています。
Macの場合は、先に、『Homebrew』をインストールしておきます。
GUIではなく、CLI なので、『ターミナル』を使います。
macOSでCLIツールのHomebrewをターミナルでインストールする理由は、HomebrewがmacOSのパッケージ管理を簡単にするためです。Homebrewは、ターミナル上でコマンドを数回実行するだけで、ソフトウェアや開発ツールをインストール、アップデート、アンインストールできます。これにより、手作業でファイルをダウンロードしたり、設定ファイルを編集したりする手間が省け、開発効率が向上する。
しかし、ターミナルでは、実際にGUIで見えているファイル構造ではなく、隠しファイルもあるために、ターミナルのcommandをつかって、ファイル構造のPATHを指定するのが大変だった 2024年の4月頃…。初挑戦は、2018年…もうすでに、7年越しの挑戦なのか…。
ChatGPT で自己解決ができるようになりだした。
homebrew のインストール確認は、ターミナルで、
vrew -v
でバージョンが確認できる共に、インストールが確認できる。
※コンピュータ名が長いと、ターミナルから打ち込む時に、タイポしてしまうので、ユーザー pk とした。
コンピュータ名の変更
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>「一般」→「共有」を選択
-
ユーザー名の変更(フルネームとアカウント名)
ユーザー名とコンピュータ名を変更する手順を説明します。
重要なデータのバックアップを取ってから行ってください。
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>ユーザーとグループを選択
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>変更したいユーザーを右クリック → 「詳細オプション」を選択
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>アカウント名
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>ホームディレクトリ(必要に応じて)
-
ターミナルでの確認と変更
現在のユーザー名を確認:
現在のホスト名を確認:
ホスト名を変更(管理者権限が必要):
注意点
- p]:inline” style=”–tw-border-spacing-x: 0; –tw-border-spacing-y: 0; –tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; –tw-scroll-snap-strictness: proximity; –tw-ring-offset-width: 0px; –tw-ring-offset-color: #fff; –tw-ring-color: rgba(67, 128, 180, 0.5); –tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); –tw-ring-shadow: 0 0 rgba(0,0,0,0); –tw-shadow: 0 0 rgba(0,0,0,0); –tw-shadow-colored: 0 0 rgba(0,0,0,0); box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding-left: 0.428571em; border: 0px solid #c0c1c6;”>アプリケーションの設定やパスが正しく動作しなくなる可能性があります
- MCPセットアップ手順①〜Node.js&Claude導入
MCPセットアップ手順①〜Node.js&Claude導入
Step 1: Node.jsのインストールNode.js公式サイト(https://nodejs.org/ja)からお使いのOSに合ったインストーラをダウンロード。
Node.js って何なん?
– 「Node.js」は、ブラウザ内でのみ実行されていたJavaScriptを、サーバーサイドで実行するための実行環境だそう。なるほど、ブラウザ外でも動いてくれるJavaScriptなんですね。
インストール中はデフォルト設定のまま「次へ」を押していくだけでOKです。Step 2: ClaudeデスクトップアプリのインストールClaude公式サイト(https://claude.ai/download)からデスクトップアプリをダウンロードします。
インストール後、Claudeアカウントでログインしてください。WindowsとMac両方に対応しています。
Step 3: 構成ファイルを開く/新規作成Claude左上のメニュー → クロード設定 → 開発者 → 「構成を編集」をクリック
※注意:「始める」ボタンをクリックすると、開発者向けページに移動してしまいます
「claude_desktop_config.json」というファイルが生成され、このファイルをテキストエディタで開きます。
このファイルに次のステップでMCP設定を追加していきますユーザー名がわからない場合は、ターミナルを開き「
whoami
」コマンドを実行すると確認できます。
コンフィグファイル編集
https://modelcontextprotocol.io/quickstart/user#mac-os-linux
{ "mcpServers": { // ←コメントアウト、MCP (Model Context Protocol) サーバーの設定 "filesystem": { // ファイルシステム関連の設定 "command": "npx", // コマンド実行に npx を使用する "args": [ // コマンドライン引数 "-y", // すべてのプロンプトに自動的に「はい」と回答 "@modelcontextprotocol/server-filesystem", // 実行するパッケージ "/Users/username/Desktop", // アクセスを許可するディレクトリ名usernameを自分のuser名に変更 "/Users/username/Downloads" // アクセスを許可するディレクトリusernameを自分のuser名に変更 ] } } }
{ "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-filesystem", "/Users/username/Desktop", "/Users/username/Downloads" ] } } }
1MCPサーバー指定と許可範囲を設定
デスクトップ/ダウンロードなど操作許可範囲を限定
2コンフィグを保存してアプリ再起動
左下に🔧アイコンが表示されればMCP有効
3追加サーバー導入も同様に設定
カンマ区切りでJSON配列に追加可能
Claude.app を再起動
なんどか、Claude.appを再起動するとこの画面になった。
Claude > 設定 > 開発者 > filesystem
MCPサーバで提供されているツールを連携させ、許可の範囲を決める。
MCPサーバの『filesystem』とは…
MCPサーバーのFilesystemは、Anthropicが作成しました Introducing the Model Context Protocol \ Anthropic。Anthropicは、開発者が探索を始めるのを支援するため、Google Drive、Slack、GitHub、Git、Postgres、Puppeteerなどの人気のエンタープライズシステム向けの事前構築されたMCPサーバーを共有しています。
Filesystemサーバーは、設定可能なアクセス制御を備えた安全なファイル操作を提供するリファレンス/テストサーバーとして提供されており、MCP機能とTypeScript・Python SDKのデモンストレーションを目的としています。
このFilesystem MCPサーバーは、制御されたAPIを通じてローカルファイルの読み取り、書き込み、操作を可能にします PulseMCPAnthropic。
ここまでが、ようやく準備!
お楽しみはこれから!
そう、プログラムの世界はなにかとお作法がうるさいw
やっと、ここにたどり着けた感!
#MCPサーバー とは? みたいな説明ばかりがあるけど、
具体的にこんなことができます! 感動!『desktopに散らかったスクリーンショットを新たな『Screens』に移動してちょうだい』
※フォルダの位置を指定しないと同じところにフォルダつくりよりますねw
こわいので、毎回確認しながらですが、デスクトップからちらかったスクリーンショットが新たなフォルダ『Screens』に移動していきます!はい。一度だけ許可…
お!作業をはじめた!確認が結構、しつこいなぁ…
もう、面倒なので、『常に許可する』
デスクトップ上の、スクリーンショットが消えて移動していく!
きれいにスッキリ!
準備がほんと、面倒くさいけど、そこを超えればいろいろと新たな新大陸が待っていました!
GUIからCLIへ // アプリレイヤー、GUIレイヤーをこえてOSとお話するため
macでのhomebrewの管理 なぜ必要なのかは後でわかるw
ターミナルをcursor か Windsurfのアプリから使う、なぜならばわからないところをAIに聞きまくれるからiTunesのmediaファイルのカオスを一気に整理させたくなってきた!