Cómo usar el servidor MCP de VSCode

Introducción al servidor MCP de VSCode

MCP (Protocolo de Contexto del Modelo) es un estándar abierto innovador que transforma la forma en que los modelos de IA interactúan con herramientas y servicios externos a través de una interfaz unificada. En VSCode, la compatibilidad con MCP mejora el modo agente de GitHub Copilot al permitirte conectar cualquier servidor compatible con MCP a tus flujos de trabajo de codificación impulsados por IA. Este tutorial te guiará a través de todo lo que necesitas saber sobre el uso de servidores MCP con VSCode, desde la configuración inicial hasta las configuraciones avanzadas y la resolución de problemas.

Qué es el servidor MCP de VSCode

El Protocolo de Contexto del Modelo permite a los modelos de IA descubrir e interactuar con herramientas, aplicaciones y fuentes de datos externas a través de una interfaz estandarizada. Al usar VSCode con el modo agente de Copilot, la IA puede aprovechar varias herramientas para realizar tareas como operaciones de archivos, acceder a bases de datos o llamar a APIs según tus solicitudes.

MCP sigue una arquitectura cliente-servidor:

• Clientes MCP (como VSCode) se conectan a servidores MCP y solicitan acciones en nombre del modelo de IA
• Servidores MCP proporcionan herramientas que exponen funcionalidades específicas a través de interfaces bien definidas
• El protocolo define formatos de mensaje para la comunicación entre clientes y servidores, cubriendo el descubrimiento de herramientas, la invocación y el manejo de respuestas

Por ejemplo, un servidor MCP del sistema de archivos podría proporcionar herramientas para leer, escribir o buscar archivos y directorios. El servidor MCP de GitHub ofrece herramientas para listar repositorios, crear solicitudes de extracción o gestionar incidencias. Estos servidores pueden ejecutarse localmente en tu máquina o alojarse de forma remota.

Configurando tu primer servidor MCP de VSCode

Paso 1: Añadiendo un servidor MCP a tu espacio de trabajo

Hay varias formas de añadir un servidor MCP a VSCode:

Usando el archivo de configuración del espacio de trabajo:

• Crea un archivo .vscode/mcp.json en tu espacio de trabajo
• Selecciona el botón "Añadir servidor" para añadir una plantilla para un nuevo servidor
• VSCode proporciona IntelliSense para la configuración del servidor MCP

Usando la paleta de comandos:

• Ejecuta el comando MCP: Add Server
• Elige "Configuración del espacio de trabajo" para crear el archivo .vscode/mcp.json en tu espacio de trabajo

Usando la configuración de usuario para acceso global:

• Abre la paleta de comandos y ejecuta MCP: Add Server
• Selecciona "Configuración de usuario" para añadir la configuración del servidor MCP globalmente

Paso 2: Comprendiendo el formato de configuración del servidor MCP de VSCode

La configuración del servidor MCP sigue un formato JSON específico:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "API Key",
      "password": true
    }
  ],
  "servers": {
    "MyServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-example"],
      "env": {
        "API_KEY": "${input:api-key}"
      }
    }
  }
}

Los elementos clave son:

• inputs: Define marcadores de posición personalizados para los valores de configuración
• servers: Contiene la lista de servidores MCP
• type: Tipo de conexión ("stdio" o "sse")
• command: Comando para iniciar el ejecutable del servidor
• args: Array de argumentos pasados al comando
• env: Variables de entorno para el servidor

Tipos de conexión y opciones de configuración del servidor MCP de VSCode

Conexión STDIO para el servidor MCP de VSCode

Para conexiones estándar de entrada/salida:

"MyServer": {
  "type": "stdio",
  "command": "npx",
  "args": ["server.js", "--port", "3000"],
  "env": {"API_KEY": "${input:api-key}"}
}

Conexión SSE para el servidor MCP de VSCode

Para conexiones de eventos enviados por el servidor:

"MyRemoteServer": {
  "type": "sse",
  "url": "http://api.example.com/sse",
  "headers": {"VERSION": "1.2"}
}

Usando variables en la configuración del servidor MCP de VSCode

Puedes usar variables predefinidas en tu configuración:

"MyServer": {
  "type": "stdio",
  "command": "node",
  "args": ["${workspaceFolder}/server.js"]
}

Ejemplos de configuración avanzada del servidor MCP de VSCode

Aquí tienes un ejemplo más completo que muestra múltiples servidores y variables de entrada:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    },
    "Fetch": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "RemoteServer": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": {"VERSION": "1.2"}
    }
  }
}

Usando herramientas MCP de VSCode en modo agente

Una vez que hayas configurado tus servidores MCP, puedes usar sus herramientas en el modo agente de Copilot:

1. Abre la vista de chat (Windows, Linux: Ctrl+Alt+I, Mac: ⌃⌘I)
2. Selecciona el modo "Agente" en el menú desplegable
3. Haz clic en el botón "Herramientas" para ver las herramientas disponibles
4. Selecciona o deselecciona las herramientas según sea necesario
5. Introduce tu solicitud en la entrada del chat

Cuando se invoca una herramienta, deberás confirmar la acción antes de que se ejecute. Puedes configurar VSCode para que confirme automáticamente herramientas específicas para la sesión actual, el espacio de trabajo o todas las invocaciones futuras utilizando el menú desplegable del botón "Continuar".

Gestionando servidores y herramientas MCP de VSCode

Viendo y gestionando servidores

Ejecuta el comando MCP: List Servers desde la paleta de comandos para ver tus servidores MCP configurados. Desde esta vista, puedes:

• Iniciar, detener o reiniciar servidores
• Ver configuraciones del servidor
• Acceder a los registros del servidor para la resolución de problemas

Referencias directas a herramientas en el servidor MCP de VSCode

Puedes hacer referencia directamente a una herramienta en tu solicitud escribiendo # seguido del nombre de la herramienta. Esto funciona en todos los modos de chat (pregunta, edición y modo agente).

Configuración de línea de comandos para el servidor MCP de VSCode

Puedes añadir servidores MCP usando la línea de comandos de VSCode:

code --add-mcp "{\"name\":\"my-server\",\"command\":\"uvx\",\"args\":[\"mcp-server-fetch\"]}"

Resolución de problemas del servidor MCP de VSCode

Cuando VSCode encuentra problemas con el servidor MCP, muestra un indicador de error en la vista de chat. Para diagnosticar problemas:

1. Haz clic en la notificación de error en la vista de chat
2. Selecciona "Mostrar salida" para ver los registros del servidor
3. Alternativamente, ejecuta MCP: List Servers desde la paleta de comandos, selecciona el servidor y elige "Mostrar salida"

Los problemas comunes incluyen:

• Configuración incorrecta del servidor
• Dependencias faltantes
• Problemas de conectividad de red para servidores remotos
• Problemas de permisos para ejecutables locales

Creando tu propio servidor MCP de VSCode

Si quieres desarrollar tu propio servidor MCP, puedes usar cualquier lenguaje de programación capaz de manejar stdout. Hay varios SDK oficiales disponibles:

• TypeScript SDK
• Python SDK
• Java SDK
• Kotlin SDK
• C# SDK

Tu servidor debe implementar el estándar MCP que define cómo se descubren, invocan y formatean las respuestas las herramientas.

Autodescubrimiento e integración del servidor MCP de VSCode

VSCode puede detectar y reutilizar automáticamente los servidores MCP definidos en otras herramientas, como Claude Desktop. Puedes habilitar el autodescubrimiento con la configuración chat.mcp.discovery.enabled en tu configuración de VSCode.

Preguntas frecuentes: Preguntas comunes sobre el servidor MCP de VSCode

¿Puedo controlar qué herramientas MCP se utilizan?

Sí, puedes activar/desactivar herramientas específicas en la interfaz del modo Agente, hacer referencia directamente a las herramientas con el prefijo # en tus solicitudes, o usar .github/copilot-instructions.md para un control más avanzado.

¿Son seguros los servidores MCP?

VSCode implementa medidas de seguridad, como requerir confirmación antes de ejecutar herramientas y almacenar de forma segura entradas confidenciales como claves API. Sin embargo, solo debes usar servidores MCP de fuentes confiables.

¿Puedo usar servidores MCP con otros asistentes de IA?

MCP es un estándar abierto diseñado para funcionar con múltiples modelos de IA. Si bien VSCode actualmente lo integra con GitHub Copilot, el protocolo es compatible con otros sistemas de IA que admiten el estándar.

Conclusión: Maximizando el potencial del servidor MCP de VSCode

Los servidores MCP extienden significativamente las capacidades de los asistentes de IA en VSCode al proporcionar acceso estandarizado a herramientas y servicios externos. Siguiendo esta guía, ahora puedes:

• Configurar servidores MCP en tu entorno VSCode
• Usar herramientas MCP con el modo agente de GitHub Copilot
• Gestionar y solucionar problemas de tus servidores MCP
• Crear tus propios servidores MCP si es necesario

El Protocolo de Contexto del Modelo aún está evolucionando, con un ecosistema creciente de servidores y herramientas disponibles para la integración con tus proyectos. Al dominar los servidores MCP de VSCode, te estás posicionando a la vanguardia del desarrollo asistido por IA, permitiendo flujos de trabajo de codificación más potentes y eficientes.

Sigue explorando el ecosistema MCP y experimenta con diferentes servidores para encontrar las herramientas que mejor mejoren tu proceso de desarrollo. Con la configuración adecuada y la comprensión del protocolo, puedes transformar tu asistente de IA en un socio de codificación verdaderamente poderoso.