microsoft--mcp-for-beginners/translations/th/10-StreamliningAIWorkflowsBuildingAnMCPServerWithAIToolkit/lab3

🔧 โมดูล 3: การพัฒนา MCP ขั้นสูงด้วย Microsoft Foundry Toolkit

🎯 วัตถุประสงค์การเรียนรู้

เมื่อจบบทปฏิบัตินี้ คุณจะสามารถ:

• ✅ สร้างเซิร์ฟเวอร์ MCP แบบกำหนดเองโดยใช้ Microsoft Foundry Toolkit
• ✅ กำหนดค่าและใช้งาน MCP Python SDK เวอร์ชันล่าสุด (v1.9.3)
• ✅ ตั้งค่าและใช้ MCP Inspector สำหรับการดีบัก
• ✅ ดีบักเซิร์ฟเวอร์ MCP ทั้งในสภาพแวดล้อม Agent Builder และ Inspector
• ✅ เข้าใจกระบวนการพัฒนาเซิร์ฟเวอร์ MCP ขั้นสูง

📋 ข้อกำหนดเบื้องต้น

• ผ่านการทำ Lab 2 (MCP Fundamentals)
• VS Code พร้อมติดตั้งส่วนขยาย Microsoft Foundry Toolkit
• สภาพแวดล้อม Python 3.10 ขึ้นไป
• Node.js และ npm สำหรับการตั้งค่า Inspector

🏗️ สิ่งที่คุณจะสร้าง

ในบทปฏิบัตินี้ คุณจะสร้าง Weather MCP Server ที่แสดงถึง:

• การใช้งานเซิร์ฟเวอร์ MCP แบบกำหนดเอง
• การผสานรวมกับ Microsoft Foundry Toolkit Agent Builder
• กระบวนการดีบักระดับมืออาชีพ
• รูปแบบการใช้งาน MCP SDK สมัยใหม่

---

🔧 ภาพรวมส่วนประกอบหลัก

🐍 MCP Python SDK

Model Context Protocol Python SDK คือพื้นฐานสำหรับการสร้างเซิร์ฟเวอร์ MCP แบบกำหนดเอง คุณจะใช้เวอร์ชัน 1.9.3 ที่เพิ่มความสามารถในการดีบัก

🔍 MCP Inspector

เครื่องมือดีบักขั้นสูงที่ให้คุณสมบัติดังนี้:

• การตรวจสอบเซิร์ฟเวอร์แบบเรียลไทม์
• การแสดงภาพการทำงานของเครื่องมือ
• การตรวจสอบคำขอ/คำตอบเครือข่าย
• สภาพแวดล้อมการทดสอบแบบอินเทอร์แอคทีฟ

---

📖 การดำเนินการทีละขั้นตอน

ขั้นตอนที่ 1: สร้าง WeatherAgent ใน Agent Builder

1. เปิด Agent Builder ใน VS Code ผ่านส่วนขยาย Microsoft Foundry Toolkit
2. สร้างเอเย่นต์ใหม่ พร้อมการกำหนดค่าดังนี้:
   • ชื่อเอเย่นต์: WeatherAgent

ขั้นตอนที่ 2: เริ่มโปรเจกต์ MCP Server

1. ไปที่ Tools → Add Tool ใน Agent Builder
2. เลือก "MCP Server" จากตัวเลือกที่มี
3. เลือก "Create A new MCP Server"
4. เลือกเทมเพลต python-weather
5. ตั้งชื่อเซิร์ฟเวอร์ของคุณ: weather_mcp

ขั้นตอนที่ 3: เปิดและตรวจสอบโปรเจกต์

1. เปิดโปรเจกต์ที่สร้างขึ้น ใน VS Code
2. ตรวจสอบโครงสร้างโปรเจกต์:

   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. อัปเดต Dependencies ของ Python

แก้ไข pyproject.toml: อัปเดตที่ ./code/weather_mcp/pyproject.toml

4b. อัปเดตการตั้งค่า Inspector

แก้ไข inspector/package.json: อัปเดตที่ ./code/weather_mcp/inspector/package.json

4c. อัปเดต Dependencies ของ Inspector

แก้ไข inspector/package-lock.json: อัปเดตที่ ./code/weather_mcp/inspector/package-lock.json

📝 หมายเหตุ: ไฟล์นี้ประกอบด้วยการกำหนด dependencies จำนวนมาก ด้านล่างคือโครงสร้างสำคัญ — เนื้อหาเต็มช่วยให้การแก้ไข dependencies ถูกต้องสมบูรณ์

⚡ ไฟล์ package-lock เต็ม: ไฟล์ package-lock.json ฉบับสมบูรณ์มี ~3000 บรรทัดของการกำหนด dependencies ด้านบนนี้แสดงแค่โครงสร้างหลัก — ใช้ไฟล์ที่ให้ไว้เพื่อแก้ไข dependencies อย่างครบถ้วน

ขั้นตอนที่ 5: กำหนดค่าการดีบักใน VS Code

หมายเหตุ: กรุณาคัดลอกไฟล์ในเส้นทางที่ระบุเพื่อแทนที่ไฟล์ท้องถิ่นที่เกี่ยวข้อง

5a. อัปเดตการตั้งค่า Launch

แก้ไข .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 Server ของคุณ

ขั้นตอนที่ 6: ติดตั้ง Dependencies

หลังจากแก้ไขการตั้งค่าให้รันคำสั่งดังนี้:

ติดตั้ง Dependencies ของ Python:

uv sync

ติดตั้ง Dependencies ของ Inspector:

cd inspector
npm install

ขั้นตอนที่ 7: ดีบักใน Agent Builder

1. กด F5 หรือใช้การตั้งค่า "Debug in Agent Builder"
2. เลือกการตั้งค่ารวม จากแผงดีบัก
3. รอเซิร์ฟเวอร์เริ่มทำงาน และเปิด Agent Builder
4. ทดสอบเซิร์ฟเวอร์ weather MCP ของคุณ ด้วยคำสั่งภาษาแบบธรรมชาติ

ป้อนคำสั่งเหมือนดังนี้

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

ขั้นตอนที่ 8: ดีบักด้วย MCP Inspector

1. ใช้การตั้งค่า "Debug in Inspector" (Edge หรือ Chrome)
2. เปิดอินเทอร์เฟซ Inspector ที่ http://localhost:6274
3. สำรวจสภาพแวดล้อมการทดสอบแบบอินเทอร์แอคทีฟ:
   • ดูเครื่องมือที่มีให้ใช้
   • ทดสอบการทำงานของเครื่องมือ
   • ตรวจสอบคำขอเครือข่าย
   • ดีบักคำตอบจากเซิร์ฟเวอร์

---

🎯 ผลลัพธ์การเรียนรู้หลัก

เมื่อทำครบถ้วนบทปฏิบัตินี้ คุณได้:

• สร้างเซิร์ฟเวอร์ MCP แบบกำหนดเอง โดยใช้เทมเพลต Microsoft Foundry Toolkit
• อัปเกรด MCP SDK เป็นเวอร์ชันล่าสุด (v1.9.3) เพื่อฟังก์ชันที่ดียิ่งขึ้น
• กำหนดค่ากระบวนการดีบักระดับมืออาชีพ ทั้งใน Agent Builder และ Inspector
• ตั้งค่า MCP Inspector เพื่อทดสอบเซิร์ฟเวอร์แบบอินเทอร์แอคทีฟ
• เชี่ยวชาญการตั้งค่าการดีบักใน VS Code สำหรับการพัฒนา MCP

🔧 คุณสมบัติขั้นสูงที่สำรวจ

คุณสมบัติ	คำอธิบาย	กรณีการใช้งาน
MCP Python SDK v1.9.3	การใช้งานโปรโตคอลล่าสุด	การพัฒนาเซิร์ฟเวอร์สมัยใหม่
MCP Inspector 0.14.0	เครื่องมือดีบักแบบอินเทอร์แอคทีฟ	ทดสอบเซิร์ฟเวอร์แบบเรียลไทม์
VS Code Debugging	สภาพแวดล้อมการพัฒนาแบบครบวงจร	กระบวนการดีบักระดับมืออาชีพ
Agent Builder Integration	การเชื่อมต่อโดยตรงกับ Microsoft Foundry Toolkit	การทดสอบเอเย่นต์แบบครบวงจร

📚 แหล่งข้อมูลเพิ่มเติม

• เอกสาร MCP Python SDK
• คู่มือส่วนขยาย Microsoft Foundry Toolkit
• เอกสารการดีบักใน VS Code
• คำจำกัดความ Model Context Protocol

---

🎉 ขอแสดงความยินดี! คุณทำ Lab 3 สำเร็จเรียบร้อยและสามารถสร้าง ดีบัก และปรับใช้เซิร์ฟเวอร์ MCP แบบกำหนดเองโดยใช้กระบวนการพัฒนามืออาชีพแล้ว

🔜 ไปยังโมดูลถัดไป

พร้อมที่จะนำทักษะ MCP ไปใช้ในกระบวนการพัฒนาจริงหรือยัง? ไปต่อที่ โมดูล 4: การพัฒนา MCP อย่างปฏิบัติ - เซิร์ฟเวอร์โคลน GitHub แบบกำหนดเอง ซึ่งคุณจะได้:

• สร้างเซิร์ฟเวอร์ MCP พร้อมใช้งานจริงที่ทำงานอัตโนมัติบนรีโพส GitHub
• ใช้งานฟังก์ชันโคลนรีโพส GitHub ผ่าน MCP
• ผสานรวมเซิร์ฟเวอร์ MCP แบบกำหนดเองกับ VS Code และโหมด GitHub Copilot Agent
• ทดสอบและปรับใช้เซิร์ฟเวอร์ MCP แบบกำหนดเองในสภาพแวดล้อมผลิต
• เรียนรู้การอัตโนมัติกระบวนการทำงานเพื่อพัฒนาซอฟต์แวร์อย่างมีประสิทธิภาพ

---

ปฏิเสธความรับผิดชอบ: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator ขณะที่เราพยายามให้ความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้