Un guide pratique pour connecter la génération d’images Nano Banana à Cursor et Codex via MCP. Il fournit les fichiers mcp.json et config.toml exacts, la gestion des secrets, une comparaison côte à côte, des prompts prêts à copier et les solutions aux erreurs qui bloquent l’installation.
Taper un prompt dans un onglet de chat, télécharger un PNG et le glisser dans votre dépôt est une boucle lente quand le code se trouve déjà dans Cursor ou Codex. Un serveur MCP supprime ce détour : l’agent de code appelle lui-même Nano Banana, enregistre le fichier là où votre projet peut l’utiliser, et continue de modifier la même image d’un échange à l’autre. Cet article configure Nano Banana MCP dans Cursor et Codex, depuis une configuration vide jusqu’à un appel d’image fonctionnel, avec les fichiers exacts, les prompts qui donnent de bons résultats et les erreurs qui apparaissent dès le premier jour. Les réglages de Cursor et Codex suivent leur documentation actuelle, et les détails du serveur proviennent du README public du package. Lorsqu’un détail dépend du serveur choisi, le texte le précise.
MCP (Model Context Protocol) est une norme qui permet à un client d’IA d’appeler des outils externes. Un serveur d’images expose quelques-uns de ces outils, comme generate_image ou edit_image, et le modèle intégré à Cursor ou Codex décide quand en appeler un, selon ce que vous demandez dans le chat. Nano Banana est le surnom du modèle d’image de Gemini, de Google, disponible sous le nom Nano Banana sur PicassoIA, avec Nano Banana Pro comme niveau à plus haute résolution. Le serveur MCP est un petit processus Node sur votre machine. Il conserve votre token Gemini, transmet le prompt à Google et écrit le résultat sur le disque.
Voici ce qu’un serveur Nano Banana type offre à votre agent :
Pourquoi le faire tourner dans l’éditeur ? Parce que le même chat qui écrit votre composant principal peut aussi produire l’image principale, nommer le fichier et mettre à jour la balise <img>. Le prompt reste dans l’historique du chat, à côté du commit, et chaque itération ne coûte qu’une phrase au lieu d’un aller-retour dans le navigateur.
💡 Le serveur tourne en local et consomme votre quota Gemini. Ni Cursor ni Codex ne vous facturent les appels d’image.
Cinq minutes de préparation évitent la plupart des échecs décrits plus loin dans cet article.
| Élément | Pourquoi vous en avez besoin | Où l’obtenir |
|---|---|---|
| Node.js 18 ou plus récent | npx lance le serveur | nodejs.org |
| Token API Gemini | Authentifie chaque appel d’image | Google AI Studio |
| Cursor ou CLI Codex | Le client MCP qui communique avec le serveur | Votre éditeur ou l’installation dans le terminal |
| Un dossier accessible en écriture | Le serveur y enregistre les fichiers PNG générés | N’importe quel répertoire de projet |
Exécutez d’abord node --version. Si la commande affiche une version inférieure à 18, mettez à jour avant de toucher à un fichier de configuration, car un runtime trop ancien provoque des erreurs qui semblent sans rapport.
Plusieurs packages npm revendiquent le nom Nano Banana. nano-banana-mcp documente six outils : generate_image, edit_image, continue_editing, get_last_image_info, configure_gemini_token et get_configuration_status. @saroby/nanobanana-mcp n’en liste que deux, generate_image et list_images. @mindstone/mcp-server-nano-banana est une troisième option. Les noms d’outils diffèrent d’un package à l’autre, si bien que des prompts écrits pour l’un ne correspondront pas toujours à un autre.
Un serveur npx exécute du code sur votre ordinateur avec vos droits utilisateur, et il voit le token que vous lui donnez. Lisez le dépôt, vérifiez la date de la dernière version et figez une version exacte une fois que tout fonctionne. Ce guide utilise nano-banana-mcp parce que sa liste d’outils est documentée publiquement.
Cursor lit les serveurs MCP à deux endroits : .cursor/mcp.json à l’intérieur d’un projet, et ~/.cursor/mcp.json dans votre dossier personnel pour les serveurs que vous voulez partout. Quand les deux définissent le même nom de serveur, le fichier du projet l’emporte.
Créez .cursor/mcp.json à la racine de votre projet :
{
"mcpServers": {
"nano-banana": {
"command": "npx",
"args": ["-y", "nano-banana-mcp"],
"env": {
"GEMINI_API_KEY": "${env:GEMINI_API_KEY}"
}
}
}
}
Suivez ensuite ces étapes :
nano-banana dans la liste MCP.Par défaut, Cursor demande votre approbation avant chaque exécution d’outil MCP. Cliquez sur la flèche à côté du nom de l’outil pour inspecter les arguments : cela vaut la peine pour les premiers appels, afin de voir exactement le prompt que l’agent a rédigé.
💡 Sous Windows, si le serveur ne se lance pas, remplacez la commande par
cmdet les arguments par["/c", "npx", "-y", "nano-banana-mcp"]. Certaines configurations ne peuvent pas lancernpxdirectement.
La syntaxe ${env:GEMINI_API_KEY} indique à Cursor de lire la valeur dans votre environnement au démarrage du serveur. Ainsi, le fichier ne contient aucun secret et peut être validé sans risque dans Git. Cursor résout plusieurs variables de cette façon : ${env:NAME}, ${userHome} et ${workspaceFolder} sont celles que vous utiliserez le plus.
Définissez la variable une fois, à un endroit où Cursor peut la voir :
Codex stocke tout dans un seul fichier TOML, ~/.codex/config.toml, et fournit une commande pour le modifier, si bien que vous n’ouvrez presque jamais le fichier.
Exécutez cette commande une seule fois dans un terminal :
codex mcp add nano-banana --env GEMINI_API_KEY=your-token-here -- npx -y nano-banana-mcp
Tout ce qui suit le double tiret est la commande qui lance le serveur. Vérifiez l’entrée avec codex mcp list, puis démarrez une session Codex et tapez /mcp pour voir les serveurs actifs et leur statut. Les autres sous-commandes sont login pour les serveurs OAuth et remove pour supprimer une entrée.
Le piège : cette forme écrit votre token dans config.toml en clair. Sur un ordinateur portable personnel, cela peut suffire. Pour tout ce qui est partagé, utilisez la méthode suivante.
Le même serveur, avec le token hérité de votre shell au lieu d’être stocké :
[mcp_servers.nano-banana]
command = "npx"
args = ["-y", "nano-banana-mcp"]
env_vars = ["GEMINI_API_KEY"]
startup_timeout_sec = 60
tool_timeout_sec = 120
Trois champs comptent ici :
env_vars liste les noms de variables que Codex copie depuis le processus parent, si bien que le token n’apparaît jamais dans le fichier.startup_timeout_sec compte au premier lancement, quand npx télécharge le package avant que le serveur puisse répondre. Si la première exécution expire, augmentez-le.tool_timeout_sec limite un appel d’outil. La génération d’images prend plus de temps que la plupart des outils, alors laissez-lui de la marge.
| Cursor | Codex | |
|---|---|---|
| Fichier de configuration | .cursor/mcp.json ou ~/.cursor/mcp.json | ~/.codex/config.toml |
| Format | JSON avec un objet mcpServers | TOML avec des tables [mcp_servers.name] |
| Ajouter un serveur | Modifier le fichier ou utiliser le panneau Customize | codex mcp add |
| Gestion des secrets | Interpolation ${env:NAME} | env_vars hérite du shell |
| Vérifier le statut | Bouton et liste d’outils dans Customize | /mcp dans une session |
| Délais d’expiration | Non définis dans le fichier | startup_timeout_sec, tool_timeout_sec |
La différence pratique concerne le partage. Un .cursor/mcp.json au niveau du projet peut être validé dans Git, si bien que toute une équipe obtient la même définition de serveur et n’a besoin que de son propre token. Codex garde sa liste dans votre dossier personnel, ce qui convient à une configuration personnelle, mais il faut une courte ligne dans le README si vos collègues doivent la reproduire.
Un serveur qui fonctionne ne représente que la moitié du travail. Le prompt détermine si vous obtenez un visuel exploitable ou un coup de dés. Trois habitudes aident dans les deux clients : nommer le fichier souhaité, demander une image par appel et décrire la photographie plutôt que l’ambiance.
| Prompt faible | Prompt amélioré | Pourquoi ça marche |
|---|---|---|
| « Faites une belle image principale » | « Image principale 16:9 pour une page de tarifs, un ordinateur portable sur un bureau en chêne, lumière matinale de fenêtre, faible profondeur de champ, sans texte » | Précise le format, le sujet, la lumière et une contrainte |
| « Une chaussure » | « Baskets en cuir blanc sur un béton pâle, lumière de softbox venant de la gauche, fond gris sans couture » | Donne au modèle un réglage de prise de vue |
| « Corrigez l’image » | « Modifiez public/images/shoe.png : fond plus chaud, couture et logo inchangés » | Désigne un fichier et liste ce qui ne doit pas changer |
Collez ceci dans le chat :
Utilisez l’outil generate_image de Nano Banana pour créer une image principale 16:9 pour la page de tarifs : un ordinateur portable fin posé sur un bureau en chêne usé, lumière chaude du matin venant d’une fenêtre à gauche, une tasse en céramique au premier plan, faible profondeur de champ, sans texte, sans logos. Déplacez ensuite le fichier dans
public/images/sous le nompricing-hero.pnget mettez à jour la balise d’image dansHero.tsx.
La plupart des serveurs enregistrent dans leur propre dossier par défaut, comme nano-banana-images dans votre dossier Documents sous Windows, ou generated_imgs dans le répertoire de travail sous macOS et Linux. C’est pourquoi le prompt demande à l’agent de déplacer le fichier. Les agents effectuent ce déplacement avec une commande de terminal classique.
Générez d’abord une image de base, puis modifiez-la sur place :
Générez une photo en studio d’une paire de baskets en cuir blanc sur un bloc de béton pâle, sur un fond gris sans couture, lumière de softbox venant du haut à gauche. Enregistrez-la sous
shoe.png.
Poursuivez avec une modification ciblée :
Utilisez edit_image sur
shoe.png: remplacez le fond par du sable chaud, gardez la couture, les lacets et la semelle exactement tels quels.
Si votre serveur dispose d’un outil continue_editing, les petits ajustements tiennent en une phrase : « Adoucissez l’ombre. » Certains serveurs acceptent aussi plusieurs images de référence dans un seul appel, ce qui est utile pour garder un style cohérent sur une série de photos produit. Vérifiez le README de votre serveur avant de vous y fier.
Vous n’êtes pas obligé d’écrire chaque prompt vous-même. Demandez à l’agent de lire une page et de proposer trois prompts d’image qui correspondent à son texte, puis validez-en un. Le modèle qui pilote Cursor ou Codex le fait bien, car il voit le composant autour, les couleurs de marque dans votre feuille de style et le format de l’emplacement.
Si vous voulez un second avis hors de l’éditeur, PicassoIA héberge des modèles de langage utilisables pour la même tâche, dont Claude Sonnet 5 et GPT 5.6 Sol. Collez le texte de votre page, demandez des prompts au format « faible contre amélioré » décrit plus haut, puis rapportez le meilleur à l’agent.
La plupart des échecs entrent dans trois catégories : le serveur ne démarre jamais, le token manque, ou les fichiers finissent à un endroit inattendu.
| Symptôme | Cause probable | Solution |
|---|---|---|
| Statut rouge dans Cursor, rien dans la liste d’outils | npx introuvable par l’application | Utilisez le chemin complet vers npx, ou la forme cmd /c sous Windows |
| Codex affiche un délai de démarrage dépassé | Le premier lancement télécharge le package | Augmentez startup_timeout_sec, exécutez une fois la commande npx manuellement |
| Sortie immédiate | Node.js plus ancien que la version 18 | Mettez Node à jour et redémarrez le client |
| Outils absents après une modification de configuration | Le client utilise encore l’ancienne configuration | Désactivez puis réactivez le serveur, ou redémarrez la session |
Exécutez la commande exacte de votre configuration dans un terminal simple. Si elle affiche une erreur là, le problème vient du serveur ou de votre environnement, pas de Cursor ou de Codex.
Une erreur d’authentification signifie presque toujours que la variable manque au processus qui lance le serveur, même si elle existe dans votre shell. Affichez-la dans le même terminal que celui depuis lequel vous lancez le client. Si vous utilisez un outil de statut comme get_configuration_status, appelez-le en premier et lisez la réponse avant d’accuser le modèle.
Les réponses de quota ou de limitation de débit viennent de Google, pas de MCP. Ralentissez, demandez une image à la fois et vérifiez votre consommation dans Google AI Studio. Réessayer en boucle serrée ne fait que prolonger la limitation.
Toutes les images n’exigent pas un serveur local. Quand vous voulez tester rapidement un prompt, partager un résultat ou éviter de gérer un token, la voie du navigateur est plus rapide.
Comment utiliser Nano Banana sur PicassoIA :
Deux modèles frères valent le détour quand le premier résultat est proche sans être juste. Nano Banana 2 est la génération la plus récente, et Nano Banana 2 Lite sacrifie un peu de qualité pour la vitesse, ce qui convient aux brouillons. Nano Banana Pro est le choix pour les visuels finaux qui demandent plus de résolution.
Une image fixe issue de votre flux de travail dans l’éditeur peut devenir un court clip. Prenez l’image principale, ouvrez un modèle d’image vers vidéo et décrivez le mouvement : un lent travelling avant, de la vapeur qui monte d’une tasse, une lumière qui glisse sur un mur. Seedance 2.0 génère une vidéo avec audio intégré, Seedance 2.5 Lite produit des clips allant jusqu’à 10 secondes, et Veo 3.1 est une autre option si vous voulez le modèle vidéo de Google à côté de son modèle d’image.
PicassoIA propose aussi une API pour développeurs et un connecteur MCP. L’API se trouve à https://api.picassoia.com/v1 et utilise un token Bearer qui commence par pia_sk_. Elle suit un flux de type Replicate : créez une prédiction avec POST /v1/models/{owner}/{name}/predictions, interrogez GET /v1/predictions/{id}, puis lisez le résultat. Les limites incluent 5 prédictions simultanées par compte et 4 000 caractères par prompt.
Une réserve honnête : les modèles exposés par l’API et le connecteur MCP sont picassoia/picassoia-image, picassoia/picassoia-image-editor-pro, picassoia/picassoia-video et picassoia/seedance-2.5-lite. Nano Banana ne figure pas dans cette courte liste, utilisez donc la page du navigateur pour ce modèle. Vous pouvez tout de même consulter les pages PicassoIA Image Editor Pro et PicassoIA Image pour voir ce que fait chacun. L’accès à l’API dépend de votre forfait, et les formulations des pages de tarifs et de l’API diffèrent, donc confirmez votre forfait avant de construire dessus.
Vous avez maintenant la boucle complète : un serveur qui démarre, un token qui reste hors de Git, des prompts qui nomment les fichiers et les caméras, et des solutions pour les échecs qui arrêtent la plupart des gens dès la première étape. Choisissez un véritable emplacement dans votre projet actuel, une bannière principale ou une vignette produit, et lancez dès aujourd’hui la configuration Cursor ou Codex décrite ci-dessus.
Si vous voulez voir ce que fait le modèle avant de toucher à un fichier de configuration, ouvrez-le sur Picasso IA, collez l’un des prompts de cet article et comparez le résultat avec ce que produit votre agent. Essayez d’abord Nano Banana, puis explorez les autres modèles d’image et de vidéo sur picassoia.com/en/all-models. Expérimentez la lumière, l’objectif et le format, et conservez les prompts qui fonctionnent dans un fichier à côté de votre code.
Choisissez votre langue
