Guía práctica para conectar la generación de imágenes de Nano Banana con Cursor y Codex mediante MCP. Incluye los archivos mcp.json y config.toml exactos, el manejo de secretos, una comparación lado a lado, prompts listos para copiar y soluciones a los errores que bloquean la configuración.
Escribir un prompt en una pestaña de chat, descargar un PNG y arrastrarlo a tu repositorio es un ciclo lento cuando el código ya vive en Cursor o Codex. Un servidor MCP elimina ese rodeo: el agente de programación llama a Nano Banana por sí mismo, guarda el archivo donde tu proyecto puede usarlo y sigue editando la misma imagen en cada turno. Este artículo configura Nano Banana MCP en Cursor y Codex desde un archivo de configuración vacío hasta una llamada de imagen que funciona, con los archivos exactos, los prompts que dan buenos resultados y los errores que aparecen el primer día. Los ajustes de Cursor y Codex siguen su documentación actual, y los detalles del servidor provienen del README público del paquete. Cuando un detalle depende del servidor que elijas, el texto lo indica.
MCP (Model Context Protocol) es un estándar para que un cliente de IA llame a herramientas externas. Un servidor de imágenes expone unas cuantas, como generate_image o edit_image, y el modelo que funciona dentro de Cursor o Codex decide cuándo llamar a una según lo que pidas en el chat. Nano Banana es el apodo del modelo de imágenes Gemini de Google, disponible como Nano Banana en PicassoIA, con Nano Banana Pro como nivel de mayor resolución. El servidor MCP en sí es un pequeño proceso de Node en tu equipo. Guarda tu token de Gemini, envía el prompt a Google y escribe el resultado en disco.
Esto es lo que suele ofrecer a tu agente un servidor típico de Nano Banana:
¿Por qué merece la pena ejecutarlo dentro del editor? Porque el mismo chat que escribe tu componente principal puede generar también la imagen principal, nombrar el archivo y actualizar la etiqueta <img>. El prompt queda en el historial del chat junto al commit, y cada iteración cuesta una frase en lugar de un viaje de ida y vuelta al navegador.
💡 El servidor se ejecuta en local y consume tu cuota de Gemini. Ni Cursor ni Codex te cobran las llamadas de imagen.
Cinco minutos de preparación evitan la mayoría de los fallos que se describen más adelante en este artículo.
| Elemento | Por qué lo necesitas | Dónde conseguirlo |
|---|---|---|
| Node.js 18 o más reciente | npx inicia el servidor | nodejs.org |
| Token de la API de Gemini | Autentica cada llamada de imagen | Google AI Studio |
| Cursor o CLI de Codex | El cliente MCP que se comunica con el servidor | Tu editor o la instalación en terminal |
| Una carpeta con permisos de escritura | El servidor guarda allí los PNG generados | Cualquier directorio de proyecto |
Ejecuta primero node --version. Si muestra una versión inferior a 18, actualízala antes de tocar ningún archivo de configuración, porque un runtime demasiado antiguo falla con errores que parecen no tener relación.
Varios paquetes de npm se atribuyen el nombre de Nano Banana. nano-banana-mcp documenta seis herramientas: generate_image, edit_image, continue_editing, get_last_image_info, configure_gemini_token y get_configuration_status. @saroby/nanobanana-mcp solo enumera dos, generate_image y list_images. @mindstone/mcp-server-nano-banana es una tercera opción. Los nombres de las herramientas difieren entre ellos, así que los prompts escritos para uno no siempre encajarán con otro.
Un servidor npx ejecuta código en tu equipo con tus permisos de usuario y ve el token que le das. Lee el repositorio, comprueba la fecha de la última versión y fija una versión exacta cuando todo funcione. Este tutorial usa nano-banana-mcp porque su lista de herramientas está documentada públicamente.
Cursor lee los servidores MCP desde dos lugares: .cursor/mcp.json dentro de un proyecto, y ~/.cursor/mcp.json en tu carpeta personal para los servidores que quieres tener en todas partes. Cuando ambos definen el mismo nombre de servidor, gana el archivo del proyecto.
Crea .cursor/mcp.json en la raíz de tu proyecto:
{
"mcpServers": {
"nano-banana": {
"command": "npx",
"args": ["-y", "nano-banana-mcp"],
"env": {
"GEMINI_API_KEY": "${env:GEMINI_API_KEY}"
}
}
}
}
Luego sigue estos pasos:
nano-banana en la lista de MCP.Por defecto, Cursor pide aprobación antes de ejecutar cada herramienta MCP. Haz clic en la flecha junto al nombre de la herramienta para revisar los argumentos. Vale la pena hacerlo en las primeras llamadas para ver exactamente qué prompt ha escrito el agente.
💡 En Windows, si el servidor no se inicia, sustituye el comando por
cmdy los argumentos por["/c", "npx", "-y", "nano-banana-mcp"]. Algunas configuraciones no pueden lanzarnpxdirectamente.
La sintaxis ${env:GEMINI_API_KEY} indica a Cursor que lea el valor desde tu entorno al iniciar el servidor, de modo que el archivo no contiene ningún secreto y puedes subirlo sin riesgo. Cursor resuelve varias variables de esta forma: ${env:NAME}, ${userHome} y ${workspaceFolder} son las que más vas a usar.
Define la variable una vez en un lugar donde Cursor pueda verla:
Codex guarda todo en un único archivo TOML, ~/.codex/config.toml, y ofrece un comando para editarlo, así que casi nunca necesitas abrir el archivo.
Ejecuta esto una vez en una terminal:
codex mcp add nano-banana --env GEMINI_API_KEY=your-token-here -- npx -y nano-banana-mcp
Todo lo que va después del doble guion es el comando que inicia el servidor. Confirma la entrada con codex mcp list, luego inicia una sesión de Codex y escribe /mcp para ver los servidores activos y su estado. Los otros subcomandos son login para servidores con OAuth y remove para eliminar una entrada.
El inconveniente: esta forma escribe tu token en config.toml como texto plano. En un equipo personal puede estar bien. Para algo compartido, usa el método siguiente.
El mismo servidor, con el token heredado de tu shell en lugar de guardado en el archivo:
[mcp_servers.nano-banana]
command = "npx"
args = ["-y", "nano-banana-mcp"]
env_vars = ["GEMINI_API_KEY"]
startup_timeout_sec = 60
tool_timeout_sec = 120
Tres campos son importantes aquí:
env_vars enumera los nombres de variables que Codex copia del proceso padre, así que el token nunca llega al archivo.startup_timeout_sec importa en el primer inicio, cuando npx descarga el paquete antes de que el servidor pueda responder. Si la primera ejecución agota el tiempo de espera, auméntalo.tool_timeout_sec limita una sola llamada de herramienta. La generación de imágenes tarda más que la mayoría de herramientas, así que dale margen.
| Cursor | Codex | |
|---|---|---|
| Archivo de configuración | .cursor/mcp.json o ~/.cursor/mcp.json | ~/.codex/config.toml |
| Formato | JSON con un objeto mcpServers | TOML con tablas [mcp_servers.name] |
| Añadir un servidor | Editar el archivo o usar el panel Customize | codex mcp add |
| Gestión de secretos | Interpolación ${env:NAME} | env_vars hereda del shell |
| Comprobar el estado | Interruptor y lista de herramientas en Customize | /mcp dentro de una sesión |
| Tiempos de espera | No se configuran en el archivo | startup_timeout_sec, tool_timeout_sec |
La diferencia práctica está en compartirlo. Un .cursor/mcp.json a nivel de proyecto se puede subir al repositorio, así que todo el equipo recibe la misma definición del servidor y solo necesita su propio token. Codex guarda su lista en tu carpeta personal, lo que encaja con una configuración individual, pero necesita una línea breve en el README si quieres que los compañeros la copien.
Tener el servidor funcionando es solo la mitad del trabajo. El prompt decide si obtienes un recurso utilizable o una cuestión de azar. Tres hábitos ayudan en ambos clientes: nombrar el archivo que quieres, pedir una imagen por llamada y describir la fotografía en lugar del ambiente.
| Prompt débil | Prompt mejor | Por qué funciona |
|---|---|---|
| "Haz una imagen principal atractiva" | "Imagen principal 16:9 para una página de precios, un equipo portátil sobre una mesa de roble, luz matinal de ventana, profundidad de campo reducida, sin texto" | Indica formato, sujeto, luz y una restricción |
| "Un zapato" | "Zapatilla de piel blanca sobre hormigón claro, luz de softbox desde la izquierda, fondo gris sin costuras" | Le da al modelo una configuración de cámara |
| "Arregla la foto" | "Edita public/images/shoe.png: fondo más cálido, mantén la costura y el logotipo sin cambios" | Apunta a un archivo y enumera lo que no debe cambiar |
Pega esto en el chat:
Usa la herramienta generate_image de Nano Banana para crear una imagen principal 16:9 para la página de precios: un equipo portátil fino sobre una mesa de roble desgastada con luz cálida de la mañana desde una ventana a la izquierda, una taza de cerámica en primer plano, profundidad de campo reducida, sin texto ni logotipos. Después mueve el archivo a
public/images/comopricing-hero.pngy actualiza la etiqueta de imagen enHero.tsx.
La mayoría de los servidores guardan en su propia carpeta predeterminada, como nano-banana-images dentro de tus Documentos en Windows, o generated_imgs en el directorio de trabajo en macOS y Linux. Por eso el prompt pide al agente que mueva el archivo. Los agentes hacen el movimiento con un comando normal de terminal.
Genera primero una imagen base y luego edítala en el mismo sitio:
Genera una foto de estudio de una zapatilla de piel blanca sobre un bloque de hormigón claro, con fondo gris sin costuras y luz de softbox desde arriba a la izquierda. Guárdala como
shoe.png.
Continúa con un cambio concreto:
Usa edit_image sobre
shoe.png: cambia el fondo a arena cálida y mantén la costura, los cordones y la suela exactamente como están.
Si tu servidor tiene una herramienta continue_editing, los ajustes pequeños se resuelven con una sola frase: "Haz la sombra más suave". Algunos servidores también aceptan varias imágenes de referencia en una sola llamada, lo que ayuda cuando necesitas un estilo coherente en un conjunto de fotos de producto. Consulta el README de tu servidor antes de depender de ello.
No tienes que escribir cada prompt tú mismo. Pide al agente que lea una página y proponga tres prompts de imagen que encajen con su texto, y aprueba uno. El modelo que controla Cursor o Codex lo hace bien porque ve el componente que lo rodea, los colores de marca de tu hoja de estilos y la relación de aspecto del hueco.
Si quieres una segunda opinión fuera del editor, PicassoIA aloja modelos de lenguaje que puedes usar para la misma tarea, entre ellos Claude Sonnet 5 y GPT 5.6 Sol. Pega el texto de tu página, pide prompts en el formato de débil frente a mejor que aparece arriba y lleva el ganador de vuelta al agente.
La mayoría de los fallos caen en tres grupos: el servidor nunca arranca, falta el token o los archivos acaban en un lugar inesperado.
| Síntoma | Causa probable | Solución |
|---|---|---|
| Estado en rojo en Cursor, nada en la lista de herramientas | La aplicación no encuentra npx | Usa la ruta completa a npx, o la forma cmd /c en Windows |
| Codex muestra un tiempo de espera al iniciar | El primer inicio está descargando el paquete | Aumenta startup_timeout_sec y ejecuta una vez el comando npx a mano |
| Salida inmediata | Node.js es anterior a la versión 18 | Actualiza Node y reinicia el cliente |
| Faltan herramientas tras editar la configuración | El cliente sigue con la configuración anterior | Desactiva y vuelve a activar el servidor, o reinicia la sesión |
Ejecuta el comando exacto de tu configuración en una terminal normal. Si allí muestra un error, el problema está en el servidor o en tu entorno, no en Cursor ni en Codex.
Un error de autenticación casi siempre significa que la variable no está en el proceso que lanza el servidor, aunque sí exista en tu shell. Muéstrala en la misma terminal desde la que inicias el cliente. Si usas una herramienta de estado como get_configuration_status, llámala primero y lee la respuesta antes de culpar al modelo.
Las respuestas de cuota o de límite de frecuencia vienen de Google, no de MCP. Ve más despacio, pide una imagen cada vez y revisa tu uso en Google AI Studio. Reintentar sin pausa solo prolonga la limitación de velocidad.
No todas las imágenes necesitan un servidor local. Cuando quieres probar un prompt rápidamente, compartir un resultado o evitar gestionar un token, la ruta del navegador es más rápida.
Cómo usar Nano Banana en PicassoIA:
Hay dos modelos hermanos que vale la pena probar cuando el primer resultado está cerca pero no del todo bien. Nano Banana 2 es la generación más reciente, y Nano Banana 2 Lite sacrifica algo de calidad a cambio de velocidad, lo que encaja con los borradores. Nano Banana Pro es la opción para recursos finales que necesitan más resolución.
Una imagen fija de tu flujo de trabajo en el editor puede convertirse en un clip corto. Toma la imagen principal, abre un modelo de imagen a video y describe el movimiento: un zoom lento hacia dentro, vapor que sube de una taza, luz que se desplaza por una pared. Seedance 2.0 genera video con audio integrado, Seedance 2.5 Lite produce clips de hasta 10 segundos, y Veo 3.1 es otra opción si quieres el modelo de video de Google junto al modelo de imagen de Google.
PicassoIA también tiene una API para desarrolladores y un conector MCP. La API está en https://api.picassoia.com/v1 y usa un token Bearer que empieza por pia_sk_. Sigue un flujo al estilo de Replicate: crea una predicción con POST /v1/models/{owner}/{name}/predictions, consulta GET /v1/predictions/{id} y luego lee el resultado. Los límites incluyen 5 predicciones simultáneas por cuenta y 4000 caracteres por prompt.
Una advertencia honesta: los modelos expuestos a través de la API y del conector MCP son picassoia/picassoia-image, picassoia/picassoia-image-editor-pro, picassoia/picassoia-video y picassoia/seedance-2.5-lite. Nano Banana no está en esa lista corta, así que usa la página del navegador para él. Aun así, puedes enlazar las páginas de PicassoIA Image Editor Pro y PicassoIA Image para ver qué hace cada una. El acceso a la API depende de tu plan, y la redacción de las páginas de precios y de API difiere, así que confirma tu plan antes de construir sobre él.
Ahora tienes el ciclo completo: un servidor que arranca, un token que queda fuera de git, prompts que nombran archivos y cámaras, y soluciones para los fallos que frenan a la mayoría en el primer paso. Elige un hueco real de tu proyecto actual, un banner principal o una tarjeta de producto, y ejecuta hoy mismo la configuración de Cursor o Codex de arriba.
Si quieres ver qué hace el modelo antes de tocar un archivo de configuración, ábrelo en Picasso IA, pega uno de los prompts de este artículo y compara el resultado con lo que produce tu agente. Prueba primero Nano Banana y luego explora los otros modelos de imagen y video en picassoia.com/en/all-models. Experimenta con la iluminación, el objetivo y la relación de aspecto, y guarda los prompts que funcionan en un archivo junto a tu código.
Elige tu idioma
