wehub/microsoft--mcp-for-beginners
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity
Files
main
microsoft--mcp-for-beginners/translations/nl/10-StreamliningAIWorkflowsBuildingAnMCPServerWithAIToolkit/lab3
T
History

README.md

🔧 Module 3: Geavanceerde MCP-ontwikkeling met Microsoft Foundry Toolkit

Duration Microsoft Foundry Toolkit Python MCP SDK Inspector

🎯 Leerdoelen

Aan het einde van deze lab ben je in staat om:

  • ✅ Aangepaste MCP-servers te maken met behulp van de Microsoft Foundry Toolkit
  • ✅ De nieuwste MCP Python SDK (v1.9.3) te configureren en te gebruiken
  • ✅ De MCP Inspector in te stellen en te gebruiken voor debugging
  • ✅ MCP-servers te debuggen in zowel Agent Builder als Inspector omgevingen
  • ✅ Geavanceerde workflows voor MCP-serverontwikkeling te begrijpen

📋 Vereisten

  • Voltooiing van Lab 2 (MCP Fundamentals)
  • VS Code met geïnstalleerde Microsoft Foundry Toolkit extensie
  • Python 3.10+ omgeving
  • Node.js en npm voor de Inspector installatie

🏗️ Wat je bouwt

In deze lab maak je een Weather MCP Server die de volgende aspecten demonstreert:

  • Implementatie van een aangepaste MCP-server
  • Integratie met Microsoft Foundry Toolkit Agent Builder
  • Professionele debugging-workflows
  • Moderne MCP SDK gebruikspatronen

🔧 Overzicht Kerncomponenten

🐍 MCP Python SDK

De Model Context Protocol Python SDK biedt de basis voor het bouwen van aangepaste MCP-servers. Je gebruikt versie 1.9.3 met verbeterde debugging-mogelijkheden.

🔍 MCP Inspector

Een krachtig debugging-instrument dat het volgende biedt:

  • Real-time server monitoring
  • Visualisatie van tool-uitvoering
  • Inspectie van netwerkverzoeken/-antwoorden
  • Interactieve testomgeving

📖 Stapsgewijze Implementatie

Stap 1: Maak een WeatherAgent in Agent Builder

  1. Start Agent Builder in VS Code via de Microsoft Foundry Toolkit extensie
  2. Maak een nieuwe agent met de volgende configuratie:
    • Agent Naam: WeatherAgent

Agent Creation

Stap 2: Initialiseer MCP Server Project

  1. Ga naar Tools → Add Tool in Agent Builder
  2. Selecteer "MCP Server" uit de beschikbare opties
  3. Kies "Create A new MCP Server"
  4. Selecteer de python-weather template
  5. Noem je server: weather_mcp

Python Template Selection

Stap 3: Open en Bekijken van het Project

  1. Open het gegenereerde project in VS Code
  2. Bekijk de projectstructuur: 
    weather_mcp/
├── src/
│   ├── __init__.py
│   └── server.py
├── inspector/
│   ├── package.json
│   └── package-lock.json
├── .vscode/
│   ├── launch.json
│   └── tasks.json
├── pyproject.toml
└── README.md

Stap 4: Upgrade naar de nieuwste MCP SDK

🔍 Waarom upgraden? We willen de nieuwste MCP SDK (v1.9.3) en de Inspector service (0.14.0) gebruiken voor verbeterde functionaliteiten en betere debuggingmogelijkheden.

4a. Update Python Afhankelijkheden

Bewerk pyproject.toml: update ./code/weather_mcp/pyproject.toml

4b. Update Inspector Configuratie

Bewerk inspector/package.json: update ./code/weather_mcp/inspector/package.json

4c. Update Inspector Afhankelijkheden

Bewerk inspector/package-lock.json: update ./code/weather_mcp/inspector/package-lock.json

📝 Opmerking: Dit bestand bevat uitgebreide afhankelijkheidsdefinities. Hieronder staat de essentiële structuur – de volledige inhoud zorgt voor correcte afhankelijkheidsresolutie.

⚡ Volledige Package Lock: Het volledige package-lock.json-bestand bevat ~3000 regels met afhankelijkheidsdefinities. Bovenstaand bevat de sleutelstructuur – gebruik het aangeleverde bestand voor volledige afhankelijkheidsresolutie.

Stap 5: Configureer VS Code Debugging

Opmerking: kopieer het bestand op het opgegeven pad om het overeenkomstige lokale bestand te vervangen

5a. Update Launch Configuratie

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

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

🚀 Je MCP Server Uitvoeren en Testen

Stap 6: Installeer Afhankelijkheden

Na het aanbrengen van de configuratiewijzigingen, voer je de volgende commando's uit:

Installeer Python-afhankelijkheden:

uv sync

Installeer Inspector-afhankelijkheden:

cd inspector
npm install

Stap 7: Debuggen met Agent Builder

  1. Druk op F5 of gebruik de configuratie "Debug in Agent Builder"
  2. Selecteer de samengestelde configuratie vanuit het debugpaneel
  3. Wacht tot de server is gestart en Agent Builder opent
  4. Test je weather MCP-server met natuurlijke taal queries

Voer een prompt in zoals deze

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

Agent Builder Debug Result

Stap 8: Debuggen met MCP Inspector

  1. Gebruik de configuratie "Debug in Inspector" (Edge of Chrome)
  2. Open de Inspector interface via http://localhost:6274
  3. Verken de interactieve testomgeving:
    • Bekijk beschikbare tools
    • Test tool-uitvoering
    • Monitor netwerkverzoeken
    • Debug serverantwoorden

MCP Inspector Interface

🎯 Belangrijkste Leerresultaten

Door deze lab te voltooien, heb je:

  • Een aangepaste MCP-server aangemaakt met Microsoft Foundry Toolkit templates
  • Geüpgraded naar de nieuwste MCP SDK (v1.9.3) voor verbeterde functionaliteit
  • Professionele debugging workflows geconfigureerd voor zowel Agent Builder als Inspector
  • De MCP Inspector ingericht voor interactieve servertests
  • VS Code debugging configuraties onder de knie gekregen voor MCP-ontwikkeling

🔧 Geavanceerde Functies Onderzocht

Functie Beschrijving Gebruikssituatie
MCP Python SDK v1.9.3 Laatste protocolimplementatie Moderne serverontwikkeling
MCP Inspector 0.14.0 Interactief debugging-instrument Real-time servertests
VS Code Debugging Geïntegreerde ontwikkelomgeving Professionele debugging workflow
Agent Builder Integratie Directe Microsoft Foundry Toolkit koppeling End-to-end agent testen

📚 Aanvullende Bronnen

🎉 Gefeliciteerd! Je hebt Lab 3 succesvol afgerond en kunt nu aangepaste MCP-servers creëren, debuggen en uitrollen met professionele ontwikkelworkflows.

🔜 Ga verder naar de volgende module

Klaar om je MCP-vaardigheden toe te passen in een echte ontwikkelworkflow? Ga verder naar Module 4: Praktische MCP-ontwikkeling - Aangepaste GitHub Clone Server, waar je:

  • Een productieklare MCP-server bouwt die GitHub-repositorybewerkingen automatiseert
  • Functionaliteit implementeert voor het klonen van GitHub repositories via MCP
  • Aangepaste MCP-servers integreert met VS Code en GitHub Copilot Agent Mode
  • Aangepaste MCP-servers test en uitrolt in productieomgevingen
  • Praktische workflowautomatisering voor ontwikkelaars leert

Disclaimer: Dit document is vertaald met behulp van de AI vertaaldienst Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

Reference in New Issue View Git Blame Copy Permalink