🔧 Modulo 3: Sviluppo Avanzato MCP con AI Toolkit

🎯 Obiettivi di Apprendimento

Al termine di questo laboratorio, sarai in grado di:

✅ Creare server MCP personalizzati utilizzando AI Toolkit
✅ Configurare e utilizzare l’ultima versione del MCP Python SDK (v1.9.3)
✅ Configurare e utilizzare MCP Inspector per il debug
✅ Eseguire il debug dei server MCP sia in Agent Builder che in Inspector
✅ Comprendere i flussi di lavoro avanzati per lo sviluppo di server MCP

📋 Prerequisiti

Completamento del Lab 2 (Fondamenti MCP)
VS Code con estensione AI Toolkit installata
Ambiente Python 3.10+
Node.js e npm per la configurazione di Inspector

🏗️ Cosa Costruirai

In questo laboratorio creerai un Weather MCP Server che dimostra:

Implementazione personalizzata di un server MCP
Integrazione con AI Toolkit Agent Builder
Flussi di lavoro professionali per il debug
Utilizzo moderno del MCP SDK

🔧 Panoramica dei Componenti Principali

🐍 MCP Python SDK

Il Model Context Protocol Python SDK fornisce la base per costruire server MCP personalizzati. Userai la versione 1.9.3 con funzionalità di debug migliorate.

🔍 MCP Inspector

Uno strumento di debug potente che offre:

Monitoraggio in tempo reale del server
Visualizzazione dell’esecuzione degli strumenti
Ispezione delle richieste/risposte di rete
Ambiente di test interattivo

📖 Implementazione Passo-Passo

Passo 1: Crea un WeatherAgent in Agent Builder

Avvia Agent Builder in VS Code tramite l’estensione AI Toolkit
Crea un nuovo agente con la seguente configurazione:
- Nome agente: WeatherAgent

Passo 2: Inizializza il Progetto MCP Server

Vai su Tools → Add Tool in Agent Builder
Seleziona "MCP Server" tra le opzioni disponibili
Scegli "Create A new MCP Server"
Seleziona il template python-weather
Dai un nome al server: weather_mcp

Passo 3: Apri ed Esamina il Progetto

Apri il progetto generato in VS Code

Esamina la struttura del progetto:

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

Passo 4: Aggiorna all’Ultima Versione del MCP SDK

🔍 Perché aggiornare? Vogliamo usare l’ultima versione del MCP SDK (v1.9.3) e del servizio Inspector (0.14.0) per funzionalità avanzate e migliori capacità di debug.

4a. Aggiorna le Dipendenze Python

Modifica pyproject.toml: aggiorna ./code/weather_mcp/pyproject.toml

4b. Aggiorna la Configurazione di Inspector

Modifica inspector/package.json: aggiorna ./code/weather_mcp/inspector/package.json

4c. Aggiorna le Dipendenze di Inspector

Modifica inspector/package-lock.json: aggiorna ./code/weather_mcp/inspector/package-lock.json

📝 Nota: Questo file contiene definizioni estese delle dipendenze. Di seguito la struttura essenziale - il contenuto completo garantisce la corretta risoluzione delle dipendenze.

⚡ Package Lock Completo: Il file package-lock.json completo contiene circa 3000 righe di definizioni di dipendenze. Quanto mostrato sopra rappresenta la struttura chiave - usa il file fornito per la risoluzione completa.

Passo 5: Configura il Debug in VS Code

Nota: Copia il file nel percorso specificato per sostituire il file locale corrispondente

5a. Aggiorna la Configurazione di Avvio

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

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

🚀 Esecuzione e Test del Tuo MCP Server

Passo 6: Installa le Dipendenze

Dopo aver effettuato le modifiche di configurazione, esegui i seguenti comandi:

Installa le dipendenze Python:

uv sync

Installa le dipendenze di Inspector:

cd inspector
npm install

Passo 7: Debug con Agent Builder

Premi F5 o usa la configurazione "Debug in Agent Builder"
Seleziona la configurazione compound dal pannello di debug
Attendi l’avvio del server e l’apertura di Agent Builder
Testa il tuo weather MCP server con query in linguaggio naturale

Inserisci un prompt come questo

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

Passo 8: Debug con MCP Inspector

Usa la configurazione "Debug in Inspector" (Edge o Chrome)
Apri l’interfaccia Inspector su http://localhost:6274
Esplora l’ambiente di test interattivo:
- Visualizza gli strumenti disponibili
- Testa l’esecuzione degli strumenti
- Monitora le richieste di rete
- Esegui il debug delle risposte del server

🎯 Risultati Chiave dell’Apprendimento

Completando questo laboratorio, hai:

Creato un server MCP personalizzato usando i template AI Toolkit
Aggiornato all’ultima versione del MCP SDK (v1.9.3) per funzionalità avanzate
Configurato flussi di lavoro professionali per il debug sia in Agent Builder che in Inspector
Configurato MCP Inspector per test interattivi del server
Padroneggiato le configurazioni di debug in VS Code per lo sviluppo MCP

🔧 Funzionalità Avanzate Esplorate

Funzionalità	Descrizione	Caso d’Uso
MCP Python SDK v1.9.3	Ultima implementazione del protocollo	Sviluppo server moderno
MCP Inspector 0.14.0	Strumento di debug interattivo	Test in tempo reale del server
Debugging in VS Code	Ambiente di sviluppo integrato	Flusso di lavoro professionale per il debug
Integrazione Agent Builder	Connessione diretta con AI Toolkit	Test end-to-end degli agenti

📚 Risorse Aggiuntive

🎉 Congratulazioni! Hai completato con successo il Lab 3 e ora puoi creare, eseguire il debug e distribuire server MCP personalizzati utilizzando flussi di lavoro professionali.

🔜 Prosegui al Modulo Successivo

Pronto ad applicare le tue competenze MCP in un flusso di lavoro di sviluppo reale? Prosegui con Modulo 4: Sviluppo Pratico MCP - Server Clone GitHub Personalizzato dove potrai:

Costruire un server MCP pronto per la produzione che automatizza le operazioni sui repository GitHub
Implementare la funzionalità di clonazione di repository GitHub tramite MCP
Integrare server MCP personalizzati con VS Code e GitHub Copilot Agent Mode
Testare e distribuire server MCP personalizzati in ambienti di produzione
Imparare l’automazione pratica dei flussi di lavoro per sviluppatori

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Pur impegnandoci per garantire accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un umano. Non ci assumiamo alcuna responsabilità per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 Modulo 3: Sviluppo Avanzato MCP con AI Toolkit

🎯 Obiettivi di Apprendimento

📋 Prerequisiti

🏗️ Cosa Costruirai

🔧 Panoramica dei Componenti Principali

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementazione Passo-Passo

Passo 1: Crea un WeatherAgent in Agent Builder

Passo 2: Inizializza il Progetto MCP Server

Passo 3: Apri ed Esamina il Progetto

Passo 4: Aggiorna all’Ultima Versione del MCP SDK

4a. Aggiorna le Dipendenze Python

4b. Aggiorna la Configurazione di Inspector

4c. Aggiorna le Dipendenze di Inspector

Passo 5: Configura il Debug in VS Code

5a. Aggiorna la Configurazione di Avvio

🚀 Esecuzione e Test del Tuo MCP Server

Passo 6: Installa le Dipendenze

Passo 7: Debug con Agent Builder

Passo 8: Debug con MCP Inspector

🎯 Risultati Chiave dell’Apprendimento

🔧 Funzionalità Avanzate Esplorate

📚 Risorse Aggiuntive

🔜 Prosegui al Modulo Successivo

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🔧 Modulo 3: Sviluppo Avanzato MCP con AI Toolkit

🎯 Obiettivi di Apprendimento

📋 Prerequisiti

🏗️ Cosa Costruirai

🔧 Panoramica dei Componenti Principali

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementazione Passo-Passo

Passo 1: Crea un WeatherAgent in Agent Builder

Passo 2: Inizializza il Progetto MCP Server

Passo 3: Apri ed Esamina il Progetto

Passo 4: Aggiorna all’Ultima Versione del MCP SDK

4a. Aggiorna le Dipendenze Python

4b. Aggiorna la Configurazione di Inspector

4c. Aggiorna le Dipendenze di Inspector

Passo 5: Configura il Debug in VS Code

5a. Aggiorna la Configurazione di Avvio

🚀 Esecuzione e Test del Tuo MCP Server

Passo 6: Installa le Dipendenze

Passo 7: Debug con Agent Builder

Passo 8: Debug con MCP Inspector

🎯 Risultati Chiave dell’Apprendimento

🔧 Funzionalità Avanzate Esplorate

📚 Risorse Aggiuntive

🔜 Prosegui al Modulo Successivo