🔧 模組 3：使用 AI 工具包進階 MCP 開發

🎯 學習目標

完成本實驗後，您將能夠：

✅ 使用 AI 工具包建立自訂 MCP 伺服器
✅ 設定並使用最新的 MCP Python SDK（v1.9.3）
✅ 設置並運用 MCP Inspector 進行除錯
✅ 在 Agent Builder 與 Inspector 環境中除錯 MCP 伺服器
✅ 理解進階 MCP 伺服器開發流程

📋 先決條件

完成實驗 2（MCP 基礎）
安裝 AI 工具包擴充功能的 VS Code
Python 3.10+ 環境
用於 Inspector 設定的 Node.js 與 npm

🏗️ 您將建立的內容

在本實驗中，您將建立一個 天氣 MCP 伺服器，示範：

自訂 MCP 伺服器實作
與 AI 工具包 Agent Builder 整合
專業除錯流程
現代 MCP SDK 使用模式

🔧 核心元件概覽

🐍 MCP Python SDK

Model Context Protocol Python SDK 是建立自訂 MCP 伺服器的基礎。您將使用具備強化除錯功能的 1.9.3 版本。

🔍 MCP Inspector

一款強大的除錯工具，提供：

即時伺服器監控
工具執行視覺化
網路請求/回應檢視
互動式測試環境

📖 逐步實作

步驟 1：在 Agent Builder 建立 WeatherAgent

透過 AI 工具包擴充功能在 VS Code 啟動 Agent Builder
建立新代理人，設定如下：
- 代理人名稱：WeatherAgent

步驟 2：初始化 MCP 伺服器專案

在 Agent Builder 中前往工具 → 新增工具
選擇「MCP Server」
選擇「建立新的 MCP Server」
選擇 python-weather 範本
命名您的伺服器： weather_mcp

步驟 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 或使用 「在 Agent Builder 中除錯」 設定
從除錯面板選擇複合設定
等待伺服器啟動並開啟 Agent Builder
使用自然語言查詢測試您的天氣 MCP 伺服器

輸入提示如下

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

步驟 8：使用 MCP Inspector 除錯

使用「在 Inspector 中除錯」設定（Edge 或 Chrome）
開啟 Inspector 介面，網址為 http://localhost:6274
探索互動式測試環境：
- 查看可用工具
- 測試工具執行
- 監控網路請求
- 除錯伺服器回應

🎯 主要學習成果

完成本實驗後，您已：

使用 AI 工具包範本建立自訂 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 工具包	端對端代理人測試

📚 其他資源

🎉 恭喜！ 您已成功完成實驗 3，現在能使用專業開發流程建立、除錯並部署自訂 MCP 伺服器。

🔜 繼續下一模組

準備將 MCP 技能應用於實務開發流程？請繼續前往 模組 4：實務 MCP 開發 - 自訂 GitHub Clone 伺服器，您將：

建立可用於生產的 MCP 伺服器，自動化 GitHub 倉庫操作
實作透過 MCP 的 GitHub 倉庫複製功能
將自訂 MCP 伺服器整合至 VS Code 與 GitHub Copilot Agent 模式
在生產環境中測試與部署自訂 MCP 伺服器
學習開發者實務工作流程自動化

免責聲明：
本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 模組 3：使用 AI 工具包進階 MCP 開發

🎯 學習目標

📋 先決條件

🏗️ 您將建立的內容

🔧 核心元件概覽

🐍 MCP Python SDK

🔍 MCP Inspector

📖 逐步實作

步驟 1：在 Agent Builder 建立 WeatherAgent

步驟 2：初始化 MCP 伺服器專案

步驟 3：開啟並檢視專案

步驟 4：升級至最新 MCP SDK

4a. 更新 Python 依賴

4b. 更新 Inspector 設定

4c. 更新 Inspector 依賴

步驟 5：設定 VS Code 除錯

5a. 更新啟動設定

🚀 執行與測試您的 MCP 伺服器

步驟 6：安裝依賴

步驟 7：使用 Agent Builder 除錯

步驟 8：使用 MCP Inspector 除錯

🎯 主要學習成果

🔧 探索的進階功能

📚 其他資源

🔜 繼續下一模組

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🔧 模組 3：使用 AI 工具包進階 MCP 開發

🎯 學習目標

📋 先決條件

🏗️ 您將建立的內容

🔧 核心元件概覽

🐍 MCP Python SDK

🔍 MCP Inspector

📖 逐步實作

步驟 1：在 Agent Builder 建立 WeatherAgent

步驟 2：初始化 MCP 伺服器專案

步驟 3：開啟並檢視專案

步驟 4：升級至最新 MCP SDK

4a. 更新 Python 依賴

4b. 更新 Inspector 設定

4c. 更新 Inspector 依賴

步驟 5：設定 VS Code 除錯

5a. 更新啟動設定

🚀 執行與測試您的 MCP 伺服器

步驟 6：安裝依賴

步驟 7：使用 Agent Builder 除錯

步驟 8：使用 MCP Inspector 除錯

🎯 主要學習成果

🔧 探索的進階功能

📚 其他資源

🔜 繼續下一模組