wehub/microsoft--mcp-for-beginners

Fork 0

Files

T

wehub-resource-sync c275ba2868 chore: import upstream snapshot with attribution

2026-07-13 13:31:35 +08:00

12 KiB

Raw Permalink Blame History

🔧 Modul 3: Pengembangan MCP Lanjutan dengan Microsoft Foundry Toolkit

🎯 Tujuan Pembelajaran

Pada akhir lab ini, Anda akan dapat:

✅ Membuat server MCP kustom menggunakan Microsoft Foundry Toolkit
✅ Mengonfigurasi dan menggunakan MCP Python SDK terbaru (v1.9.3)
✅ Menyiapkan dan menggunakan MCP Inspector untuk debugging
✅ Debug server MCP di lingkungan Agent Builder dan Inspector
✅ Memahami alur kerja pengembangan server MCP lanjutan

📋 Prasyarat

Telah menyelesaikan Lab 2 (Dasar-dasar MCP)
VS Code dengan ekstensi Microsoft Foundry Toolkit terpasang
Lingkungan Python 3.10+
Node.js dan npm untuk penyiapan Inspector

🏗️ Apa yang Akan Anda Bangun

Dalam lab ini, Anda akan membuat Weather MCP Server yang menunjukkan:

Implementasi server MCP kustom
Integrasi dengan Agent Builder Microsoft Foundry Toolkit
Alur kerja debugging profesional
Pola penggunaan MCP SDK modern

🔧 Ikhtisar Komponen Inti

🐍 MCP Python SDK

Model Context Protocol Python SDK menyediakan dasar untuk membangun server MCP kustom. Anda akan menggunakan versi 1.9.3 dengan kemampuan debugging yang ditingkatkan.

🔍 MCP Inspector

Alat debugging yang kuat yang menyediakan:

Pemantauan server secara real-time
Visualisasi eksekusi alat
Inspeksi permintaan/response jaringan
Lingkungan pengujian interaktif

📖 Implementasi Langkah demi Langkah

Langkah 1: Buat WeatherAgent di Agent Builder

Buka Agent Builder di VS Code melalui ekstensi Microsoft Foundry Toolkit
Buat agen baru dengan konfigurasi berikut:
- Nama Agen: WeatherAgent

Langkah 2: Inisialisasi Proyek Server MCP

Navigasi ke Tools → Add Tool di Agent Builder
Pilih "MCP Server" dari opsi yang tersedia
Pilih "Create A new MCP Server"
Pilih template python-weather
Beri nama server Anda: weather_mcp

Langkah 3: Buka dan Periksa Proyek

Buka proyek yang dihasilkan di VS Code

Tinjau struktur proyek:

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

Langkah 4: Upgrade ke MCP SDK Terbaru

🔍 Kenapa Upgrade? Kami ingin menggunakan MCP SDK terbaru (v1.9.3) dan layanan Inspector (0.14.0) untuk fitur yang lebih lengkap dan kemampuan debugging yang lebih baik.

4a. Perbarui Dependensi Python

Ubah pyproject.toml: perbarui ./code/weather_mcp/pyproject.toml

4b. Perbarui Konfigurasi Inspector

Ubah inspector/package.json: perbarui ./code/weather_mcp/inspector/package.json

4c. Perbarui Dependensi Inspector

Ubah inspector/package-lock.json: perbarui ./code/weather_mcp/inspector/package-lock.json

📝 Catatan: File ini berisi definisi dependensi yang luas. Di bawah ini adalah struktur penting - isi lengkap memastikan resolusi dependensi yang benar.

⚡ Full Package Lock: package-lock.json lengkap berisi ~3000 baris definisi dependensi. Yang di atas menunjukkan struktur utama - gunakan file yang diberikan untuk resolusi dependensi lengkap.

Langkah 5: Konfigurasi Debugging VS Code

Catatan: Silakan salin file pada jalur yang ditentukan untuk menggantikan file lokal yang sesuai

5a. Perbarui Konfigurasi Launch

Ubah .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
    }
  ]
}

Ubah .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"
    }
  ]
}

🚀 Menjalankan dan Menguji Server MCP Anda

Langkah 6: Instal Dependensi

Setelah melakukan perubahan konfigurasi, jalankan perintah berikut:

Instal dependensi Python:

uv sync

Instal dependensi Inspector:

cd inspector
npm install

Langkah 7: Debug dengan Agent Builder

Tekan F5 atau gunakan konfigurasi "Debug in Agent Builder"
Pilih konfigurasi compound dari panel debug
Tunggu server mulai dan Agent Builder terbuka
Uji server weather MCP Anda dengan kueri bahasa alami

Masukkan prompt seperti ini

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

Langkah 8: Debug dengan MCP Inspector

Gunakan konfigurasi "Debug in Inspector" (Edge atau Chrome)
Buka antarmuka Inspector di http://localhost:6274
Jelajahi lingkungan pengujian interaktif:
- Lihat alat yang tersedia
- Uji eksekusi alat
- Pantau permintaan jaringan
- Debug respons server

🎯 Hasil Pembelajaran Utama

Dengan menyelesaikan lab ini, Anda telah:

Membuat server MCP kustom menggunakan template Microsoft Foundry Toolkit
Meng-upgrade ke MCP SDK terbaru (v1.9.3) untuk fungsionalitas lebih baik
Mengonfigurasi alur kerja debugging profesional untuk Agent Builder dan Inspector
Menyiapkan MCP Inspector untuk pengujian server interaktif
Menguasai konfigurasi debugging VS Code untuk pengembangan MCP

🔧 Fitur Lanjutan yang Dijelajahi

Fitur	Deskripsi	Kasus Penggunaan
MCP Python SDK v1.9.3	Implementasi protokol terbaru	Pengembangan server modern
MCP Inspector 0.14.0	Alat debugging interaktif	Pengujian server real-time
VS Code Debugging	Lingkungan pengembangan terintegrasi	Alur kerja debugging profesional
Integrasi Agent Builder	Koneksi langsung Microsoft Foundry Toolkit	Pengujian agen end-to-end

📚 Sumber Daya Tambahan

🎉 Selamat! Anda telah berhasil menyelesaikan Lab 3 dan kini dapat membuat, debug, serta menerapkan server MCP kustom menggunakan alur kerja pengembangan profesional.

🔜 Lanjut ke Modul Berikutnya

Siap menerapkan keterampilan MCP Anda ke alur kerja pengembangan nyata? Lanjutkan ke Modul 4: Pengembangan MCP Praktis - Server Clone GitHub Kustom di mana Anda akan:

Membuat server MCP siap produksi yang mengotomasi operasi repositori GitHub
Menerapkan fungsi cloning repositori GitHub melalui MCP
Mengintegrasikan server MCP kustom dengan VS Code dan GitHub Copilot Agent Mode
Menguji dan menerapkan server MCP kustom di lingkungan produksi
Mempelajari otomasi alur kerja praktis untuk pengembang

Penafian: Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berupaya untuk mencapai akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

12 KiB Raw Permalink Blame History