Registra automaticamente una demo di un'app web con l'IA

Ora puoi registrare automaticamente una demo di un'app web scrivendo cosa mostrare e affidandolo a un agente IA che clicca nel tuo prodotto all'interno di un browser cloud mentre registra. L'utilizzabilità del risultato dipende da ciò che imposti prima dell'avvio: l'account a cui accede, i dati sullo schermo e le istruzioni che scrivi. Questa guida copre ogni aspetto, cosa fare quando l'agente si blocca e quando uno script Playwright o Puppeteer è lo strumento migliore.

È anche il modo più diretto per ottenere una demo di prodotto senza registrare lo schermo personalmente. Se il tuo prodotto non è un'app web pubblica, o hai solo una presentazione o un URL, gli altri metodi senza registrazione verso la fine coprono questi casi.

Come funziona la registrazione automatica di siti web#

In Clevera, l'agente di registrazione IA accetta 2 input: una pagina di avvio e un'istruzione scritta che descrive cosa mostrare. Un agente IA apre la pagina di avvio in un browser cloud, esegue i passaggi e registra la sessione. Puoi guardarlo mentre lavora, prendere il controllo del browser in qualsiasi momento e restituirlo quando hai finito.

Per impostazione predefinita, l'agente è in sola lettura. Può navigare, aprire menu e leggere schermate, ma non creerà né modificherà nulla a meno che tu non glielo permetta. La registrazione finale finisce nella tua libreria come qualsiasi altra registrazione, e puoi trasformarla in un video tutorial narrato, una demo di prodotto o un articolo.

Passaggio 1: Prepara un account demo e dati demo#

Tutto ciò che l'agente vede finisce nel video. Configura l'account prima di scrivere anche solo un'istruzione.

• Usa un account demo dedicato. Non puntare mai l'agente a un account admin in produzione. Un workspace demo con il proprio login tiene i dati reali dei clienti fuori dallo schermo e limita ciò che un eventuale errore può toccare.
• Inserisci dati realistici. Una dashboard vuota rende la demo scadente. Aggiungi da 10 a 20 record con nomi, importi e date credibili, in modo che tabelle, grafici e risultati di ricerca sembrino usati da un team reale. Evita "Test 1", "asdf" e nomi di clienti reali.
• Imposta lo stato da cui inizia il flusso. Se la demo mostra "crea il tuo primo progetto", assicurati che non esista ancora alcun progetto. Se mostra la modifica di una fattura, assicurati che la fattura sia presente e abbia un nome chiaro a cui l'istruzione possa fare riferimento.
• Elimina le interruzioni una tantum. Chiudi tour di onboarding, modali "novità" e banner di prova in quell'account per primi. Qualsiasi cosa appaia una volta per utente apparirà nella tua registrazione.
• Verifica che l'app sia raggiungibile da internet. L'agente gira in un browser cloud, quindi non può aprire localhost, un server di staging dietro la tua VPN o qualsiasi cosa con IP limitato al tuo ufficio. Usa una demo pubblica o un ambiente sandbox.

Passaggio 2: Scrivi un'istruzione che l'agente possa seguire#

La maggior parte delle registrazioni IA scadenti deriva da istruzioni vaghe. L'agente fa ciò che hai scritto, nell'ordine in cui l'hai scritto, e colma le lacune con supposizioni. Le buone istruzioni si leggono come un breve script di test scritto per una persona che non ha mai visto il tuo prodotto.

Segui 4 regole:

1. Nomina le schermate. Usa le etichette che appaiono nell'interfaccia: "Apri Fatturazione dalla barra laterale sinistra", non "vai alla sezione denaro".
2. Dai l'ordine. Numeri i passaggi. Se l'ordine è importante per la storia (configurazione, poi utilizzo, poi vedere il risultato), specificalo.
3. Indica elementi esatti. Nomina il pulsante, la scheda, il campo o il record: "Clicca sulla fattura INV-1042", "Apri il menu a tendina Filtri e scegli Scadute".
4. Dì dove fermarti. Termina sulla schermata di risultato che lo spettatore dovrebbe ricordare e dì all'agente di rimanere lì per un momento.

Ecco la differenza nella pratica.

Istruzione scadente:

Mostra come funziona la nostra fatturazione.

L'agente deve decidere quali schermate contano, quale record aprire e quando ha finito. Otterrai un tour di qualsiasi cosa trovi per prima.

Migliore, ma ancora imprecisa:

Mostra come creare una fattura e inviarla a un cliente.

Obiettivo chiaro, ma nessun punto di partenza, nessun cliente, nessuna voce. Con un agente in sola lettura, questo non può avere successo, perché creare una fattura è un'azione di scrittura.

Buona istruzione:

Inizia dalla Dashboard. 1) Clicca su Fatture nella barra laterale sinistra. 2) Clicca sul pulsante Nuova fattura in alto a destra. 3) In Cliente, scegli "Northwind Studio". 4) Aggiungi una voce: "Consulenza design", quantità 1, prezzo 2.400. 5) Clicca Salva bozza. 6) Apri la bozza e clicca Anteprima, poi fermati sulla schermata di anteprima per 3 secondi. Non cliccare Invia.

Questo nomina ogni schermata ed elemento, usa il cliente esatto dai tuoi dati di prova e traccia una linea chiara sull'unica azione che non vuoi che venga eseguita. Ti dice anche, prima di iniziare, che questa esecuzione richiede permessi di creazione (vedi Passaggio 4).

Alcune abitudini in più aiutano:

• Un flusso per registrazione. "Crea una fattura, poi imposta un programma ricorrente, poi esporta un report" sono 3 video. Esecuzioni più brevi sono più facili da correggere e riutilizzare.
• Specifica i valori da digitare. Se l'agente deve inventare del testo, potrebbe inventare qualcosa di strano davanti alla telecamera.
• Menziona stranezze note. "Il pulsante Salva è disabilitato finché il campo prezzo non perde il focus" risparmia all'agente alcuni clic confusi.

Passaggio 3: Scegli un'opzione di accesso#

La maggior parte delle demo di app web si trova dietro un login. Hai 3 opzioni:

L'account demo del Passaggio 1 ripaga qui. Una password solo per la demo con accesso a dati solo per la demo è la scelta a basso rischio quando fornisci un login. Se la tua azienda accede tramite SSO con 2FA, digitarlo tu stesso è solitamente più veloce che cercare di farcelo fare all'agente.

Passaggio 4: Decidi tra sola lettura o creazione/modifica#

La sola lettura è l'impostazione predefinita e copre più demo di quanto ti aspetteresti (i rischi di lasciare che un agente scriva sono nella sicurezza dell'agente di registrazione IA): navigare, filtrare, cercare, aprire record, cambiare schede e mostrare report.

Consenti la creazione o la modifica solo quando il flusso ne ha realmente bisogno (creare un record, cambiare un'impostazione, inviare un modulo) e solo su un account demo. Poi fai 2 cose:

• Scrivi il punto di arresto nell'istruzione, come in "Non cliccare Invia" sopra. Le azioni che inviano email, addebitano carte o pubblicano su integrazioni dovrebbero rimanere fuori dall'esecuzione, o essere disconnesse nel workspace demo.
• Ripristina i dati demo in seguito, in modo che la prossima esecuzione inizi dallo stesso stato.

Passaggio 5: Prendi il controllo quando l'agente si blocca#

Alcune schermate mettono in difficoltà qualsiasi browser automatizzato. Pianifica per loro invece di rieseguire l'intero flusso:

• Banner dei cookie e pop-up di consenso. Prendi il controllo, accetta o chiudi, restituisci il controllo.
• Selettori di data personalizzati e drag-and-drop. I widget insoliti sono dove gli agenti sprecano più tempo. Scegli la data tu stesso e restituisci il controllo.
• Captcha. Esistono per fermare l'automazione. Risolvili tu stesso.
• Codici 2FA. Digita il codice dal tuo telefono, poi restituisci il controllo.

Quando restituisci il controllo, l'agente riprende dalla schermata in cui lo lasci. Se il passaggio di controllo appare nella registrazione, taglialo nell'editor.

Passaggio 6: Mantieni le esecuzioni brevi per contenere i crediti#

Il registratore IA utilizza crediti in base a quanto tempo lavora l'IA, su ogni piano. Questo rende l'istruzione una leva sui costi. Un'istruzione precisa su un account preparato finisce velocemente. Una vaga su un account pieno di pop-up brucia tempo a esplorare, riprovare e attendere. Le quantità di crediti del piano sono sulla pagina dei prezzi.

Cosa diventa la registrazione#

La ripresa grezza è l'input, non il risultato finale. Dalla stessa registrazione AI puoi generare:

• Un video tutorial. Clevera copre ogni azione necessaria in ordine, scrive il copione e aggiunge una voce fuori campo AI, così nessuno deve narrare dal vivo. È il formato ideale per centri assistenza e onboarding. Scopri come funziona nel creatore di tutorial AI.
• Una demo di prodotto. L'AI qui è selettiva: può saltare riprese di scarso valore, riordinare le clip e narrare i risultati invece di ogni singolo clic. È il formato per pagine di vendita e di lancio. Il nostro generatore di demo di prodotto copre i formati demo disponibili.
• Un articolo. Un tutorial scritto con screenshot selezionati automaticamente e didascalie, per documentazione e SEO.

Ognuno è un elemento di contenuto separato; video e articoli vengono tradotti in 74 lingue. Quando l'interfaccia cambia, le modifiche alla narrazione e al testo si aggiornano sui link ospitati e sugli embed, ma le riprese in sé non cambiano. Esegui nuovamente la stessa istruzione per ottenere riprese aggiornate; come aggiornare i video tutorial dopo un cambio di interfaccia spiega quando è necessario registrare di nuovo e quando basta una modifica.

Se non sei sicuro di quale formato serva al tuo pubblico, il nostro confronto tra demo interattive e video di prodotto e la guida su come creare un video tutorial analizzano i compromessi.

La nostra prima prova: 1 istruzione, 78 secondi, 9 crediti#

Nell'ottobre 2026 abbiamo eseguito il registratore AI su TodoMVC, un'app demo pubblica, con questa istruzione:

Aggiungi tre todo: 'Scrivi post di lancio', 'Registra demo', 'Invia newsletter'. Segna 'Registra demo' come completato. Poi clicca sul filtro Active per mostrare solo i todo aperti.

L'accesso era impostato su Nessuno. Abbiamo attivato Consenti modifiche, perché aggiungere e completare todo sono operazioni di scrittura, e lo abbiamo fatto solo perché è un'app demo pubblica senza dati reali. Per il tuo prodotto, segui il Passaggio 4.

L'agente ha fatto esattamente ciò che abbiamo scritto, in ordine, senza tentativi falliti o clic errati che abbiamo notato, e non abbiamo dovuto intervenire. L'esecuzione ha richiesto circa 78 secondi di tempo reale e ha prodotto 58 secondi di riprese per un compito che una persona svolge in circa 20, perché l'agente fa pause tra i passaggi. Clevera lo ha tagliato in un video tutorial di 0:40 con 2 capitoli, 6 passaggi e zoom automatici a 1.5x e 1.8x, in circa 50 secondi. Crediti: 5 per l'analisi della registrazione e 4 per il tutorial, 9 in totale.

Il video tutorial di 0:40 creato da Clevera a partire da quella registrazione AI, non modificato.

Cosa osservare: le riprese sono risultate sbiadite e a basso contrasto, quindi controllale prima di pubblicare. E la nostra istruzione non era numerata. Ha funzionato su un flusso di 3 passaggi perché abbiamo specificato ogni valore da digitare e il filtro esatto da cliccare. Per flussi più lunghi, numera i passaggi.

L'alternativa basata su script: Playwright e Puppeteer#

I team di ingegneria registrano i browser con script di automazione da anni e, per alcuni lavori, uno script è lo strumento migliore.

Playwright registra video nativamente. In Playwright Test imposti l'opzione video su 'on', 'retain-on-failure' o 'on-first-retry'; con la libreria passi recordVideo a browser.newContext() con un dir e un eventuale size. 2 dettagli possono trarre in inganno. I video vengono salvati solo quando il contesto del browser si chiude, quindi devi await context.close(). Inoltre, il video scala il viewport per adattarsi a 800x800, quindi imposta tu stesso il viewport e size se vuoi una ripresa nitida a 1080p. Non devi nemmeno scrivere i selettori a mano: npx playwright codegen genera lo script mentre clicchi nell'app.

Puppeteer ha page.screencast(), che registra WebM a 30 FPS di default e richiede ffmpeg sulla macchina. Dalla versione 25.13 di Puppeteer, la documentazione lo indica come obsoleto a favore di page.record(), che esporta in MP4.

Uno script è la scelta migliore quando:

• Vuoi che lo stesso flusso venga registrato a ogni rilascio, attivato dalla CI senza che nessuno debba guardare.
• La registrazione funge anche da test e ti interessano i fallimenti tanto quanto le riprese.
• La tua app si trova dove un browser cloud non può arrivare, come una rete di staging privata accessibile solo dal tuo runner CI.
• Hai ingegneri che già mantengono test end-to-end e i selettori sono stabili.

L'agente è la scelta migliore quando:

• La persona che ha bisogno del video lavora nel product marketing, nelle vendite o nel supporto e non scrive codice.
• Il flusso è unico o cambia spesso: una demo specifica per un prospect, una nuova funzionalità, un articolo di aiuto.
• Hai bisogno di un video finito e narrato, non di riprese grezze. Uno script ti dà solo una cattura schermo silenziosa; narrazione, zoom e montaggio restano a tuo carico.

I 2 approcci si combinano bene. Clevera accetta video caricati, incluse registrazioni silenziose, quindi un team può registrare un flusso con Playwright nella CI e caricare il file per generare il tutorial o la demo narrata.

Altri modi per creare una demo di prodotto senza registrazione schermo#

Una ripresa pulita richiede solitamente un account ordinato, un copione da seguire mentre clicchi, l'assenza di errori e ogni modifica all'interfaccia costringe a rifare tutto. Il registratore AI elimina questo problema per le web app. Quando non è la soluzione adatta, hai comunque opzioni che non richiedono registrazioni:

Da una presentazione, PDF o screenshot#

Usa questo metodo quando la funzionalità non è ancora rilasciata, l'app non è pubblica o non si tratta di una web app. Carica una presentazione PDF o screenshot, scegli un tipo di demo come Nuova funzionalità e aggiungi una riga di indicazioni ("Il pubblico sono amministratori esistenti, meno di 90 secondi"). Il testo delle slide guida la narrazione che Clevera scrive e doppia, quindi testi specifici ("Esporta qualsiasi report in CSV con 1 clic") funzionano meglio degli slogan. Per un'app desktop, da 8 a 10 screenshot ben scelti possono diventare una chiara guida narrata. Il limite: non ci sono clic dal vivo o cursore, quindi è più adatto a un'anteprima di lancio che a un video di formazione "clicca esattamente qui".

Da un URL o poche frasi#

Per una clip breve per i social, annunci o la parte superiore di una landing page, i tipi social & promo di Clevera (da Starter in su, in Beta) non richiedono riprese. Incolla un link e Clevera estrarrà fatti, screenshot e logo del prodotto dalla pagina, oppure descrivi il prodotto in poche frasi; l'AI scriverà la clip come motion graphics con musica e, dove previsto dal tipo, una voce fuori campo. Tour del prodotto, focus sulle funzionalità e annuncio di funzionalità sono i tipi più vicini a una demo, e il tipo avatar AI (anche questo da Starter in su, Beta) aggiunge un presentatore. Questi sono promozionali, non formativi: mostrano cos'è il prodotto, non un flusso di lavoro reale.

Strumenti per avatar e demo interattive#

Gli strumenti per avatar come HeyGen trasformano uno script o un link di prodotto in un video guidato da un presentatore; per il software, le riprese dello schermo devono comunque provenire da qualche parte. Gli strumenti interattivi come Arcade e Supademo producono demo cliccabili invece di video, ma qualcuno deve comunque cliccare nel prodotto per acquisirle. Il nostro confronto tra demo interattive e video di prodotto spiega quando ciascuno converte meglio.

Quale metodo si adatta a quale lavoro#

Nei nostri test di ottobre 2026 il divario era chiaro. L'esecuzione del registratore AI sopra citata più una panoramica prodotto di 0:55 è costata 11 crediti e ha mostrato clic reali. Un focus di 35 secondi generato da clevera.ai con Ricerca sito web è costato 96 crediti, ha richiesto circa 7 minuti e si è aperto su una scena non pertinente che avremmo dovuto correggere prima di pubblicare. Le riprese reali erano più economiche e più vicine a una demo; la clip promozionale serve per la visibilità, non per le guide passo-passo.

Limiti da conoscere prima di iniziare#

• Solo web. Il registratore AI registra siti web e web app in un browser cloud. Non registra software desktop o app mobile native. Per flussi desktop, o flussi web che preferisci cliccare tu stesso, usa l'app desktop Clevera (macOS o Windows).
• Solo app raggiungibili. Niente localhost, staging accessibili solo via VPN o strumenti con IP in whitelist.

Inizia con un flusso che il tuo team di supporto spiega ogni settimana, su un account demo, con istruzioni numerate che nominano ogni pulsante. Guarda la prima esecuzione, prendi nota di dove sei dovuto intervenire e integra quelle note nelle istruzioni per la successiva.

FAQ#

Posso creare una demo di prodotto senza registrare affatto lo schermo? Sì. Il registratore AI registra una web app pubblica per te in un browser cloud, un deck PDF o degli screenshot non necessitano di registrazione, e un URL o un prompt diventano una clip in stile promozionale.

Come evito che dati reali dei clienti finiscano nella demo? Punta l'agente verso un account demo dedicato popolato con dati fittizi realistici (Passaggio 1), mai un account admin in produzione.

Il registratore AI funziona con software desktop? No. Registra solo siti web e web app. Per software desktop, registra con l'app desktop Clevera o crea la demo partendo da screenshot.

Posso creare una demo gratuitamente? Il piano Free include video tutorial, demo di prodotto e articoli fino a 3 minuti, condivisibili tramite link o embed (i download MP4 iniziano dal piano Starter). La registrazione AI utilizza crediti in ogni piano; le clip social e promozionali e l'avatar AI richiedono il piano Starter o superiore.