出典: https://github.com/microsoft/mcp-for-beginners フォーク元リポジトリ: https://github.com/microsoft/mcp-for-beginners (Microsoft) ライセンス: MIT License

🔧 モジュール 3: AI Toolkitを使った高度なMCP開発¶

🎯 学習目標¶

このラボを終える頃には、以下ができるようになります：

✅ AI Toolkitを使ってカスタムMCPサーバーを作成する
✅ 最新のMCP Python SDK（v1.9.3）を設定・利用する
✅ MCP Inspectorをセットアップしてデバッグに活用する
✅ Agent BuilderとInspectorの両環境でMCPサーバーをデバッグする
✅ 高度なMCPサーバー開発のワークフローを理解する

📋 前提条件¶

ラボ2（MCP基礎）の完了
AI Toolkit拡張機能がインストールされたVS Code
Python 3.10以上の環境
Inspectorセットアップ用のNode.jsとnpm

🏗️ 作成するもの¶

このラボでは、以下を示すWeather MCP Serverを作成します：

カスタムMCPサーバーの実装
AI Toolkit Agent Builderとの統合
プロフェッショナルなデバッグワークフロー
最新のMCP SDKの利用パターン

🔧 コアコンポーネント概要¶

🐍 MCP Python SDK¶

Model Context ProtocolのPython SDKはカスタムMCPサーバー構築の基盤です。バージョン1.9.3を使い、強化されたデバッグ機能を活用します。

🔍 MCP Inspector¶

強力なデバッグツールで、以下を提供します：
- リアルタイムのサーバーモニタリング
- ツール実行の可視化
- ネットワークリクエスト／レスポンスの検査
- インタラクティブなテスト環境

📖 ステップバイステップ実装¶

ステップ1: Agent BuilderでWeatherAgentを作成¶

AI Toolkit拡張機能からVS CodeでAgent Builderを起動
以下の設定で新しいエージェントを作成：
エージェント名：WeatherAgent

Agent Creation

ステップ2: MCPサーバープロジェクトの初期化¶

Agent BuilderのTools → Add Toolに移動
利用可能なオプションから「MCP Server」を選択
「Create A new MCP Server」を選ぶ
python-weatherテンプレートを選択
サーバー名をweather_mcpに設定

Python Template Selection

ステップ3: プロジェクトを開いて確認¶

生成されたプロジェクトをVS Codeで開く

プロジェクト構成を確認する：

weather_mcp/
├── src/
│   ├── __init__.py
│   └── server.py
├── inspector/
│   ├── package.json
│   └── package-lock.json
├── .vscode/
│   ├── launch.json
│   └── tasks.json
├── pyproject.toml
└── README.md

ステップ4: 最新MCP SDKへアップグレード¶

🔍 なぜアップグレード？
最新のMCP SDK（v1.9.3）とInspectorサービス（0.14.0）を使い、機能強化とデバッグ性能向上を図るためです。

4a. Python依存関係の更新¶

pyproject.tomlを編集： ./code/weather_mcp/pyproject.tomlを更新

4b. Inspector設定の更新¶

inspector/package.jsonを編集： ./code/weather_mcp/inspector/package.jsonを更新

4c. Inspector依存関係の更新¶

inspector/package-lock.jsonを編集： ./code/weather_mcp/inspector/package-lock.jsonを更新

📝 注意： このファイルは膨大な依存関係定義を含みます。以下は主要な構造のみ示しています。完全な依存関係解決には提供されたファイルを使用してください。

⚡ 完全なパッケージロック： package-lock.jsonは約3000行の依存関係定義を含みます。上記は主要構造の例示です。完全な依存関係解決には元ファイルを利用してください。

ステップ5: VS Codeデバッグ設定¶

注：指定されたパスのファイルをコピーして、対応するローカルファイルを置き換えてください

5a. 起動構成の更新¶

.vscode/launch.jsonを編集：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Local MCP",
      "type": "debugpy",
      "request": "attach",
      "connect": {
        "host": "localhost",
        "port": 5678
      },
      "presentation": {
        "hidden": true
      },
      "internalConsoleOptions": "neverOpen",
      "postDebugTask": "Terminate All Tasks"
    },
    {
      "name": "Launch Inspector (Edge)",
      "type": "msedge",
      "request": "launch",
      "url": "http://localhost:6274?timeout=60000&serverUrl=http://localhost:3001/sse#tools",
      "cascadeTerminateToConfigurations": [
        "Attach to Local MCP"
      ],
      "presentation": {
        "hidden": true
      },
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Launch Inspector (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:6274?timeout=60000&serverUrl=http://localhost:3001/sse#tools",
      "cascadeTerminateToConfigurations": [
        "Attach to Local MCP"
      ],
      "presentation": {
        "hidden": true
      },
      "internalConsoleOptions": "neverOpen"
    }
  ],
  "compounds": [
    {
      "name": "Debug in Agent Builder",
      "configurations": [
        "Attach to Local MCP"
      ],
      "preLaunchTask": "Open Agent Builder",
    },
    {
      "name": "Debug in Inspector (Edge)",
      "configurations": [
        "Launch Inspector (Edge)",
        "Attach to Local MCP"
      ],
      "preLaunchTask": "Start MCP Inspector",
      "stopAll": true
    },
    {
      "name": "Debug in Inspector (Chrome)",
      "configurations": [
        "Launch Inspector (Chrome)",
        "Attach to Local MCP"
      ],
      "preLaunchTask": "Start MCP Inspector",
      "stopAll": true
    }
  ]
}

.vscode/tasks.jsonを編集：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start MCP Server",
      "type": "shell",
      "command": "python -m debugpy --listen 127.0.0.1:5678 src/__init__.py sse",
      "isBackground": true,
      "options": {
        "cwd": "${workspaceFolder}",
        "env": {
          "PORT": "3001"
        }
      },
      "problemMatcher": {
        "pattern": [
          {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
          }
        ],
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": "Application startup complete|running"
        }
      }
    },
    {
      "label": "Start MCP Inspector",
      "type": "shell",
      "command": "npm run dev:inspector",
      "isBackground": true,
      "options": {
        "cwd": "${workspaceFolder}/inspector",
        "env": {
          "CLIENT_PORT": "6274",
          "SERVER_PORT": "6277",
        }
      },
      "problemMatcher": {
        "pattern": [
          {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
          }
        ],
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting MCP inspector",
          "endsPattern": "Proxy server listening on port"
        }
      },
      "dependsOn": [
        "Start MCP Server"
      ]
    },
    {
      "label": "Open Agent Builder",
      "type": "shell",
      "command": "echo ${input:openAgentBuilder}",
      "presentation": {
        "reveal": "never"
      },
      "dependsOn": [
        "Start MCP Server"
      ],
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "openAgentBuilder",
      "type": "command",
      "command": "ai-mlstudio.agentBuilder",
      "args": {
        "initialMCPs": [ "local-server-weather_mcp" ],
        "triggeredFrom": "vsc-tasks"
      }
    },
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

🚀 MCPサーバーの起動とテスト¶

ステップ6: 依存関係のインストール¶

設定変更後、以下のコマンドを実行してください：

Python依存関係のインストール：

uv sync

Inspector依存関係のインストール：

cd inspector
npm install

ステップ7: Agent Builderでデバッグ¶

F5キーを押すか、「Debug in Agent Builder」構成を選択
デバッグパネルからcompound構成を選択
サーバー起動とAgent Builderの起動を待つ
自然言語クエリでWeather MCPサーバーをテスト

以下のような入力プロンプトを使用

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

Agent Builder Debug Result

ステップ8: MCP Inspectorでデバッグ¶

「Debug in Inspector」構成を使用（EdgeまたはChrome）
http://localhost:6274でInspectorインターフェースを開く
インタラクティブなテスト環境を探索：
利用可能なツールの確認
ツール実行のテスト
ネットワークリクエストの監視
サーバーレスポンスのデバッグ

MCP Inspector Interface

🎯 主要な学習成果¶

このラボを完了して、以下を達成しました：

AI Toolkitテンプレートを使ったカスタムMCPサーバーの作成
機能強化のための最新MCP SDK（v1.9.3）へのアップグレード
Agent BuilderとInspector両方のプロフェッショナルなデバッグワークフローの設定
インタラクティブなサーバーテストのためのMCP Inspectorのセットアップ
MCP開発のためのVS Codeデバッグ構成の習得

🔧 探索した高度な機能¶

機能	説明	利用例
MCP Python SDK v1.9.3	最新のプロトコル実装	モダンなサーバー開発
MCP Inspector 0.14.0	インタラクティブなデバッグツール	リアルタイムサーバーテスト
VS Codeデバッグ	統合開発環境	プロフェッショナルなデバッグワークフロー
Agent Builder統合	AI Toolkitとの直接連携	エンドツーエンドのエージェントテスト

📚 追加リソース¶

🎉 おめでとうございます！ ラボ3を無事に完了し、プロフェッショナルな開発ワークフローでカスタムMCPサーバーの作成、デバッグ、デプロイができるようになりました。

🔜 次のモジュールへ進む¶

実際の開発ワークフローでMCPスキルを活かす準備はできましたか？
続けてモジュール4: 実践的MCP開発 - カスタムGitHubクローンサーバーへ進みましょう。ここでは：
- GitHubリポジトリ操作を自動化する本番対応MCPサーバーを構築
- MCP経由でGitHubリポジトリのクローン機能を実装
- VS CodeとGitHub Copilot Agent Modeとの統合
- 本番環境でのカスタムMCPサーバーのテストとデプロイ
- 開発者向けの実践的なワークフロー自動化を学習します

免責事項：
本書類はAI翻訳サービス「Co-op Translator」を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語によるオリジナル文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じたいかなる誤解や誤訳についても、当方は責任を負いかねます。