Vibe coding con ChatGPT: canvas, Codex e creare app da ChatGPT

Puoi fare vibe coding con ChatGPT in tre modi. Chiedergli in chat una piccola app e vederne l'anteprima in canvas; affidare compiti su una vera codebase a Codex, l'agente di programmazione di OpenAI; oppure collegare un AI app builder come Mythex così che ChatGPT possa costruire, ospitare e pubblicare un'app completa con database. Il primo è il più veloce per uno strumento a pagina singola, il secondo è adatto agli sviluppatori e il terzo ti porta un'app online con login e dati senza uscire da ChatGPT.

Ecco come funziona ciascuno, un prompt per ognuno e dove si ferma. Se vuoi il contesto sul termine, leggi cos'è il vibe coding.

Opzione 1: chat di ChatGPT e canvas

Per uno strumento veloce, basta chiedere. ChatGPT scrive il codice e in canvas può mostrare semplici pagine HTML e React, così puoi cliccare e chiedere modifiche.

Scrivi un calcolatore di mance a pagina singola con campi per l'importo del conto, la percentuale di mancia (pulsanti per 10, 15, 20 e un campo personalizzato) e il numero di persone. Mostra la mancia e l'importo a persona, aggiornandoli mentre scrivo. Fallo apparire pulito su un telefono.

Va bene per: calcolatori, giochi semplici, bozze di landing page e per imparare. Chiedi "spiega questo file come se fossi nuovo alla programmazione" e imparerai in fretta.

Dove si ferma: non c'è un backend. Nulla di ciò che inserisci viene salvato per altri utenti, non c'è login e, per condividerlo, devi copiare il codice da qualche parte e ospitarlo tu. Nel momento in cui dici "e salvalo così il mio team può vederlo", hai superato la chat.

Vibe coding copia e incolla

Molti iniziano chiedendo codice a ChatGPT e incollandolo in file sul proprio computer o su un servizio di hosting. Funziona per piccoli siti statici, ma si inceppa in fretta. Ogni modifica significa trovare il file giusto, incollare la parte giusta e sperare che nient'altro dipendesse da ciò che hai sostituito. Se ti accorgi di farlo più di qualche volta, passa a una delle prossime due opzioni.

Opzione 2: Codex per una vera codebase

Codex è l'agente di OpenAI per il lavoro sul software. Gli dai un compito in linguaggio naturale e lavora su un repository: legge il codice, fa modifiche su più file, esegue comandi e test e ti consegna il risultato da rivedere. OpenAI lo offre in ChatGPT, come strumento a riga di comando e come estensione per l'editor; controlla il sito di OpenAI per sapere quali piani lo includono e i limiti attuali.

Un prompt in stile compito è il più adatto:

In questo repo, aggiungi un pulsante di esportazione CSV alla pagina Ordini. Deve esportare gli ordini attualmente filtrati con le colonne data, cliente, totale e stato. Aggiungi un test per la funzione di esportazione ed esegui la suite di test.

Va bene per: sviluppatori e fondatori tecnici con un progetto esistente che vogliono che un agente si prenda in carico interi compiti. Funziona con il tuo stack e le tue convenzioni.

Cosa resta a te: dove gira l'app, il database, i segreti, la pubblicazione e i domini. Codex cambia il codice; non è un hosting.

Codex e Mythex insieme

Codex può anche collegarsi a server MCP, compreso quello di Mythex. Aggiungi https://mcp.mythex.ai/mcp come server MCP personalizzato in Codex, approva l'accesso su Mythex e Codex può lavorare su un progetto Mythex nella sua sandbox cloud, con anteprima, database e pubblicazione gestiti da Mythex. Il nostro articolo su creare app Mythex da Claude, Cursor o Codex lo spiega passo dopo passo.

Opzione 3: creare un'app completa da ChatGPT con Mythex

Se vuoi restare in una conversazione di ChatGPT e ottenere alla fine un'app vera e ospitata, collega Mythex. Mythex funziona dentro ChatGPT come app: ChatGPT parla con gli strumenti di Mythex tramite MCP, il protocollo aperto che permette agli assistenti di usare strumenti ospitati altrove (cos'è MCP).

Una volta collegato, ChatGPT può creare un progetto Mythex, scrivere il codice in una sandbox cloud privata, avviare un'anteprima dal vivo, aggiungere un database e uno storage di file e pubblicare l'app su un URL pubblico. I risultati tornano con un link, così puoi aprire il progetto in Mythex e guardare l'anteprima.

Come collegarlo

1. In Mythex, apri Account settings e copia l'indirizzo MCP.
2. In ChatGPT, aggiungi Mythex dalle impostazioni di app o connettori usando quell'indirizzo. I menu di ChatGPT cambiano ogni tanto, quindi se i nomi sono diversi segui la pagina di aiuto di OpenAI per aggiungere un'app.
3. Si apre una pagina di Mythex: accedi e scegli Allow access. Non c'è nessuna chiave da incollare.
4. Inizia una conversazione e cita Mythex nella tua richiesta.

Il collegamento funziona con qualsiasi piano Mythex. Gli strumenti sandbox (costruire, vedere l'anteprima, pubblicare) richiedono Mythex Pro ($25 al mese), e tempo di sandbox e hosting vengono dai tuoi crediti Mythex. L'uso di ChatGPT resta sul tuo piano OpenAI.

Un primo prompt da provare

Usa Mythex per creare un tracker delle candidature di lavoro. Aggiungo candidature con azienda, ruolo, link, data di candidatura, stato (inviata, colloquio, offerta, rifiutata) e note. Mostra una bacheca per stato dove posso trascinare le schede e un semplice grafico delle candidature per settimana. Salva tutto in un database e proteggilo con un login. Avvia l'anteprima e dammi il link.

Poi, una modifica per messaggio:

Nel progetto Mythex, aggiungi una data di promemoria a ogni candidatura ed evidenzia le schede il cui promemoria è oggi o è scaduto.

Pubblicalo e mandami l'URL online.

Va bene per: chi già pianifica e ragiona in ChatGPT e vuole il risultato online, con dati che persistono, senza imparare l'hosting. Essendo un normale progetto Mythex, puoi continuare nella chat di Mythex in qualsiasi momento.

Quale opzione si adatta a ciò che stai creando

Abitudini di prompt che funzionano in ChatGPT

• Nomina lo strumento quando vuoi che venga usato. "Usa Mythex per…" chiarisce che la richiesta riguarda il tuo progetto, non una risposta generica.
• Una modifica per messaggio. Lunghi elenchi di modifiche producono lunghi elenchi di effetti collaterali.
• Chiedi un piano prima dei passi importanti. "Prima di cambiare qualsiasi cosa, elenca cosa cambierai e aspetta il mio OK."
• Incolla gli errori esatti. Il testo completo dell'errore vale più di qualsiasi descrizione.
• Chiedi cosa è cambiato. "Riassumi con parole semplici le tue ultime tre modifiche" ti tiene orientato quando non leggi il codice.

Altri sono nella nostra guida rapida ai prompt per il vibe coding.

Tienilo sicuro

• Non incollare mai password o chiavi API reali in una conversazione con ChatGPT. Se la tua app ha bisogno di una chiave, conservala nei segreti del progetto. Gli strumenti di Mythex riportano solo i nomi dei segreti, mai i valori.
• Prima di pubblicare, verifica che gli utenti non possano vedere i dati degli altri e che nessuna chiave sia finita in codice che gira nel browser. La nostra guida il vibe coding è sicuro? elenca i controlli con prompt da incollare.

Usi anche Claude? La guida gemella tratta il vibe coding con Claude e Claude Code. Per una visione modello per modello, vedi ChatGPT vs Claude vs Gemini per creare app.

Domande