Generar imágenes en VS Code: Guía de Copilot MCP

Un servidor MCP para VS Code es una caja de herramientas externa que el modo agente de GitHub Copilot puede invocar directamente desde el chat: un solo archivo JSON en tu repositorio basta para que Copilot adquiera herramientas de las que sus modelos carecen, incluida la generación de imágenes. Copilot puede escribir componentes y refactorizar pruebas todo el día, pero ningún modelo subyacente puede crear un archivo de imagen por sí mismo. Al añadir un servidor de generación, pedirle "haz un banner 16:9 para este README" se convierte en una simple instrucción de chat que genera un archivo real en assets/.

Si solo venías buscando esto, aquí tienes toda la configuración. Crea una API key en tu perfil de BananaBanana y coloca este contenido en el archivo .vscode/mcp.json en la raíz de tu repositorio:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

Inicia el servidor (VS Code muestra una sugerencia de inicio directamente dentro del archivo), pega tu clave una vez cuando se te solicite, y listo. El archivo no contiene ningún secreto, por lo que es totalmente seguro subirlo a tu repositorio. Sin procesos locales, sin cuentas de Google Cloud y sin suscripciones obligatorias: las imágenes se facturan desde $0.03 de tu saldo prepago, y los videos desde $0.10. Ambas imágenes de demostración que verás abajo fueron generadas usando una clave activa a través del mismo endpoint HTTP al que apunta esta configuración, mientras escribía este artículo; los detalles y la factura de medios de $0.55 se detallan más adelante.

¿Por qué enseñar a GitHub Copilot a generar imágenes?

Porque los repositorios suelen necesitar imágenes en los momentos menos oportunos. Por ejemplo, una portada atractiva para el README para que la página de tu proyecto no empiece con un bloque frío de insignias, o un banner para la documentación. Dejando de lado las capturas de pantalla, crear cualquiera de estas imágenes solía requerir dar un rodeo: abrir una pestaña del navegador, escribir el prompt, descargar el archivo, renombrarlo, arrastrarlo al repositorio y volver al editor. Fácilmente diez minutos por recurso si todo salía bien.

Con un servidor MCP, Copilot ejecuta todo ese flujo de trabajo de forma automática en su modo agente. Escribe el prompt, llama a generate_image, descarga el archivo en la carpeta que le indiques y actualiza la referencia en el archivo markdown. Tu único trabajo es revisar la diferencia en el código.

La razón de mayor peso es el trabajo en equipo, y es justo el motivo por el cual esta guía se presenta como un artículo independiente en lugar de ser un simple párrafo en la guía de Cursor. El archivo .vscode/mcp.json es parte de la configuración del espacio de trabajo. Súbelo una vez a tu repositorio y cada desarrollador que lo clone tendrá la caja de herramientas de imágenes lista desde el primer momento en que abra el editor; VS Code se encargará de pedirle a cada persona su propia clave. Una sola configuración, una clave por persona y cero credenciales expuestas en git.

También existen servidores MCP locales para generar imágenes, y son una buena opción si disfrutas ejecutando procesos de Node de manera local y configurando tu propia API key de Google con sus respectivos límites de uso. La opción remota evita todo ese trabajo: el endpoint ya se ejecuta en nuestra infraestructura, dentro de la misma arquitectura del generador web de BananaBanana, y tu única credencial es una clave bb_live_ que puedes revocar en cualquier momento.

¿Cómo configurar mcp.json en VS Code?

Los detalles de esta configuración han sido verificados con la documentación oficial de MCP en VS Code con fecha del 11 de julio de 2026. El proceso consta de tres sencillos pasos.

Primero, regístrate y ve a Profile → MCP API Keys. La clave se muestra solo una vez y se almacena de forma encriptada en nuestros servidores, así que asegúrate de copiarla de inmediato. Las cuentas nuevas comienzan con un saldo inicial de $0.20, lo que equivale a unas seis imágenes de prueba en nuestro modelo más económico.

Segundo, crea la configuración. Puedes usar cualquiera de estas dos ubicaciones:

• .vscode/mcp.json dentro del repositorio (esta es la que se recomienda subir a git).
• Un archivo mcp.json a nivel de usuario (Paleta de comandos → MCP: Open User Configuration) que te acompañará en todos tus espacios de trabajo.

El fragmento de código superior utiliza el mecanismo de inputs, que es sin duda la forma más elegante de gestionar secretos que he visto en cualquier cliente MCP. La variable ${input:bb-api-key} le indica a VS Code que debe solicitar el valor la primera vez que se inicie el servidor. Al usar "password": true, lo que escribas se mantendrá oculto, y el valor se guardará de forma segura en el almacenamiento encriptado del sistema, no en el propio archivo. Si lo comparamos con Cursor, donde la interpolación de ${env:…} depende de que el editor realmente tenga acceso a las variables de entorno de tu terminal (un fallo silencioso muy común en aplicaciones abiertas desde la interfaz gráfica), vemos que VS Code resuelve este problema por completo.

Tercero, inicia el servidor: Paleta de comandos → MCP: List Servers → bananabanana → Start, o bien haz clic en la sugerencia que aparece directamente en el archivo JSON. Abre el chat de Copilot en modo agente, revisa la lista de herramientas disponibles y deberías ver siete de ellas, desde list_models hasta list_generations. En nuestra página del servidor MCP mantenemos una tabla de compatibilidad para cada cliente verificado; la fila correspondiente a VS Code es la que detallamos en este artículo:

¿No aparece nada? La sección de peculiaridades detalla los tres motivos habituales, y uno de ellos es una directiva de la organización en GitHub que no podrás solucionar de forma directa desde tu editor.

Caso de uso: Recursos para el README y la documentación directo en el repositorio

El escenario que inspiró este artículo es el siguiente: tu equipo publica un proyecto de código abierto de una herramienta CLI y el repositorio necesita una imagen de cabecera para el README, además de otra imagen para la sección de inicio rápido de la documentación. En el chat de Copilot (en modo agente) solicitas el banner, y el agente redacta un prompt con estilo fotográfico para invocar la herramienta. Aquí tienes el registro real de la llamada, con su identificador de tarea correspondiente:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Apenas veinte segundos desde la llamada hasta obtener el archivo listo. Esta es la imagen exacta de la primera toma:

Una advertencia honesta antes de publicar algo así: si amplías la imagen, verás que la "interfaz de la terminal" que aparece en pantalla es texto sin sentido con apariencia realista. Al ancho habitual de un README, nadie lo notará. Sin embargo, si se utiliza como portada de documentación a pantalla completa donde el texto es legible, es probable que sí se aprecie. El texto de interfaz legible sigue siendo un punto débil para los modelos fotorrealistas, por lo que te aconsejamos mostrar las pantallas a menor tamaño o solicitar representaciones abstractas de las mismas.

Para la imagen de la documentación de inicio rápido repetimos el proceso con una descripción más relajada: toma cenital de un teclado, un diagrama impreso con notas adhesivas y una taza de té. Una sola llamada, $0.11:

Ambas demostraciones se realizaron usando Nano Banana Pro para poder mostrarlas en esta página con la máxima calidad. Para wikis internas o plantillas de incidencias, yo elegiría sin dudar el modelo nano-banana-2-lite de $0.03; la guía de la versión Lite detalla en qué casos este modelo económico resulta más que suficiente. Los enlaces firmados de los archivos generados son válidos por 24 horas, y realizar una nueva llamada a get_result generará nuevos enlaces de acceso.

También es posible generar video desde el mismo chat. La función generate_video nunca realiza cargos en la primera llamada: primero devuelve una estimación de costo y el agente debe confirmar la operación llamando de nuevo a confirm_cost para aceptar el importe exacto. Un clip de video sin sonido a 720p comienza en $0.10, mientras que usar Omni Flash con sonido cuesta $0.10 por segundo, es decir, $0.30 por una toma de tres segundos.

Peculiaridades de VS Code que conviene conocer antes de empezar

Aquí recopilamos algunas observaciones tras probar esta configuración, ordenadas según la probabilidad de que te afecten.

1. La propiedad principal es servers, no mcpServers. Casi todos los demás clientes populares (Claude, Cursor, Windsurf) utilizan mcpServers. Por tanto, cualquier configuración que copies de las guías de otras herramientas fallará en VS Code, y es fácil pasar por alto las advertencias del esquema JSON. Ocurre exactamente lo mismo al revés si intentas llevar un fragmento de VS Code a otro editor. También es aconsejable mantener la propiedad type: "http" de forma explícita para servidores remotos.

2. Cambiar un valor de entrada almacenado es sorprendentemente engorroso. Tras la primera solicitud, tu clave se guarda en el llavero seguro del sistema y no existe un botón sencillo para "editar secreto". El procedimiento correcto consiste en abrir el archivo .vscode/mcp.json, pasar el cursor sobre la configuración del servidor y usar los controles integrados para reiniciar limpiando los inputs, o eliminar los valores guardados a través de MCP: List Servers → servidor → disconnect y volver a agregarlo. Esto resulta más complejo en conexiones Remote SSH, donde el sistema de solicitud de credenciales presenta problemas ya reportados en el seguimiento de incidencias de VS Code. Cambiar una clave revocada puede tomarte un par de minutos de clics inesperados.

3. En cuentas de Copilot Business o Enterprise, la integración MCP está desactivada hasta que el administrador de la organización cambie la política. La directiva "MCP servers in Copilot" viene inhabilitada por defecto para las licencias corporativas, según explica la documentación de políticas de GitHub. Lo más desconcertante es el tipo de error: el servidor se inicia correctamente y la configuración es válida, pero las herramientas sencillamente no aparecen en el chat. Si utilizas un plan personal de Copilot (incluido el gratuito), no tendrás este inconveniente.

4. Existe un límite estricto de 128 herramientas por petición de chat. Las herramientas nativas, las de las extensiones y las de todos los servidores MCP que tengas activos se suman y restan de este límite, tal como detalla la documentación de herramientas del agente. Nuestro servidor añade siete, lo cual no es mucho por sí solo, pero si acumulas varios servidores que expongan muchas utilidades, las consultas empezarán a dar error hasta que desmarques algunos servidores completos en el selector. Aunque VS Code puede agrupar las herramientas sobrantes bajo herramientas virtuales, considero que es mucho mejor mantener habilitados únicamente los servidores que vayas a emplear en tu día a día.

5. Las herramientas se ejecutan en modo agente y cada acción requiere tu aprobación. Las herramientas MCP no funcionan en el modo de chat convencional de solo preguntas; si ves que el modelo insiste en describirte la imagen en lugar de generarla, asegúrate de comprobar el modo seleccionado en el desplegable. Los diálogos de confirmación te permiten autorizar el uso de una herramienta para la sesión actual, para todo el espacio de trabajo o recordarlo de forma permanente ("always"). Para las funciones gratuitas como list_models o get_result, la opción de "always" es idónea. En el caso de generate_image, te sugerimos mantener la confirmación paso a paso en cada llamada para evitar gastos imprevistos de saldo real; recuerda que el video cuenta además con la seguridad adicional de confirm_cost integrada en nuestro backend.

¿Cuánto costaron los recursos visuales de este artículo?

Se aplicaron las tarifas habituales por generación, que son las mismas que el método list_models indica al agente de chat:

En esta ocasión, todas las generaciones salieron perfectas al primer intento. No siempre será así, de modo que te recomendamos prever algún intento adicional en imágenes que muestren pantallas con texto o formas geométricas complejas, y revisar las imágenes a tamaño completo antes de integrarlas en tu rama principal de desarrollo.

Si ya utilizas este servidor en otro entorno de desarrollo, el archivo .vscode/mcp.json que mostramos arriba es la única pieza nueva que necesitas: mantendrás la misma clave, el mismo saldo y tu historial de generaciones. Si estás empezando de cero, la guía de Claude Code expone otros cuatro casos de uso prácticos que se pueden adaptar de forma casi directa. Cuando desees comenzar, solo tienes que crear una clave y pedirle a Copilot que genere tu primer banner para el README.

Preguntas frecuentes

¿Es compatible VS Code con servidores MCP remotos utilizando la cabecera Authorization?

Sí, de forma nativa. Un servidor remoto se define configurando type: "http", la propiedad url y un objeto opcional headers en el archivo mcp.json, donde la sintaxis ${input:…} evita tener que escribir la clave directamente en el archivo (comprobado con la documentación oficial de MCP para VS Code del 11 de julio de 2026). El editor también ofrece soporte para OAuth en conexiones con servidores remotos; nuestro endpoint se autentica actualmente mediante claves Bearer, y tenemos planificado incorporar OAuth 2.1 como una alternativa adicional.

¿Es seguro subir el archivo .vscode/mcp.json a git?

Sí, siempre que la clave se configure como una referencia de inputs en lugar de incluirse directamente en el archivo. El archivo JSON que subes a tu repositorio solo contiene el marcador de posición; de esta manera, VS Code solicitará a cada desarrollador su clave correspondiente la primera vez que se inicie y la guardará de forma segura en su llavero de almacenamiento local. Esta división por desarrollador resulta sumamente práctica: cada clave dispone de su propio registro de actividad y de un límite máximo de gasto diario opcional en dólares (USD) configurable en Profile → MCP API Keys, haciendo que la baja de un colaborador sea tan sencilla como revocar su clave en un clic sin interferir con el resto del equipo.

¿Por qué las herramientas MCP no aparecen en el chat de Copilot?

Suelen ser tres las razones principales. Primero, asegúrate de estar utilizando el modo agente, ya que los demás modos de chat no tienen acceso a las herramientas MCP. Segundo, puede que el servidor no se haya iniciado; ejecuta el comando MCP: List Servers para verificar su estado actual. Tercero, si utilizas una licencia corporativa de Copilot, es muy posible que la directiva "MCP servers in Copilot" esté desactivada (este fallo se produce de forma silenciosa y solo puede resolverlo un administrador de la organización). Si las herramientas sí se muestran pero las llamadas devuelven un error de autorización 401, la clave que estás utilizando es incorrecta o ha sido revocada; puedes comprobarlo en pocos segundos realizando una petición directa utilizando el fragmento de código disponible en nuestra página del servidor MCP.

¿Se requiere una API key de Google para generar imágenes en VS Code?

No es necesario. Los servidores MCP de imágenes locales se comunican directamente con la API de Gemini, lo que requiere que aportes tu propia clave de Google, asumas sus cuotas y configures la facturación correspondiente. En cambio, nuestro servidor remoto procesa las peticiones delegando la generación de imágenes en el grupo gestionado de claves de Vertex AI de BananaBanana. Tu única credencial será la clave bb_live_ obtenida en tu perfil: pagas tarifas fijas por generación, sin consumos mínimos obligatorios y con un saldo prepago unificado que compartes con nuestra aplicación web.

¿Puede GitHub Copilot generar video utilizando el mismo servidor?

Sí, mediante un paso de confirmación de costos previo. La función generate_video devuelve primero un presupuesto estimado, y el agente debe realizar una segunda llamada con la función confirm_cost indicando el importe exacto antes de procesar cualquier cargo. Las tarifas varían desde $0.10 para un fragmento breve de video sin sonido a 720p, hasta los $4.40 de una renderización avanzada con audio mediante Veo 3.1; el uso de Omni Flash con sonido cuesta $0.10 por segundo ($0.30–$1.00 por clip). Dado que la generación de los clips de video puede tardar entre uno y diez minutos, el agente irá realizando comprobaciones periódicas llamando a get_result en segundo plano mientras tú puedes continuar programando con normalidad.