🪄

Claudeの超強力な機能 Model Context Protocol (MCP) を使ってみた

2024/12/14に公開

mcp

ノーコード開発

Claude

tech

11月末、ClaudeにModel Context Protocol (MCP)対応が追加されました。

MCPは、AIモデルとアプリケーションやファイルシステムの間でデータをやり取りするための新しい標準プロトコルです。

これがかなり強力な機能で、例えばファイルシステムと連携させることで、プロンプトで指示したアプリを直接ファイルシステムに書き出してくれるようになります。

これにより、ノーコード開発が加速し、より高度なアプリケーションを作成できるようになります。

 MCPを使うための前提条件Claude Pro(月額20ドル)、またはそれ以上のプランへの契約が必要となります。

 MCPを使うための準備
 Macの場合
 アプリのインストールhttps://claude.ai/download

からダウンロードしてインストールする

 下準備$ brew install uv
$ npm install -g @modelcontextprotocol/server-filesystem
で必要なものをインストールします

uv はRust製のPythonパッケージマネージャーです

 Claudeを開発者モードにするClaudeのアプリのHelpから、開発者モードを有効にする


画面が表示されるのでEnableをクリクします


 MCPサーバーの設定Claudeのアプリの設定画面にDeveloperが表示されるのでEdit Configをクリック
Finderが開くので、claude_desktop_config.jsonを開く
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/<ユーザ名>/git/",
        "/Users/<ユーザ名>/GitHub/"
      ]
    }
  }
}
のように設定します
"/Users/<ユーザ名>/git/",
"/Users/<ユーザ名>/GitHub/"
の部分は、Claudeにアクセスを許可するディレクトリを適宜設定してください

設定したらClaudeのアプリを再起動しましょう

 Windowsの場合
 アプリのインストールhttps://claude.ai/download

からダウンロードしてインストールする

 下準備https://docs.astral.sh/uv/getting-started/installation/ を参考にuvをインストール
> powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
必要なnodeモジュールをインストール
$ npm install -g @modelcontextprotocol/server-filesystem
uv はRust製のPythonパッケージマネージャーです

 Claudeを開発者モードにするハンバーガーアイコンからメニューを開き、Helpから、開発者モードを有効にする



画面が表示されるのでEnableをクリクします


 MCPサーバーの設定ハンバーガーアイコンからメニューを開き、File >> Settings... をクリック

Claudeのアプリの設定画面にDeveloperが表示されるのでEdit Configをクリック
Explorerが開くので、claude_desktop_config.jsonを開く
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "D:\\GitHub\\owayo\\"
      ]
    }
  }
}
のように設定します
"D:\\GitHub\\owayo\\"
の部分は、Claudeにアクセスを許可するディレクトリを適宜設定してください

設定したらClaudeのアプリを再起動しましょう

 MCPを使ってみるとりあえず簡単なアプリを作ってみようと思います

以下のようなプロンプトでアプリの作成を指示します
ローカルの、git/othello のリポジトリを使って開発して
pnpmでパッケージ管理を行い、Next.js でオセロのアプリを作ってください
プレイヤーはAIと対戦ができます
AIにはGeminiを使用してください
GeminiのAPI tokenは
*****
を使用してGeminiのAIでAIの手を思考するようにして
Claudeが、指示通りにアプリを作成してくれるので、完成を待ちましょう

その次に、 以下のように指示します
ローカルに書き出してください
すると以下のような画面が表示されるので、Allow for This Chatをクリックします
Claudeがファイルシステムにアクセスし、プロジェクト全体を書き出してくれます

あとはpnpm installしてpnpm devすれば、ローカルでアプリが動作します
!完全に動くまではもう少しやり取りを行いましたが8割程度が完成しているものを書き出してくれました

動かなかった部分としてはGeminiとのやり取りの部分です

それ以外は完璧なコードが生成されました

 完成したもの

ちゃんとAIと対戦できるオセロが作れました
これだけでアプリが作れるのでかなり便利ですね

 MCPとの連携MCPは現在以下との連携が可能です
AWS KB Retrieval - Retrieval from AWS Knowledge Base using Bedrock Agent Runtime
Brave Search - Web and local search using Brave's Search API
EverArt - AI image generation using various models
Everything - Reference / test server with prompts, resources, and tools
Fetch - Web content fetching and conversion for efficient LLM usage
Filesystem - Secure file operations with configurable access controls
Git - Tools to read, search, and manipulate Git repositories
GitHub - Repository management, file operations, and GitHub API integration
GitLab - GitLab API, enabling project management
Google Drive - File access and search capabilities for Google Drive
Google Maps - Location services, directions, and place details
Memory - Knowledge graph-based persistent memory system
PostgreSQL - Read-only database access with schema inspection
Puppeteer - Browser automation and web scraping
Sentry - Retrieving and analyzing issues from Sentry.io
Sequential Thinking - Dynamic and reflective problem-solving through thought sequences
Slack - Channel management and messaging capabilities
Sqlite - Database interaction and business intelligence capabilities
Time - Time and timezone conversion capabilities
https://github.com/modelcontextprotocol/servers

 MCP活用例プロンプトでのノーコードアプリ作成
既存のプロジェクトに、既存コードを参考にした新機能を追加する

any/path/to/file を参考にして、xxx 機能を追加してください のように指示することで、既存のコードを参考に新機能を追加してくれました
コードレビュー

今までのようにソースコードをコピペしてAIアシスタントのプロンプトに貼り付ける必要もなく、シームレスにレビューができます

インポートや基底クラスも考慮してのように指示することで、プロンプトでは難しい部分も考慮してレビューしてくれました

 まとめModel Context Protocol (MCP)のおかげで、Claudeが一段と便利になった感じがしませんか？これまで煩雑だったAIモデルと外部ツールの連携が、MCPによってスムーズに行えるようになりました。

特にノーコードでのアプリ開発が可能になったことで、技術に詳しくない人でも簡単にアプリを作れるようになったのは大きなメリットですね。
また、MCPの応用範囲が広がっていることも魅力的です。GitHubやSlack、Google Driveなどの様々なツールと連携できるので、開発者はもちろん、ビジネスシーンでも活用の幅が広がります。

特に、コードレビューや開発の効率を大幅に向上させることができるでしょう。
これからもMCPの機能が進化し続けることで、さらに便利で新しい使い方が生まれることを期待しています。ぜひ、皆さんもMCPを試して、日々の業務やプロジェクトに活用してみてください！