【WSL環境】Claude Desktop × MCPサーバー（コンテナ）で最強エージェントコーディングツール環境を構築する

# 目的
以前、下記記事にてClaude CodeをMCPサーバーとしてClaude Desktopから使うことで最強のエージェントコーディングツールの環境を構築いたしました。

https://qiita.com/eiji-noguchi/items/a45dbb94ad7544d1c1b4

https://qiita.com/eiji-noguchi/items/a24881f5b5e32710f028

今回は更にMCPサーバーをClaude Desktopと組み合わせることでもっと最強エージェントコーディングツール環境を構築する手順を示します。

- 追加するMCPサーバー
    - Web検索機能
    - Webコンテンツ取得機能

※本手順では「Claude Code」はなくても大丈夫です。

# 前提
本手順の前にClaude DesktopおよびDocker Desktopをインストールしておく必要があります。

・Claude Desktop

https://claude.ai/download

・Docker Desktop

https://www.docker.com/products/docker-desktop/

※本環境はWindows（WSL）になります。

# MCPとは
本題に入る前にザックリMCP解説。
MCPについては公式ドキュメントより解説されています。

https://modelcontextprotocol.io/introduction

> MCPは、LLMの上にエージェントや複雑なワークフローを構築するのに役立ちます。LLMは頻繁にデータやツールと統合する必要がありますが、MCPは以下を提供します。
・LLMが直接接続できる事前構築済みの統合のリストが増えています
・LLMプロバイダーとベンダーを切り替える柔軟性
・インフラストラクチャ内のデータをセキュリティで保護するためのベストプラクティス

また、公式サイトには以下のようなアーキテクチャとして紹介されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/54d5db20-2c13-4c51-b1b3-a361ace01af9.png)


つまり、MCPを使うことで**ローカルへの接続**や、**外部のAPIへの通信**、**Web検索**などができるようになります。

今回はこのMCPサーバーをコンテナとしてローカルで実行していきます。


# 手順
MCPサーバーを使うにあたって、方法は2つあります。
1. 公式MCPサーバーを利用
1. 自作MCPサーバーを利用
    → 自作したい方は[こちら](https://modelcontextprotocol.io/quickstart/server)

今回は1の「公式MCPサーバーを利用」します。

## リポジトリからMCPサーバーを選ぶ
MCPの公式リポジトリには多くのMCPサーバーが既に登録されています。
この中から使いたい機能のものを選んでください。

https://github.com/modelcontextprotocol/servers

今回は以下の2つを導入していきます。
- Web検索: [brave-search](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search)
    - brave-searchの利用には[API key](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search#getting-an-api-key)が必要になります。（無料枠有）
- Webコンテンツ取得: [fetch](https://github.com/modelcontextprotocol/servers/tree/main/src/fetch)

:::note warn
注意
リポジトリには「公式」、「サードパーティー製」、「コミュニティ製」のものがあります。
それぞれを使う際はしっかり自分で説明を読んでから使用しましょう。
:::


## MCP構成を編集
この先の手順はClaude Desktopを開発者モードにしておく必要があります。
手順は以下を参考にしてください。

- [Claude Desktopを開発者モードにする](https://qiita.com/eiji-noguchi/items/a24881f5b5e32710f028#claude-for--desktop%E3%82%92%E9%96%8B%E7%99%BA%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E3%81%99%E3%82%8B)


まず、Claude Desktopの`claude_desktop_config.json`ファイルを編集します。
記述内容は各MCPサーバーのリポジトリにもREADMEとして記載されていますので、そちらも参考にしてください。

※`"YOUR_API_KEY_HERE"`についてはご自身の[API key](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search#getting-an-api-key)を登録してください。
```json:claude_desktop_config.json
{
    "mcpServers": {
        "brave-search": {
            "command": "docker",
            "args": [
                "run",
                "-i",
                "--rm",
                "-e",
                "BRAVE_API_KEY",
                "mcp/brave-search"
            ],
            "env": {
                "BRAVE_API_KEY": "YOUR_API_KEY_HERE"
            }
        },
        "fetch": {
            "command": "docker",
            "args": [
                "run",
                "-i",
                "--rm",
                "mcp/fetch"
            ],
            "alwaysAllow": [
                "fetch"
            ]
        }
    }
}
```

内容を保存したらClaude Desktopを立ち上げてください。

:::note warn
注意
既にClaude Desktopを立ち上げていた場合、アプリを再起動させてください。
:::


## MCPサーバーの確認
Claude Desktopを開きなおすと、画像のように「トンカチマーク」が表示されるようになります。
中身を見ると「ソースサーバー：brave-search」や「ソースサーバー：fetch」として、利用可能なツールの一覧が表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/ec9c92e2-c4ac-4171-8513-ff2ad17d1c19.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/6964a0d1-4377-4999-a5ea-58ffc446d221.png)

また、画面左上の「≡」から、「ファイル」→「設定」より開発用設定画面を開くと、MCPサーバーが動いていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/86fc4676-6213-45f9-bdb1-0adc97c3132a.png)

ちなみにコンテナも同時に起動しているかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/6a0dbadb-2cac-4123-86e7-3960bdabaa0f.png)


ここまでくれば設定完了です！


## MCPサーバーの利用
では、実際に動かしてみましょう。
プロンプトには以下を使ってみます。

```
Qiitaから生成AIに関する人気の記事を3つ取得して、それぞれの内容を要約してください。
```

Claudeの回答中に以下のようなポップアップが表示されたら、内容を確認して`許可`してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/2baf65f4-76fe-468b-99db-cbbe3af9ea12.png)

返ってきた回答がこちら↓
※長いので折りたたんでいます。

<details><summary>回答</summary>

```
Qiitaから生成AIに関する人気の記事を検索して要約します。

いくつかの記事が見つかりましたが、具体的な内容を確認するために、それぞれの記事を詳しく調べてみましょう。

続きを読んでみましょう：

こちらは1つ目の記事です。次に別の記事も確認しましょう：

次に、もう一つの記事を調べてみましょう：

見つかった記事を詳しく見てみましょう：

再度試してみましょう：

記事の続きを取得します：

以上の記事から、Qiitaの生成AIに関する人気記事の要約をまとめます：

# Qiitaの生成AIに関する人気記事3選の要約

## 1. 「生成AIの最新動向のまとめ、戦略、戦術」（著者：kimuni-i氏）

この記事では、生成AIの基本概念と主要クラウドプロバイダー（AWS、Azure、Google Cloud、Tencent Cloud）による生成AI関連サービスの最新動向を包括的に解説しています。

### 主なポイント：
- **生成AIの定義**: 自然言語処理や文章生成などに特化したAIで、新しい文章や表現を生成可能
- **主な生成AIアプローチ**: 言語モデル、文章生成、対話モデル、生成画像モデルの4つに分類
- **主要プロバイダーのサービス比較**: AWS（Amazon SageMaker、Bedrock等）、Azure、Google Cloud（Bard、Gemini等）、Tencent Cloudの提供サービスを詳細に比較
- **AIフレームワーク**: TensorFlow、PyTorch、Keras、Scikit-learnなど主要なAIフレームワークの解説
- **戦略と戦術**: 各クラウドプロバイダーの長期的な戦略と短期的な戦術の違いを分析

記事は、企業がクラウドサービスを活用する際の考え方にも触れ、BAT（百度、アリババ、テンセント）と米国の主要クラウドプロバイダーの違いや特徴についても言及しています。

## 2. 「生成AIサービス4選 | 活用上の注意点」（著者：HBLABJapan氏）

この記事では、注目の生成AIサービス4つを紹介し、企業での活用実態と注意点を解説しています。

### 主なポイント：
- **注目サービス4選**:
  1. **ChatGPT**: 自然な会話能力と多様な知識ベースを持つ言語モデル
  2. **Microsoft Copilot for Microsoft 365**: Wordなどのアプリに統合されたAI支援機能
  3. **GitHub Copilot**: コード生成を自動化するプログラミング支援ツール
  4. **DALL-E**: テキストから詳細な画像を生成するAI
- **企業の導入状況**: 2023年の調査では、導入済み/推進中が24.2%、検討中が30.8%と着実に普及
- **導入の主な動機**: 業務効率化と革新の促進
- **活用上の注意点**:
  1. データの品質と偏りの管理
  2. 著作権と知的財産権の尊重
  3. 倫理的配慮（透明性と説明責任）
  4. 法的規制とコンプライアンス
  5. セキュリティ対策

記事は、生成AIが文章、画像、動画、音声など多様なデータを生成する能力により、日常生活やビジネスに大きな可能性をもたらすことを強調しています。

## 3. 「web開発素人だけど、Claude 3.7 Sonnetを使ったら半日でアプリ開発&リリースできた記念記事」（著者：ynmc0214氏）

プログラミング経験の少ないサービスデザイナーが、最新の生成AIモデル「Claude 3.7 Sonnet」を使って、わずか半日でバス時刻表アプリを開発した体験を綴った記事です。

### 主なポイント：
- **開発の背景**: 地元・鶴見駅のバスターミナルで「どの乗り場に一番早くバスが来るか分からない」問題を解決するアプリ開発
- **開発プロセス**:
  1. Claudeによる要件定義（最適な技術スタックの提案）
  2. 実現性検証（サンプルコード生成とデバッグ）
  3. 本開発（時刻表データの追加、管理方法変更、UI改善）
  4. リリースと家族によるユーザーテスト
- **所要時間**: 約4時間で構想から実装、リリースまで完了
- **Claude 3.7 Sonnetの評価**: 
  - コードの正確性が高い
  - 技術的な質問に的確に答える
  - 開発環境の設定からデプロイまで一貫してサポート
- **開発者としての気づき**:
  - 生成AIと協働することでプログラミングが自然と学習できる
  - MVP（Minimal Viable Product）開発の重要性を実感

記事は、生成AIがコーディング経験の少ない人でもアプリ開発を可能にし、プログラミング学習の新しい形を提供することを示しています。「AI駆動開発」という新しい開発スタイルの有効性を示す実例となっています。
```
</details>


ちゃんとWeb検索した結果をもとに回答をしてくれるようになりましたね。

ちなみに実際には処理の流れはをClaude Desktop上から追うこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/d22b0f8b-26c0-4b3c-ac65-6948e201fca1.png)



### 補足
MPCサーバーを使わない場合はWeb検索ができないので、以下のような回答になってしまいます。

<details><summary>MPCサーバーを使わない場合の回答</summary>

```
Qiitaから生成AIに関する人気記事を検索・要約するには、Qiitaのデータに直接アクセスする必要がありますが、私はそのような接続機能を持っていません。

その代わりに、一般的に生成AIに関して人気がある可能性の高いトピックをもとに、それらの要約を提供することはできます。以下に生成AIに関する3つの重要なトピックとその要約を示します：

1. **大規模言語モデル（LLM）の最新動向**  
   最新の大規模言語モデルの進化と応用について解説。GPT-4、Claude、Llama 2などのモデルの比較と、それらの特徴や性能の違い。プロンプトエンジニアリングの重要性と効果的な使用方法についての考察も含む。

2. **生成AIの倫理的課題と対策**  
   生成AIの普及に伴う著作権問題、偽情報の拡散、バイアスなどの倫理的課題を分析。日本国内での法的規制の現状と企業の自主的ガイドラインについての検討。AIの責任ある開発と利用のためのベストプラクティスの提案。

3. **生成AIの実務応用事例**  
   企業における生成AIの導入事例とその効果を紹介。コード生成、文書作成、画像生成などの分野での具体的な活用法と、生産性向上の実績データ。導入時の課題と解決策、コスト対効果の分析も含む。

より正確な情報を得るには、Qiitaのサイトを直接訪問して最新の人気記事を確認されることをお勧めします。
```
</details>


# まとめ
Claude Desktop × MCPサーバー 環境を構築することでただでさえ最強なAIが更に使い勝手がよくなりましたね。
冒頭でも紹介した以下の記事内容と合わせればもう、鬼に金棒です。

https://qiita.com/eiji-noguchi/items/a24881f5b5e32710f028

MCPはClaudeを出しているAnthropic社によって公開されたプロトコルですが、最近ライバル社でもあるOpenAIもこれを取り入れたようです。

https://openai.github.io/openai-agents-python/mcp/

こうなると、今後MCPサーバーというものが標準化して広まっていくことが予想されますね。
今回のようなAIエージェントシステムは必ず発展していく分野になるかと思われますので、早いうちにキャッチアップが大事ですね。



# 仲間を募集しています！

ARIではエンジニア・ITコンサルタント・PM職全方位で仲間を募集しております。
カジュアル面談、随時受付中です！
ご興味ある方はこちらをご覧ください。

https://note.com/ari_hr/n/n4aed9ba75421