Retour au blog
BananaBanana Teamtutorialmcpcursor

Générer des images dans Cursor : guide du serveur MCP

Générez des images dans Cursor directement dans votre dépôt via un serveur MCP distant. Configuration mcp.json, variables d'env et coûts dès $0.03.

Générer des images dans Cursor : guide du serveur MCP

Un serveur MCP pour Cursor est une boîte à outils externe que l'agent de l'éditeur peut appeler depuis le chat : vous ajoutez un bloc JSON à mcp.json, et Cursor acquiert des capacités que ses modèles de base n'ont pas, y compris la génération d'images. L'agent de Cursor modifie des fichiers et exécute des commandes de terminal à longueur de journée, mais aucun des modèles qui l'alimentent ne peut produire un fichier image. Connectez un serveur de génération et « make me a 16:9 hero for this landing page » devient une consigne de chat ordinaire qui se solde par un véritable fichier dans votre dépôt.

Voici toute la configuration, si vous n'êtes venu que pour ça. Créez une clé API dans votre profil BananaBanana, puis ajoutez ceci à ~/.cursor/mcp.json (global) ou .cursor/mcp.json à la racine de votre projet :

{
  "mcpServers": {
    "bananabanana": {
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:BB_API_KEY}"
      }
    }
  }
}

Exportez BB_API_KEY=bb_live_YOUR_KEY dans votre environnement et le tour est joué. Pas de processus serveur local, pas de compte Google Cloud, pas d'abonnement. Les images sont facturées à partir de $0.03 sur un solde prépayé, et les vidéos à partir de $0.10. Les deux images de démonstration de ce guide ont été générées via cette configuration exacte avec une clé active pendant que j'écrivais ce texte ; les traces et la facture média de $0.55 se trouvent ci-dessous.

Pourquoi greffer un générateur d'images sur Cursor ?

Parce que le développement frontend exige constamment de nouvelles images pile au moment où vous avez les mains dans le code. Une image hero pour la landing page. Des images de substitution pour les fiches produits afin d'éviter de livrer une grille remplie de carrés gris. Une image OG pour l'article de blog que vous venez d'intégrer. Rien de bien sorcier, mais chaque image impliquait jusqu'ici le même détour pénible : ouvrir un générateur dans un onglet de navigateur, saisir un prompt, télécharger le fichier, le renommer, le glisser-déposer dans public/, revenir et écrire la balise <img>. Dix minutes de raccordement par ressource, et vous avez perdu le fil de votre composant.

Avec un serveur MCP, l'agent gère toute cette boucle à votre place. Il rédige le prompt (souvent bien meilleur que mon premier jet un peu paresseux), appelle generate_image, télécharge le résultat dans le bon dossier et écrit le balisage avec le texte alternatif (alt). Vous n'avez plus qu'à relire un diff au lieu de faire de la manutention.

L'autre grand avantage réside dans ce que vous n'avez pas à installer. Les serveurs MCP locaux pour la génération d'images existent et fonctionnent très bien, mais ils vous obligent à faire tourner votre propre processus Node ou Python et à fournir votre propre clé API Google, avec les quotas et la facturation qui vont avec sur votre compte Google. Un serveur distant évite tout cela : le point de terminaison tourne déjà chez nous, sur le même pipeline que le générateur BananaBanana, et votre seul identifiant est une unique clé bb_live_.

Illustration éditoriale d'un ordinateur portable connecté par un câble lumineux à un petit studio d'art sur un nuage, une métaphore de Cursor appelant un serveur MCP distant de génération d'images

Comment ajouter un serveur MCP à Cursor ?

Trois étapes, environ deux minutes. Les détails de configuration ci-dessous ont été vérifiés par rapport à la documentation officielle du MCP de Cursor en date du 11 juillet 2026.

Premièrement, inscrivez-vous et allez dans Profil → MCP API Keys. Créez une clé. Elle ne s'affiche qu'une seule fois, commence par bb_live_ et est stockée sous forme de hachage chez nous : copiez-la donc immédiatement. Les nouveaux comptes démarrent avec un solde gratuit de $0.20, ce qui suffit pour six images de test sur le modèle le moins cher.

Deuxièmement, choisissez l'emplacement de votre configuration. Cursor lit deux emplacements :

  • ~/.cursor/mcp.json — global, le serveur vous accompagne dans tous vos projets ;
  • .cursor/mcp.json à la racine du dépôt — spécifique au projet, et sans danger à commiter si vous n'y mettez pas votre clé en clair.

C'est précisément ce « si » que résout l'interpolation de ${env:BB_API_KEY} dans le fragment de code ci-dessus : Cursor remplace les variables d'environnement dans les valeurs de mcp.json au moment du chargement, de sorte que le fichier lui-même ne contient aucun secret. D'après la documentation, cette syntaxe prend également en charge ${workspaceFolder} et quelques autres variables.

Troisièmement, redémarrez ou rechargez Cursor, puis ouvrez Cursor Settings → MCP. Le serveur devrait apparaître avec un voyant vert et une liste de sept outils, de list_models à list_generations. Notre page du serveur MCP contient ce même extrait ainsi qu'un tableau de compatibilité pour tous les autres clients que nous avons testés :

Extrait de configuration de Cursor sur la page de documentation MCP de BananaBanana montrant le bloc mcp.json avec l'interpolation des variables d'environnement

Si le serveur n'apparaît pas, passez directement à la section sur les particularités de Cursor. La cause est presque toujours liée à la variable d'environnement, pas à la configuration elle-même.

Cas pratique : une image hero de landing page et des photos de produits sans quitter le chat

Le scénario de départ de cet article : vous êtes développeur frontend et vous assemblez une landing page pour une marque de matériel de plein air (outdoor). Le design requiert une image de couverture (hero) pleine largeur représentant un campement à l'aube. Dans le chat de Cursor, vous formulez votre demande. L'agent rédige un prompt de type photographique et appelle l'outil. Voici la trace exacte de ma session de travail, avec le véritable identifiant de tâche (job id) :

→ generate_image {"prompt": "A photorealistic wide hero shot for an outdoor
   gear brand landing page: a lone orange tent glowing softly on the shore of
   a still alpine lake at dawn, mist over the water, sharp granite peaks
   catching the first pink light, generous empty sky for headline text, low
   angle, 35mm lens, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgox3xj000s…", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.40}
→ get_result {"job_id": "cmrgox3xj000s…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Dix-huit secondes entre l'appel et le fichier finalisé. Voici ce résultat exact, dès le premier essai, sans aucune retouche :

Image hero de landing page générée par IA montrant une tente orange au bord d'un lac alpin brumeux à l'aube, créée dans Cursor via le serveur MCP de BananaBanana

L'agent récupère ensuite le fichier depuis l'URL signée pour le placer dans public/ et écrit le composant. Les liens restent valides pendant 24 heures ; un nouvel appel à get_result permet de les renouveler par la suite.

Pour les visuels de produits, la démarche est la même avec un format carré. Pour la grille de fiches produits, j'ai demandé une photo de gourde en formulant les consignes comme on le ferait pour un photographe : sujet, surface, lumière, objectif. Un appel, $0.11, vingt secondes :

Image produit réaliste d'une gourde en acier brossé avec un bouchon vert sauge sur du granit, générée dans Cursor via MCP pour une grille de fiches produits

Ces deux démonstrations ont été réalisées avec Nano Banana Pro pour le rendu final de cette page. Pour de simples placeholders temporaires dans vos grilles, j'utiliserais en toute franchise nano-banana-2-lite à $0.03, pour ne monter en gamme que pour les images validées lors de la revue de design. Notre guide Lite explique dans quels cas ce modèle ultra-économique est amplement suffisant. Et si vous devez conserver la même mascotte sur une série d'images, la technique de prompt importe plus que le client : consultez à ce sujet notre guide pratique sur la cohérence des personnages.

La vidéo fonctionne également depuis ce même chat. generate_video ne facture jamais dès le premier appel : il renvoie un devis, et l'agent doit répéter l'appel en spécifiant confirm_cost pour accepter le montant exact. Un clip muet en 720p avec Veo 3.1 Lite démarre à $0.10, tandis qu'un rendu Omni Flash avec son est facturé $0.10 par seconde, soit $0.30 pour une prise de trois secondes.

Les particularités de Cursor à connaître avant de vous lancer

Chaque client de développement a ses propres zones d'ombre. Voici les pièges et subtilités que je signalerais volontiers à un collègue, identifiés lors des tests de la configuration décrite plus haut.

Illustration éditoriale d'un petit robot examinant trois panneaux indicateurs avec une maison, un dossier et un cadenas, une métaphore des portées de configuration et des secrets de Cursor

1. ${env:…} ne fonctionne que si Cursor peut voir la variable. Un export dans votre .zshrc est visible si vous lancez Cursor depuis votre terminal, mais l'application lancée via l'interface graphique (depuis le Dock de macOS ou un raccourci de bureau) ne lit pas votre profil de shell. La configuration échouera alors silencieusement. D'après mon expérience, c'est la cause numéro un des échecs de connexion sous macOS (« server won't connect »). Solutions : définissez la variable au niveau du système d'exploitation (launchctl setenv sous macOS, ou via les variables d'environnement système sous Windows), ou lancez Cursor depuis le terminal pour vérifier si la configuration globale fonctionne.

2. La configuration de projet est idéale en équipe : une clé par personne. Commitez .cursor/mcp.json contenant l'emplacement réservé ${env:BB_API_KEY} et chaque membre de l'équipe bénéficiera du serveur dès le clonage du projet, chacun utilisant sa propre clé. Ce découpage est plus important qu'il n'y paraît : les clés sont gratuites, et chacune possède son propre journal d'utilisation (outil, modèle, coût, aperçu du prompt) ainsi qu'un plafond quotidien facultatif en dollars (USD) paramétrable dans Profile → MCP API Keys. Si un collaborateur s'en va, vous révoquez sa clé, et personne d'autre n'est impacté. Les abonnements professionnels de Cursor permettent aussi de distribuer les serveurs MCP depuis leur tableau de bord d'équipe, mais le fichier commité fonctionne sur n'importe quelle offre.

3. Cursor demande une confirmation avant chaque appel d'outil, et il vaut mieux la laisser active. Par défaut, chaque appel MCP attend votre validation, affichant les arguments sous une petite flèche à côté du nom de l'outil. En mode d'exécution automatique, les outils autorisés (allowlisted) s'exécutent immédiatement. Je sais que cliquer vingt fois sur « Approuver » lors d'un traitement par lot peut être fastidieux, mais pour des outils qui consomment votre solde réel à chaque appel, je vous conseille de garder la demande d'autorisation active et de ne laisser en exécution automatique que les outils gratuits (list_models, get_result). De toute façon, la vidéo intègre une sécurité supplémentaire de notre côté : aucun montant supérieur au devis n'est facturé sans confirm_cost.

4. Le rendu s'affiche directement dans le chat. Selon la documentation de Cursor, les images renvoyées par les outils MCP sont associées à la conversation, et les modèles dotés de capacités de vision peuvent les analyser. Notre outil get_result inclut un petit aperçu au format WebP à côté de l'URL, ce qui permet à l'agent (et à vous-même) de juger le rendu sans ouvrir de navigateur. Cela signifie également que l'agent peut s'autocorriger : demandez-lui d'inspecter l'image et de relancer la génération si, par exemple, la tente s'est retrouvée en plein milieu de la zone de texte du titre.

5. Les liens d'installation en un clic existent, mais n'y mettez pas vos clés. Cursor prend en charge les liens profonds (deeplinks) cursor:// qui installent un serveur MCP à partir d'une configuration encodée en base64, conformément à la documentation sur les liens d'installation. C'est très pratique pour des serveurs ouverts, mais déconseillé pour des serveurs sécurisés, car la configuration encodée contiendrait votre clé en clair. Quiconque obtiendrait le lien pourrait alors vider votre solde. C'est pourquoi le bouton sur notre site propose un extrait de code à copier-coller avec un emplacement réservé pour la variable d'environnement, plutôt qu'un lien d'installation directe. On colle, on exporte la variable, et c'est fait.

Soyons tout à fait transparents sur les limites actuelles du produit : l'outil MCP generate_image ne prend pas encore en charge les images d'entrée, ce qui signifie que la génération basée sur des images de référence et la conversion d'image en vidéo nécessitent encore de passer par le générateur web. En revanche, la génération de texte en image, l'ajustement interactif d'images via edit_image et le texte en vidéo fonctionnent parfaitement par MCP aujourd'hui.

Quel a été le coût des médias de démonstration pour cet article ?

Il s'agit des tarifs standards par génération, identiques aux informations que list_models renvoie à l'agent, sans aucune réduction interne :

RessourceModèlePrix
Démo d'image hero, via MCP avec une clé activeNano Banana Pro, 1K$0.11
Démo de placeholder produit, via MCPNano Banana Pro, 1K$0.11
Couverture + 2 illustrations éditorialesNano Banana Pro, 1K$0.33
Capture d'écran de la docnavigateur, pas de génération$0.00
Total$0.55

Pour cette fois, toutes les générations ont abouti dès la première tentative, ce qui ne sera pas toujours le cas. Prévoyez une ou deux relances pour vos visuels de produits et inspectez de près les détails avant d'intégrer vos images : la géométrie des objets reste en effet le principal point faible des modèles photoréalistes.

Si vous utilisez déjà ce serveur avec Claude, la configuration de Cursor détaillée plus haut est le seul élément nouveau : vous conservez la même clé, le même solde et le même historique. Si vous partez de zéro, notre guide d'utilisation de Claude Code présente quatre autres cas d'usage transposables presque mot pour mot à Cursor. Prêt à faire l'essai ? Créez une clé et demandez à Cursor de générer votre première image hero.

FAQ

Est-ce que Cursor prend en charge les serveurs MCP distants avec un en-tête Authorization ?

Oui, de manière native. Depuis que Cursor a ajouté le transport HTTP Streamable, un serveur distant se résume à une url et à un objet headers facultatif dans mcp.json. Aucun processus de liaison locale n'est requis, et l'interpolation de ${env:VAR} évite d'exposer vos secrets dans le fichier. C'est précisément la configuration exploitée dans ce guide, validée d'après la documentation officielle de Cursor MCP au 11 juillet 2026. Cursor prend également en charge OAuth pour les serveurs distants ; notre point de terminaison s'authentifie pour le moment avec des clés de type Bearer, l'intégration d'OAuth 2.1 étant planifiée comme seconde option.

Faut-il une clé API Google pour générer des images dans Cursor ?

Non. Les serveurs MCP d'images exécutés localement appellent directement l'API Gemini : ils nécessitent donc votre propre clé Google ainsi que vos propres quotas et facturations. Avec notre serveur distant, la génération s'appuie sur le pool de clés Vertex AI géré par BananaBanana, et votre seul identifiant est la clé bb_live_ de votre profil. Vous troquez l'accès direct à l'API brute de Google contre une facturation par génération sans minimum de dépenses, un solde unique prépayé et une clé révocable en un seul clic.

La configuration MCP doit-elle être globale ou par projet ?

Les deux options fonctionnent, la différence réside dans la portée et le partage. Le fichier ~/.cursor/mcp.json vous accompagne dans tous vos dépôts, ce qui est parfait pour un usage personnel. Le fichier .cursor/mcp.json situé à la racine du projet est lié au dépôt : toute l'équipe dispose ainsi du serveur dès le clonage du projet. En référençant la clé via ${env:…}, le fichier peut être commité en toute sécurité. Je conseille par défaut une configuration au niveau du projet pour tout travail d'équipe, car une configuration partagée associée à des clés individuelles par développeur permet de suivre l'historique d'utilisation et de révoquer des accès individuellement.

Cursor peut-il générer des vidéos via ce même serveur ?

Oui, moyennant une étape de confirmation des coûts. L'outil generate_video renvoie toujours un devis initial, et l'agent doit réitérer l'appel avec confirm_cost correspondant au montant exact avant d'être facturé. Les tarifs varient de $0.10 pour un clip muet de 4 secondes en 720p avec Veo 3.1 Lite jusqu'à $4.40 pour un rendu haut de gamme Veo 3.1 avec audio, et un rendu Omni Flash avec son est facturé $0.10 par seconde ($0.30–$1.00 par clip). La génération des clips prenant de une à dix minutes, l'agent interroge régulièrement get_result tout en continuant à travailler sur votre code.

Pourquoi mon serveur n'apparaît-il pas dans Cursor après avoir modifié mcp.json ?

Trois suspects habituels, par ordre de probabilité. Premièrement, la variable d'environnement n'est pas accessible par le processus de Cursor : les applications lancées depuis l'interface graphique ne lisent pas votre profil de shell, vous devez donc définir la variable au niveau du système ou lancer Cursor depuis un terminal. Deuxièmement, la configuration n'a pas été rechargée : redémarrez complètement Cursor ou utilisez le bouton d'actualisation dans les paramètres MCP. Troisièmement, le fichier JSON comporte une erreur de syntaxe, comme une virgule traînante classique. Si le serveur apparaît bien mais que les appels d'outils échouent avec une erreur 401, la clé est incorrecte ou a été révoquée ; testez-la avec une requête brute en vous basant sur l'extrait fourni sur la page du serveur MCP.

tutorialmcpcursor