Générer des images et des vidéos avec Claude Code pour un site web

Pour générer des images et des vidéos avec Claude Code, connectez-le à un service externe via MCP. Demandez-lui de choisir un modèle compatible, de chiffrer la requête exacte et d’attendre votre accord. Créez d’abord l’image, utilisez son identifiant de génération terminée comme première image de la vidéo, puis téléchargez les deux fichiers dans le projet web.

Prenons la page d’accueil d’un café : une photo d’intérieur chaleureuse, un mouvement de caméra discret et du texte lisible à côté. Vous pouvez adapter les instructions à un portfolio ou à une fiche produit. Reliez l’image, la vidéo et leur emplacement grâce à des noms de fichiers et des identifiants explicites.

Claude Code peut-il générer des images et des vidéos ?

Claude Code organise la tâche et modifie le code du site. MCP lui donne accès à des outils externes. FlyAIgh transmet la demande au modèle d’image ou de vidéo choisi, puis renvoie la tâche et son résultat. Écrire du SVG ou du HTML et comprendre une image importée sont des capacités distinctes de la génération d’une photographie ou d’une vidéo.

Cette distinction aide à choisir une solution. Pour une icône simple, un graphique ou une animation CSS, du code peut suffire. Pour une scène photographique ou un mouvement de caméra généré, utilisez un modèle multimédia adapté. La connexion MCP ne donne pas à tous les modèles les mêmes entrées, durées ou résolutions.

Connecter les outils de génération

Il vous faut Claude Code installé avec une session ouverte et un abonnement FlyAIgh Basic ou supérieur actif. Le Starter Pack seul ne comprend pas l’accès MCP. Les frais Claude Code et les crédits de génération FlyAIgh sont distincts. Dans FlyAIgh, ouvrez Outils → MCP, créez une clé API et définissez, si nécessaire, un plafond quotidien de crédits.

Exécutez la commande HTTP ci-dessous dans votre terminal en remplaçant le texte indicatif par votre clé. Gardez la configuration enregistrée confidentielle : ne la commitez pas et ne mettez pas la clé dans le code du site. Le guide MCP FlyAIgh cité plus bas donne les instructions à jour. Dans Claude Code, ouvrez /mcp pour vérifier la connexion ; claude mcp list affiche aussi les serveurs configurés.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

Avant toute génération, demandez à Claude Code d’appeler get_balance et list_models. Choisissez l’identifiant du modèle et les paramètres dans les résultats, sans deviner un nom. Pour une photo personnelle, appelez upload_file ; si l’outil renvoie une URL de téléversement signée, transférez-y le contenu du fichier avant d’utiliser file_id. Un chemin local ou une URL d’image quelconque ne remplace pas cet identifiant.

Créer une image pour un emplacement précis

Partez de la mise en page plutôt que d’un simple adjectif de style. Définissez l’emplacement, le format, la position du sujet et l’espace libre nécessaire. Ici, une image 16:9 occupe le panneau multimédia, tandis que le titre reste en HTML à côté. Le texte demeure modifiable et plus lisible sur téléphone.

Demandez les modèles d’image disponibles et un devis pour les réglages retenus. Les prix de list_models illustrent les paramètres par défaut ; quote chiffre la requête précise. Confirmez celle-ci avant l’appel à generate_image. Changer de modèle, de résolution, de qualité ou de références peut modifier le devis.

Lorsque get_job indique que la génération est terminée, examinez l’image avant de l’animer. Vérifiez la composition, les inscriptions indésirables, les objets inventés et le cadrage sur écran étroit. Conservez l’identifiant de l’image approuvée avec son instruction et son modèle. Parmi plusieurs versions, sélectionnez la bonne explicitement : la plus récente n’est pas forcément celle que vous avez validée.

Animer l’image approuvée

Après validation de l’image, choisissez un modèle vidéo prenant en charge i2v. Transmettez l’identifiant de l’image terminée dans first_frame. La vidéo sera ainsi liée à l’image retenue ; une demande textuelle décrivant une scène semblable produirait une nouvelle scène. Faites chiffrer la durée, la résolution, le format et le réglage audio avant de générer.

Décrivez le mouvement séparément : une lente avancée de caméra, un peu de vapeur, une tasse immobile. Commencez par la durée compatible la plus courte qui convient à la page. Évitez de demander un changement complet de scène pour un visuel d’accueil calme. La première image guide la génération, sans figer chaque pixel des objets ou logos.

Suivez l’avancement avec get_job et l’identifiant de tâche vidéo reçu. À la fin, regardez tout le clip et écoutez le son s’il existe. Inspectez la forme de la tasse, les contours, le mouvement et la dernière image. Une tâche terminée peut présenter des défauts visuels. Pour une lecture en boucle, vérifiez le raccord entre la fin et le début.

Télécharger les fichiers et les intégrer au site

Téléchargez l’image approuvée et la vidéo terminée. Les liens de fichiers privés renvoyés par get_job expirent après 1 heure ; rappelez get_job pour obtenir un nouveau lien. Ne faites pas d’une URL signée temporaire l’adresse permanente d’un média du site. Gardez la correspondance entre les identifiants d’image et de vidéo, l’instruction, le modèle et les noms de fichiers finaux.

Dans Next.js, les fichiers de public/media sont accessibles sous /media. Avec un autre framework, utilisez son dossier de ressources statiques ou votre CDN. L’exemple suppose une vraie image JPEG nommée hero-poster.jpg et un MP4 lisible par le navigateur nommé hero.mp4. Convertissez les fichiers au besoin : remplacer .png par .jpg ne convertit pas leur contenu. N’exposez ni clé API ni appel de génération dans la page publique.

L’exemple HTML propose les commandes natives, une image d’affiche et une lecture lancée par l’utilisateur. preload="none" évite de demander la vidéo à l’avance, mais le navigateur peut se comporter différemment. Sur écran étroit, les éléments s’empilent et le texte reste séparé. Dans React JSX, utilisez className, playsInline et les noms d’attributs correspondants.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Maîtriser les retouches et les dépenses

Validez chaque génération séparément et comparez le devis au solde et au plafond de la clé. Le plafond quotidien limite les dépenses ; il ne rend pas les retouches gratuites. Si disponible, expected_credits protège contre un devis modifié, mais ne constitue pas un budget global du projet.

En cas de doute sur l’envoi d’une requête, vérifiez d’abord la tâche existante. Réutiliser idempotency_key pour la même requête dans les 24 heures évite un doublon ; modifier les paramètres avec cette clé crée un conflit. Une nouvelle version créative est une nouvelle requête pouvant consommer des crédits. Un clip terminé qui vous déplaît n’est pas une tâche échouée.

• Connexion impossible : vérifiez /mcp, l’endpoint HTTP, la clé API et l’abonnement actif requis.
• Référence refusée : utilisez une image terminée de votre compte ou un file_id dont le transfert est achevé. En i2v, placez-le dans first_frame.
• Média disparu : renouvelez le lien expiré avec get_job, puis hébergez le fichier à une adresse stable ; ne le régénérez pas.
• Lecture ou cadrage incorrect : contrôlez le format, la réponse réseau, les dimensions mobiles et le CSS. Un recadrage cover peut masquer une partie du sujet.

Sources et guides associés

La distinction des capacités suit la documentation d’Anthropic ; les outils et références suivent l’implémentation MCP actuelle de FlyAIgh. L’exemple web utilise le comportement standard de la vidéo HTML. Consultez les options et devis à jour lorsque vous effectuez les opérations.

• Claude : capacités de génération d’images
• Claude Code : connexion d’outils avec MCP
• FlyAIgh : configuration MCP et outils
• MDN : l’élément vidéo HTML
• Animer une image dans FlyAIgh
• Préparer des images de référence utiles
• Créer une vidéo de produit à partir de photos