🔧 Modul 3: Pengembangan MCP Lanjutan dengan AI Toolkit

🎯 Tujuan Pembelajaran

Di akhir lab ini, Anda akan mampu:

✅ Membuat server MCP kustom menggunakan AI Toolkit
✅ Mengonfigurasi dan menggunakan MCP Python SDK terbaru (v1.9.3)
✅ Menyiapkan dan memanfaatkan MCP Inspector untuk debugging
✅ Melakukan debugging server MCP di lingkungan Agent Builder dan Inspector
✅ Memahami alur kerja pengembangan server MCP tingkat lanjut

📋 Prasyarat

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

🏗️ Apa yang Akan Anda Bangun

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

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

🔧 Gambaran Komponen Utama

🐍 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 tool
Inspeksi permintaan/respons jaringan
Lingkungan pengujian interaktif

📖 Implementasi Langkah demi Langkah

Langkah 1: Buat WeatherAgent di Agent Builder

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

Langkah 2: Inisialisasi Proyek Server MCP

Pergi 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 telah dibuat 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? Kita 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

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

4b. Perbarui Konfigurasi Inspector

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

4c. Perbarui Dependensi Inspector

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

📝 Catatan: File ini berisi definisi dependensi yang sangat lengkap. Di bawah ini adalah struktur pentingnya - isi lengkap memastikan resolusi dependensi yang tepat.

⚡ Paket Lock Lengkap: File package-lock.json lengkap berisi sekitar 3000 baris definisi dependensi. Di atas hanya menunjukkan struktur utama - gunakan file yang disediakan untuk resolusi dependensi penuh.

Langkah 5: Konfigurasi Debugging di VS Code

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

5a. Perbarui Konfigurasi Launch

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

Edit .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 berjalan dan Agent Builder terbuka
Uji server weather MCP Anda dengan pertanyaan dalam 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 tool yang tersedia
- Uji eksekusi tool
- Pantau permintaan jaringan
- Debug respons server

🎯 Hasil Pembelajaran Utama

Dengan menyelesaikan lab ini, Anda telah:

Membuat server MCP kustom menggunakan template AI Toolkit
Meng-upgrade ke MCP SDK terbaru (v1.9.3) untuk fungsi yang 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 Dieksplorasi

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
Debugging VS Code	Lingkungan pengembangan terintegrasi	Alur kerja debugging profesional
Integrasi Agent Builder	Koneksi langsung dengan AI Toolkit	Pengujian agen end-to-end

📚 Sumber Daya Tambahan

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

🔜 Lanjut ke Modul Berikutnya

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

Membangun server MCP siap produksi yang mengotomatisasi operasi repositori GitHub
Mengimplementasikan fungsi kloning 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 otomatisasi alur kerja praktis untuk pengembang

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berupaya untuk mencapai akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. 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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 Modul 3: Pengembangan MCP Lanjutan dengan AI Toolkit

🎯 Tujuan Pembelajaran

📋 Prasyarat

🏗️ Apa yang Akan Anda Bangun

🔧 Gambaran Komponen Utama

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementasi Langkah demi Langkah

Langkah 1: Buat WeatherAgent di Agent Builder

Langkah 2: Inisialisasi Proyek Server MCP

Langkah 3: Buka dan Periksa Proyek

Langkah 4: Upgrade ke MCP SDK Terbaru

4a. Perbarui Dependensi Python

4b. Perbarui Konfigurasi Inspector

4c. Perbarui Dependensi Inspector

Langkah 5: Konfigurasi Debugging di VS Code

5a. Perbarui Konfigurasi Launch

🚀 Menjalankan dan Menguji Server MCP Anda

Langkah 6: Instal Dependensi

Langkah 7: Debug dengan Agent Builder

Langkah 8: Debug dengan MCP Inspector

🎯 Hasil Pembelajaran Utama

🔧 Fitur Lanjutan yang Dieksplorasi

📚 Sumber Daya Tambahan

🔜 Lanjut ke Modul Berikutnya

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🔧 Modul 3: Pengembangan MCP Lanjutan dengan AI Toolkit

🎯 Tujuan Pembelajaran

📋 Prasyarat

🏗️ Apa yang Akan Anda Bangun

🔧 Gambaran Komponen Utama

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementasi Langkah demi Langkah

Langkah 1: Buat WeatherAgent di Agent Builder

Langkah 2: Inisialisasi Proyek Server MCP

Langkah 3: Buka dan Periksa Proyek

Langkah 4: Upgrade ke MCP SDK Terbaru

4a. Perbarui Dependensi Python

4b. Perbarui Konfigurasi Inspector

4c. Perbarui Dependensi Inspector

Langkah 5: Konfigurasi Debugging di VS Code

5a. Perbarui Konfigurasi Launch

🚀 Menjalankan dan Menguji Server MCP Anda

Langkah 6: Instal Dependensi

Langkah 7: Debug dengan Agent Builder

Langkah 8: Debug dengan MCP Inspector

🎯 Hasil Pembelajaran Utama

🔧 Fitur Lanjutan yang Dieksplorasi

📚 Sumber Daya Tambahan

🔜 Lanjut ke Modul Berikutnya