🔧 Module 3: Desarrollo Avanzado de MCP con AI Toolkit

🎯 Objetivos de Aprendizaje

Al finalizar este laboratorio, podrás:

✅ Crear servidores MCP personalizados usando AI Toolkit
✅ Configurar y utilizar la última versión del MCP Python SDK (v1.9.3)
✅ Configurar y usar MCP Inspector para depuración
✅ Depurar servidores MCP tanto en Agent Builder como en Inspector
✅ Comprender flujos de trabajo avanzados para desarrollo de servidores MCP

📋 Requisitos Previos

Haber completado el Laboratorio 2 (Fundamentos de MCP)
VS Code con la extensión AI Toolkit instalada
Entorno Python 3.10+
Node.js y npm para configurar Inspector

🏗️ Lo Que Vas a Construir

En este laboratorio crearás un Servidor MCP de Clima que demostrará:

Implementación personalizada de un servidor MCP
Integración con AI Toolkit Agent Builder
Flujos de trabajo profesionales de depuración
Uso moderno del SDK MCP

🔧 Resumen de Componentes Clave

🐍 MCP Python SDK

El SDK Python del Protocolo de Contexto de Modelo proporciona la base para construir servidores MCP personalizados. Usarás la versión 1.9.3 con capacidades mejoradas de depuración.

🔍 MCP Inspector

Una herramienta potente para depuración que ofrece:

Monitoreo en tiempo real del servidor
Visualización de la ejecución de herramientas
Inspección de solicitudes y respuestas de red
Entorno interactivo de pruebas

📖 Implementación Paso a Paso

Paso 1: Crear un WeatherAgent en Agent Builder

Lanza Agent Builder en VS Code a través de la extensión AI Toolkit
Crea un nuevo agente con la siguiente configuración:
- Nombre del agente: WeatherAgent

Paso 2: Inicializar el Proyecto del Servidor MCP

Navega a Tools → Add Tool en Agent Builder
Selecciona "MCP Server" de las opciones disponibles
Elige "Create A new MCP Server"
Selecciona la plantilla python-weather
Nombra tu servidor: weather_mcp

Paso 3: Abrir y Examinar el Proyecto

Abre el proyecto generado en VS Code

Revisa la estructura del proyecto:

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

Paso 4: Actualizar al Último MCP SDK

🔍 ¿Por qué actualizar? Queremos usar el último MCP SDK (v1.9.3) y el servicio Inspector (0.14.0) para aprovechar nuevas funcionalidades y mejorar la depuración.

4a. Actualizar Dependencias de Python

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

4b. Update Inspector Configuration

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

4c. Update Inspector Dependencies

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

📝 Note: This file contains extensive dependency definitions. Below is the essential structure - the full content ensures proper dependency resolution.

⚡ Full Package Lock: The complete package-lock.json contains ~3000 lines of dependency definitions. The above shows the key structure - use the provided file for complete dependency resolution.

Step 5: Configure VS Code Debugging

Note: Please copy the file in the specified path to replace the corresponding local file

5a. Update Launch Configuration

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

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

🚀 Ejecutar y Probar tu Servidor MCP

Paso 6: Instalar Dependencias

Después de hacer los cambios de configuración, ejecuta los siguientes comandos:

Instalar dependencias de Python:

uv sync

Instalar dependencias de Inspector:

cd inspector
npm install

Paso 7: Depurar con Agent Builder

Presiona F5 o usa la configuración "Debug in Agent Builder"
Selecciona la configuración compuesta en el panel de depuración
Espera a que el servidor inicie y se abra Agent Builder
Prueba tu servidor MCP de clima con consultas en lenguaje natural

Ejemplo de entrada:

SYSTEM_PROMPT

You are my weather assistant

USER_PROMPT

How's the weather like in Seattle

Paso 8: Depurar con MCP Inspector

Usa la configuración "Debug in Inspector" (Edge o Chrome)
Abre la interfaz de Inspector en http://localhost:6274
Explora el entorno interactivo de pruebas:
- Visualiza las herramientas disponibles
- Prueba la ejecución de herramientas
- Monitorea solicitudes de red
- Depura las respuestas del servidor

🎯 Resultados Clave de Aprendizaje

Al completar este laboratorio, has:

Creado un servidor MCP personalizado usando plantillas de AI Toolkit
Actualizado al último MCP SDK (v1.9.3) para funcionalidades mejoradas
Configurado flujos de trabajo profesionales de depuración para Agent Builder e Inspector
Configurado MCP Inspector para pruebas interactivas del servidor
Dominado configuraciones de depuración en VS Code para desarrollo MCP

🔧 Funcionalidades Avanzadas Exploradas

Funcionalidad	Descripción	Caso de Uso
MCP Python SDK v1.9.3	Última implementación del protocolo	Desarrollo moderno de servidores
MCP Inspector 0.14.0	Herramienta interactiva de depuración	Pruebas en tiempo real del servidor
Depuración en VS Code	Entorno integrado de desarrollo	Flujo profesional de depuración
Integración con Agent Builder	Conexión directa con AI Toolkit	Pruebas completas de agentes

📚 Recursos Adicionales

🎉 ¡Felicidades! Has completado con éxito el Laboratorio 3 y ahora puedes crear, depurar y desplegar servidores MCP personalizados usando flujos de trabajo profesionales de desarrollo.

🔜 Continúa al Siguiente Módulo

¿Listo para aplicar tus habilidades MCP en un flujo de trabajo de desarrollo real? Continúa a Módulo 4: Desarrollo Práctico de MCP - Servidor Clone Personalizado de GitHub donde podrás:

Construir un servidor MCP listo para producción que automatice operaciones de repositorios GitHub
Implementar funcionalidad de clonación de repositorios GitHub vía MCP
Integrar servidores MCP personalizados con VS Code y GitHub Copilot Agent Mode
Probar y desplegar servidores MCP personalizados en entornos de producción
Aprender automatización práctica de flujos de trabajo para desarrolladores

Prohlášení o vyloučení odpovědnosti:
Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho mateřském jazyce by měl být považován za závazný zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔧 Module 3: Desarrollo Avanzado de MCP con AI Toolkit

🎯 Objetivos de Aprendizaje

📋 Requisitos Previos

🏗️ Lo Que Vas a Construir

🔧 Resumen de Componentes Clave

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementación Paso a Paso

Paso 1: Crear un WeatherAgent en Agent Builder

Paso 2: Inicializar el Proyecto del Servidor MCP

Paso 3: Abrir y Examinar el Proyecto

Paso 4: Actualizar al Último MCP SDK

4a. Actualizar Dependencias de Python

4b. Update Inspector Configuration

4c. Update Inspector Dependencies

Step 5: Configure VS Code Debugging

5a. Update Launch Configuration

🚀 Ejecutar y Probar tu Servidor MCP

Paso 6: Instalar Dependencias

Paso 7: Depurar con Agent Builder

Paso 8: Depurar con MCP Inspector

🎯 Resultados Clave de Aprendizaje

🔧 Funcionalidades Avanzadas Exploradas

📚 Recursos Adicionales

🔜 Continúa al Siguiente Módulo

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🔧 Module 3: Desarrollo Avanzado de MCP con AI Toolkit

🎯 Objetivos de Aprendizaje

📋 Requisitos Previos

🏗️ Lo Que Vas a Construir

🔧 Resumen de Componentes Clave

🐍 MCP Python SDK

🔍 MCP Inspector

📖 Implementación Paso a Paso

Paso 1: Crear un WeatherAgent en Agent Builder

Paso 2: Inicializar el Proyecto del Servidor MCP

Paso 3: Abrir y Examinar el Proyecto

Paso 4: Actualizar al Último MCP SDK

4a. Actualizar Dependencias de Python

4b. Update Inspector Configuration

4c. Update Inspector Dependencies

Step 5: Configure VS Code Debugging

5a. Update Launch Configuration

🚀 Ejecutar y Probar tu Servidor MCP

Paso 6: Instalar Dependencias

Paso 7: Depurar con Agent Builder

Paso 8: Depurar con MCP Inspector

🎯 Resultados Clave de Aprendizaje

🔧 Funcionalidades Avanzadas Exploradas

📚 Recursos Adicionales

🔜 Continúa al Siguiente Módulo