Claude DesktopとDocker DesktopでMCPを超簡単に構築する

Docker Desktop経由でClaude DesktopのMCP(Model Context Protocol)連携を行ったところ、思ったよりも簡単だったので手順を共有します。
他に同様の記事が見当たらなかったので、参考になれば幸いです。数番煎じだったらすみません。

MCPについてはすでに多くの記事が出ているので、基本的な用語の説明は省略します。

https://modelcontextprotocol.io/introduction

## 準備

Docker Desktopを最新版にアップグレードします(図は4.39.0)。

![スクリーンショット 2025-03-24 21.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/3b5b5959-7fab-4e50-a9b7-ecd76467acf8.png)

デスクトップ版Claudeをダウンロードします。

https://claude.ai/download

## 構築

### Docker Desktopに拡張機能をインストール

Docker Desktopを起動し、左側メニューから「Extensions」を選択します。
検索バーに「AI Tools」と入力するか、カテゴリーから探して「Labs: AI Tools for Devs」をインストールします。

![スクリーンショット 2025-03-24 21.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/f2a6078f-6a19-4b77-951d-1ad756ccabc3.png)

### MCP Clientsの設定

インストールした「Labs: AI Tools for Devs」を開き、画面右上の赤枠で囲まれた歯車アイコンをクリックしてMCP Clientsの設定画面を開きます。

![スクリーンショット 2025-03-24 21.29.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/7a460e64-04a8-4a2f-8a3a-54279f30d67d.png)

設定画面で「MCP Clients」タブを選択し、「Claude Desktop」の「Connect」ボタンをクリックします。

![スクリーンショット 2025-03-24 21.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/888e5d21-b318-4bcf-973a-89b47e19866a.png)

これでClaude DesktopのMCPサーバー設定用ファイル`claude_desktop_config.json`に必要な設定が自動的に書き込まれます。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "MCP_DOCKER": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "alpine/socat",
        "STDIO",
        "TCP:host.docker.internal:8811"
      ]
    }
  }
}
```

Claude Desktopを再起動し、「設定 > 開発者」タブを開きます。MCPサーバーの設定が正しく反映され、「running」状態になっていることを確認します。

![スクリーンショット 2025-03-24 21.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/deb7e275-b3c8-4af4-af91-72ce6fb569cb.png)

### ツールの追加と使用

「Labs: AI Tools for Devs」に戻り、使用したいツールを追加します。今回は例としてChromeのツールを追加してみます。

![スクリーンショット 2025-03-24 21.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/47e1f470-3141-468f-a6c5-051c118ef2f8.png)

Claude Desktopを更新(CMD + Rでリロード)し、画面下部の赤枠で囲まれたMCP連携アイコンをクリックします。

![スクリーンショット 2025-03-24 21.49.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/fb1677a6-ecad-47a0-a0d0-03e835f58bf8.png)

「連携サービスを選択」ドロップダウンから「Chrome web scraper」を選択します。

![スクリーンショット 2025-03-24 21.48.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/1c16d741-7883-43df-bec7-ff6ae61aad0e.png)

試しに以下を入力して、Yahoo!ファイナンスでトヨタの現在の株価と本日の変動率を取得してみます。

```
URL: https://finance.yahoo.co.jp/quote/7203.T
Extract Toyota's current stock price and today's change percentage.
```

![スクリーンショット 2025-03-24 21.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/02517aab-b250-4997-99e8-4b8af0954558.png)

初回実行時には、ツールの使用許可を求められるので「許可」をクリックします。

![スクリーンショット 2025-03-24 21.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/4a976ef0-dff0-4d88-9071-81848d0f433f.png)

実行結果は以下のように表示されます。Claudeが取得したウェブページの情報を基に回答を生成します。

![スクリーンショット 2025-03-24 21.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/ba846411-0b2b-4ac5-81a4-7c5e435e6615.png)

APIキーやトークンなどが必要ですが、こんな感じでGitHub、Slack、Notionとの連携も簡単にできます。

これからMCPを試してみたいという方もきっといらっしゃると思うので、参考にしてみてください。

## 余談

MCP ClientsでCursorの設定もできるのですが、Cursor側では「running」となっているのに、Docker Desktop側では「connect」とならずに困りました。解決したら追記します。

## 参考

[Exploring the Docker Desktop Extension for MCP servers](https://youtu.be/eyNX0Uv4jq0?si=rjuOeXrAun4-_NLU)