Come generare immagini e video con Claude Code per un sito web

Per generare immagini e video con Claude Code, collegalo a un servizio esterno tramite MCP. Chiedigli di scegliere un modello compatibile, calcolare il costo della richiesta esatta e attendere la tua approvazione. Crea prima l’immagine, usa il suo ID di generazione completata come primo fotogramma del video e scarica entrambi i file nel progetto web.

L’esempio è la homepage di una caffetteria: una foto calda dell’interno, un lento movimento di camera e testo leggibile accanto. Puoi adattare le istruzioni a un portfolio o a una pagina prodotto. Mantieni il collegamento tra immagine, video e posizione nella pagina usando nomi di file e ID espliciti.

Claude Code può generare immagini e video?

Claude Code coordina il lavoro e modifica il codice del sito. MCP gli dà accesso a strumenti esterni. FlyAIgh invia la richiesta al modello di immagini o video scelto e restituisce il processo e il risultato. Scrivere SVG o HTML e comprendere un’immagine caricata sono capacità diverse dalla generazione di una fotografia o di un video.

Questa distinzione aiuta a scegliere. Per un’icona semplice, un grafico o un’animazione CSS può bastare il codice. Per una scena fotografica o un movimento di camera generato serve un modello multimediale adatto. Collegare MCP non rende tutti i modelli compatibili con gli stessi input, durate e risoluzioni.

Collega gli strumenti di generazione

Servono Claude Code installato con accesso effettuato e un abbonamento FlyAIgh Basic o superiore attivo. Il solo Starter Pack non include MCP. I costi di Claude Code e i crediti di generazione FlyAIgh sono separati. In FlyAIgh, apri Strumenti → MCP, crea una chiave API e, se necessario, imposta un limite giornaliero di crediti.

Esegui il comando HTTP seguente nel tuo terminale sostituendo il segnaposto con la chiave. Considera riservata la configurazione salvata: non inserirla in un commit e non mettere la chiave nel codice del sito. La guida MCP di FlyAIgh citata in fondo contiene le istruzioni aggiornate. In Claude Code, apri /mcp per controllare la connessione; anche claude mcp list elenca i server configurati.

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

Prima di generare, chiedi a Claude Code di chiamare get_balance e list_models. Scegli ID del modello e parametri dai risultati, senza indovinare i nomi. Per una tua foto, usa upload_file. Se restituisce un URL firmato per il caricamento, trasferisci lì il contenuto del file prima di usare file_id. Un percorso locale o un URL di immagine qualsiasi non sostituisce questo ID.

Crea un’immagine per una posizione precisa nella pagina

Parti dal layout, non solo da un aggettivo di stile. Decidi posizione, proporzioni, collocazione del soggetto e spazio libero necessario. L’esempio usa un’immagine 16:9 nel pannello multimediale, con il titolo in HTML accanto. Il testo rimane modificabile e più leggibile sul telefono.

Richiedi i modelli di immagini disponibili e un preventivo per le impostazioni scelte. I prezzi di list_models sono esempi con parametri predefiniti; quote calcola la richiesta specifica. Confermala prima di eseguire generate_image. Modello, risoluzione, qualità e riferimenti possono cambiare il prezzo.

Quando get_job indica il completamento, controlla l’immagine prima di animarla. Verifica composizione, scritte indesiderate, oggetti inventati e inquadratura su schermi stretti. Conserva l’ID dell’immagine approvata con prompt e modello. Se ci sono più versioni, scegli quella corretta esplicitamente: l’ultima non è necessariamente quella approvata.

Trasforma l’immagine approvata in un video

Dopo aver approvato l’immagine, scegli un modello video compatibile con i2v. Passa l’ID della generazione completata come first_frame. Il video sarà così collegato all’immagine scelta; una richiesta solo testuale di una scena simile ne creerebbe una nuova. Chiedi il preventivo per durata, risoluzione, proporzioni e audio prima di generare.

Descrivi il movimento separatamente: lento avanzamento della camera, vapore leggero, tazza ferma. Parti dalla durata supportata più breve che soddisfa la pagina. Evita un cambio completo di scena se vuoi un’immagine animata tranquilla per la homepage. Il primo fotogramma guida la generazione, ma non blocca ogni pixel di oggetti e loghi.

Segui l’avanzamento con get_job e l’ID del processo video restituito. Al termine guarda tutto il filmato e ascolta l’audio, se presente. Controlla forma della tazza, bordi, movimento e ultimo fotogramma. Un processo completato può avere difetti visivi. Per un video in loop, verifica il salto dalla fine all’inizio.

Scarica i file e inseriscili nel sito

Scarica l’immagine approvata e il video completato. I link dei file privati restituiti da get_job scadono dopo 1 ora; chiama di nuovo get_job per un nuovo link. Non usare un URL firmato temporaneo come indirizzo permanente dei contenuti del sito. Conserva la corrispondenza tra ID di immagine e video, prompt, modello e nomi finali dei file.

In Next.js, i file in public/media sono disponibili sotto /media. Con altri framework usa la cartella dei file statici o una tua CDN. L’esempio presuppone un vero JPEG chiamato hero-poster.jpg e un MP4 riproducibile nel browser chiamato hero.mp4. Converti i file se serve: cambiare l’estensione da .png a .jpg non ne converte il contenuto. Non inserire chiavi API o chiamate di generazione nella pagina pubblica.

L’HTML di esempio offre controlli nativi, un’immagine di copertina e riproduzione avviata dall’utente. preload="none" evita di richiedere il video in anticipo, anche se il comportamento può variare tra browser. Su schermi stretti gli elementi si dispongono in verticale e il testo resta separato. In React JSX usa className, playsInline e le corrispondenti forme degli attributi.

<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>

Controlla revisioni e spese

Approva ogni generazione separatamente e confronta il preventivo con saldo e limite della chiave. Il limite giornaliero aiuta a contenere le spese, ma non rende gratuite le revisioni. Se disponibile nella chiamata, expected_credits protegge da variazioni del preventivo; non è il budget complessivo del progetto.

Se non sai se una richiesta è stata inviata, controlla prima il processo esistente. Riutilizzare idempotency_key per la stessa richiesta entro 24 ore evita duplicati; modificare i parametri con la stessa chiave genera un conflitto. Una nuova versione creativa è una nuova richiesta e può consumare crediti. Un video generato correttamente che non ti piace non equivale a un processo fallito.

• Nessuna connessione: controlla /mcp, endpoint HTTP, chiave API e abbonamento attivo richiesto.
• Riferimento rifiutato: usa un’immagine completata del tuo account o un file_id con caricamento terminato. Per i2v inseriscilo in first_frame.
• Contenuto scomparso: rinnova il link scaduto con get_job e ospita il file a un indirizzo stabile; non rigenerarlo.
• Riproduzione o ritaglio errati: verifica formato, risposta di rete, dimensioni mobili e CSS. Un ritaglio cover può nascondere parte del soggetto.

Fonti e guide correlate

La distinzione delle capacità segue la documentazione Anthropic; strumenti e riferimenti seguono l’implementazione MCP attuale di FlyAIgh. L’esempio usa il comportamento standard dei video HTML. Controlla opzioni e preventivi aggiornati quando esegui il procedimento.

• Claude: capacità di generazione delle immagini
• Claude Code: collegare strumenti con MCP
• FlyAIgh: configurazione MCP e strumenti
• MDN: l’elemento video HTML
• Animare un’immagine in FlyAIgh
• Preparare immagini di riferimento utili
• Creare un video di prodotto dalle foto