Come eseguire il codice HTML di ChatGPT o Gemini e vedere la pagina dal vivo

Il modo più rapido per eseguire il codice HTML di ChatGPT o Gemini è premere Mostra nell’estensione gratuita AI Code Harvester: la tua pagina si apre dal vivo in una nuova scheda, con pulsanti per vederla in formato computer, tablet e cellulare, e non devi mai salvare un file. Senza l’estensione copi il codice in un file chiamato index.html e ci fai doppio clic, come spiegato più sotto.

Perché il codice di una chat non è ancora una pagina web

Quando ChatGPT o Gemini “costruiscono un sito”, in realtà ti danno testo: un blocco di HTML (lo scheletro della pagina), spesso un blocco di CSS (colori e disposizione) e un blocco di JavaScript (pulsanti e azioni). Pensa a una ricetta. Le parole ci sono tutte, ma nessuno ha ancora cucinato il piatto. Il browser è il forno che trasforma la ricetta in qualcosa da guardare.

Alcune chat mostrano una piccola anteprima propria, ma non sempre, non per ogni tipo di codice, e sparisce quando esci dalla chat. Se vuoi vedere bene la pagina, su schermi di varie dimensioni, e tornarci dopo, devi eseguirla tu.

Il modo facile: premi Mostra

AI Code Harvester è un’estensione gratuita di Chrome (un piccolo componente aggiuntivo che dà al browser una funzione in più). Sta sulle pagine di ChatGPT e Gemini, trova i blocchi di codice della risposta e, quando uno di essi è una pagina web, te la mostra. Ecco un breve video, poi i passaggi.

1. Installa l’estensione. Aggiungila dal Chrome Web Store. È gratuita e senza registrazione.
2. Chiedi una pagina all’IA. Per esempio: “Fammi un sito di una sola pagina per una piccola panetteria con un pulsante per ordinare. Dammi index.html, style.css e app.js.” Dare un nome ai file aiuta.
3. Aspetta che la risposta finisca. Il piccolo pannello di Code Harvester nella pagina elenca i file trovati.
4. Premi Mostra. La tua pagina si apre in una nuova scheda. Se hai parcheggiato il pannello sul bordo dello schermo come un cassetto stretto, il pulsante Mostra è sul cassetto.
5. Prova i tre pulsanti di dimensione: Computer, Tablet e Cellulare. Mostrano come la pagina sta su uno schermo di computer, di tablet e di cellulare.
6. Non ti convince? Chiedi una modifica all’IA. Quando risponde, l’anteprima si aggiorna da sola, quindi puoi continuare a chiedere e a guardare.
7. Vuoi più spazio? Premi Apri ⤢ nel pannello. Si apre il Workspace con una scheda Anteprima, un pulsante Ricarica e un elenco per scegliere quale file guardare.

Come mette insieme i pezzi? Una pagina web di solito chiede i suoi altri file per nome, per esempio style.css e app.js. L’estensione li trova nella stessa risposta e li infila nella pagina, che appare e funziona come se fossero salvati uno accanto all’altro. Se la risposta contiene più di una pagina HTML, un menu a tendina ti lascia scegliere quale guardare.

È sicuro eseguire codice scritto da un’IA?

L’anteprima gira in una stanza chiusa, che i programmatori chiamano sandbox. La pagina può disegnarsi ed eseguire i propri pulsanti, ma non ha accesso all’estensione, al tuo browser né ai tuoi dati. Se la pagina carica una libreria da internet, anche questo avviene solo dentro quella stanza chiusa. Comunque, il codice è codice, quindi tratta una pagina che non hai letto come qualsiasi file di uno sconosciuto. L’anteprima viene creata sul tuo computer e non viene caricato nulla da noi.

Niente estensione? Il metodo a mano

Funziona senza alcuno strumento. Ha solo qualche passaggio in più, e lo ripeti dopo ogni modifica.

1. Copia il blocco HTML dalla chat.
2. Incollalo nel Blocco note (o in qualsiasi editor di testo semplice) e salvalo come index.html. Nella finestra di salvataggio scegli “Tutti i file”, così non finisce come index.html.txt.
3. Fai lo stesso con i blocchi CSS e JavaScript, con i nomi che chiede l’HTML (per esempio style.css e app.js), nella stessa cartella.
4. Fai doppio clic su index.html. Si apre nel tuo browser come una pagina vera.
5. Hai cambiato qualcosa? Salva il codice nuovo sopra il vecchio file e premi aggiorna nel browser.

L’inciampo tipico è una pagina che sembra spoglia o ha pulsanti che non fanno nulla. Quasi sempre il nome di un file non corrisponde a quello che chiede l’HTML. Nell’anteprima dell’estensione, se i nomi differiscono, usa il prossimo file non ancora usato del tipo giusto, quindi perdona. A mano, devi correggere tu il nome.

Quando l’anteprima sembra sbagliata

• Sembra vuota o a metà. L’ultima risposta potrebbe contenere solo una parte del codice, per esempio un solo file modificato. Chiedi all’IA di “darti di nuovo i file completi”.
• Mancano le immagini. Una chat non può inviare file di immagine. Usa immagini con indirizzi web o aggiungi le tue dopo.
• I pulsanti non fanno nulla. Cerca un file JavaScript nell’elenco del pannello. Se l’IA l’ha messo in un’altra risposta, chiedi tutti i file in una sola risposta.
• Bene sul computer, rotta sul cellulare. Premi Cellulare, guarda cosa non va e chiedi all’IA di “adattarla agli schermi piccoli”.
• Pagine che richiedono un accesso o un database. Qui vedi solo come appaiono, non come si comportano. Hanno bisogno di un vero server.

Chiedi all’IA pagine che si vedono bene in anteprima

• Chiedi tutti i file in una sola risposta, con il nome del file scritto sopra ogni blocco.
• Per una pagina semplice chiedi un solo file: “metti il CSS e il JavaScript dentro l’HTML”.
• Di’ per chi è: “deve stare bene sul cellulare”.
• Cambia una cosa alla volta. È più facile vedere cosa è andato storto.

Quando la pagina ti piace, la domanda successiva è come metterla online perché la vedano gli altri. La nostra guida Dove pubblicare la pagina web creata dalla tua IA passa in rassegna le opzioni gratuite e a pagamento con parole semplici. AI Code Harvester fa più dell’anteprima: può scaricare tutto come ZIP (con le tue cartelle, se vuoi), esportare una pagina singola o portare la chat in un’altra IA. Legge le chat di ChatGPT e Gemini e funziona sul tuo computer. Aggiungila dal Chrome Web Store.

Da sapere prima di iniziare

Domande frequenti