Crea app in Google AI Studio

Questa pagina descrive come utilizzare Google AI Studio per creare (o "vibe code") e distribuire rapidamente app che testano le funzionalità più recenti di Gemini, come Nano Banana e l'API Live. Google AI Studio ora supporta i runtime full-stack, consentendoti di creare applicazioni robuste con logica lato server, gestione sicura dei segreti e supporto dei pacchetti npm, il tutto tramite prompt in linguaggio naturale.

Inizia

Inizia a fare vibe coding nella modalità Crea di Google AI Studio. Puoi iniziare a creare in diversi modi:

  • Inizia con un prompt: in modalità di creazione, utilizza la casella di immissione per inserire una descrizione di ciò che vuoi creare. Seleziona Chip AI per aggiungere funzionalità specifiche come la generazione di immagini o i dati di Google Maps al prompt. Puoi anche dire cosa vuoi usare il pulsante di conversione della voce in testo.
  • Pulsante"Mi sento fortunato": se hai bisogno di un'ispirazione creativa, utilizza il pulsante "Mi sento fortunato" e Gemini genererà un prompt con un'idea di progetto per iniziare.
  • Remixare un progetto dalla galleria: apri un progetto dalla galleria di app e seleziona Copia app.

Una volta eseguito il prompt, vedrai generati il codice e i file necessari, con un'anteprima live della tua app che apparirà sul lato destro.

Che cosa viene creato?

Quando esegui il prompt, AI Studio crea un'applicazione completa. Per impostazione predefinita, crea un ambiente full stack che può includere:

  • Lato client: un frontend web (React è l'impostazione predefinita).
  • Lato server: un runtime Node.js che consente chiamate API sicure, connessioni al database e utilizzo di pacchetti npm.

Puoi visualizzare il codice generato selezionando la scheda Codice nel riquadro di anteprima a destra. L'agente antigravità gestisce in modo intelligente più file nello stack, assicurandosi che le modifiche vengano propagate correttamente.

L'agente Antigravity

L'agente Antigravity è la principale funzionalità di AI all'interno di Google Antigravity e ora i componenti principali del framework dell'agente alimentano l'esperienza della modalità Crea in Google AI Studio. Va oltre la semplice generazione di codice mantenendo il contesto dell'intero progetto, gestendo più file e comprendendo istruzioni complesse per creare applicazioni full-stack robuste.

Le sue funzionalità principali includono:

  • Consapevolezza del contesto: mantiene il contesto dei prompt precedenti e degli stati dei file.
  • Gestione di più file: gestisce le dipendenze tra più file.
  • Esecuzione verificata: verifica gli aggiornamenti del codice per ridurre le allucinazioni.

Funzionalità full-stack

Google AI Studio sfrutta la potenza dell'ecosistema web moderno, consentendoti di creare prototipi non solo lato client.

  • Runtime lato server e npm: utilizza la vasta libreria di pacchetti npm. L'agente identificherà e installerà automaticamente i pacchetti necessari per la tua app (ad es. librerie specifiche per la visualizzazione dei dati o client API). Se vuoi, puoi anche richiedere pacchetti specifici.
  • Gestione dei secret: archivia in modo sicuro chiavi API e secret nel menu Impostazioni. Sono accessibili nel codice lato server, in modo da non essere esposti lato client.
  • Multiplayer: crea esperienze di collaborazione in tempo reale direttamente in AI Studio. Il runtime lato server gestisce lo stato e le connessioni necessarie per consentire agli utenti di interagire tra loro.
  • Integrazione di Firebase: provisioning e configurazione automatici di Firebase, incluso il database Firestore (archiviazione permanente dei dati) e Firebase Authentication (flussi di accesso, in particolare "Accedi con Google"). L'agente gestisce l'intera procedura di configurazione e scrive persino il codice nella tua app per questi servizi.

Scopri di più sullo sviluppo di app full-stack

Continua a creare

Una volta che Google AI Studio genera il codice iniziale per la tua applicazione, puoi continuare a perfezionarlo:

Creare in Google AI Studio

  • Itera con Gemini: utilizza il riquadro della chat in modalità di creazione per chiedere a Gemini di apportare modifiche, aggiungere nuove funzionalità o cambiare lo stile.
  • Modifica il codice direttamente: apri la scheda Codice nel riquadro di anteprima per apportare modifiche in tempo reale.

Sviluppo esterno

Per flussi di lavoro più avanzati, puoi esportare il codice e lavorare nell'ambiente che preferisci:

  • Scarica e sviluppa localmente: esporta il codice generato come file ZIP e importalo nell'editor di codice.
  • Push su GitHub: integra il codice con i processi di sviluppo e deployment esistenti eseguendone il push in un repository GitHub.

Funzionalità principali

Google AI Studio include diverse funzionalità per rendere il processo di creazione intuitivo e visivo:

  • Crea e itera app full stack: crea app full stack con un semplice prompt e itera tramite la modalità chat o annotazione. La modalità Annotazione ti consente di evidenziare qualsiasi parte dell'interfaccia utente della tua app e descrivere la modifica che vuoi apportare.
  • Condividi e implementa la tua app: puoi condividere le tue creazioni con altri per collaborare o mostrare il tuo lavoro. Quando l'app è pronta, esegui il deployment in Cloud Run.
  • Galleria di app: la galleria di app offre una raccolta visiva di idee per progetti. Puoi sfogliare le possibilità offerte da Gemini, visualizzare l'anteprima delle applicazioni all'istante e remixarle per personalizzarle.

Eseguire il deployment o archiviare l'app

Una volta che l'applicazione è pronta, puoi eseguirne il deployment:

  • Google Cloud Run: esegui il deployment della tua applicazione come servizio scalabile. In base all'utilizzo, potrebbero essere applicati i prezzi di Google Cloud Run.
  • GitHub: esporta il progetto in un repository GitHub.

Limitazioni

Questa sezione elenca le limitazioni attuali della modalità di creazione in Google AI Studio.

Sicurezza delle chiavi API

  • Lato client: non utilizzare mai chiavi API reali direttamente nel codice lato client.
  • Lato server: utilizza la funzionalità di gestione dei secret per gestire le chiavi sensibili in modo sicuro nel runtime lato server.

Deployment al di fuori di Google AI Studio

  • Sebbene tu possa eseguire il deployment della tua app su Cloud Run per un URL pubblico, questa configurazione utilizzerà la tua chiave API per tutte le chiamate all'API Gemini degli utenti.
    • Le app JavaScript vengono eseguite lato client, quindi assicurati che le chiavi API abbiano solo un accesso minimo per evitare perdite o usi impropri di dati. Ad esempio, altri archivi di ricerca di file dello stesso progetto potrebbero essere accessibili agli utenti tramite questo meccanismo.
  • Deployment esterno sicuro: per eseguire un'app in modo sicuro al di fuori di AI Studio (ad es. dopo aver scaricato il file zip), devi spostare la logica che utilizza la chiave API in un componente lato server per impedire l'esposizione della chiave agli utenti finali. Non è necessario se esegui il deployment utilizzando Cloud Run.
  • Avviso di esposizione della chiave: la semplice sostituzione del segnaposto con una chiave API reale in un ambiente lato client è fortemente sconsigliata, in quanto la chiave diventerà visibile a qualsiasi utente.

Errore durante la condivisione delle app

Se condividi la tua app e l'utente finale riscontra un errore 403 Accesso limitato quando utilizza l'URL condiviso, il problema potrebbe essere dovuto a uno dei seguenti motivi:

  • Estensioni del browser: le estensioni per la privacy come Privacy Badger potrebbero bloccare l'app. Disattiva l'estensione per evitare l'errore.
  • Problemi di build: potrebbero esserci problemi con il codice attuale. Chiedi all'agente di "correggere eventuali problemi di compilazione con il codice attuale" e poi condividi di nuovo l'URL.

Domande frequenti

Che cos'è Build in AI Studio?

AI Studio Build è una piattaforma progettata per passare da un semplice prompt a un'applicazione basata sull'AI e pronta per la produzione utilizzando Gemini. Descrivi ciò che vuoi creare con un prompt e Gemini genererà un'app per te. Puoi anche esplorare la nostra galleria per scoprire cosa è possibile fare con l'API Gemini e remixare le app per personalizzarle.

Perché Build chiama l'API Gemini dal codice lato client?

In genere, la best practice è chiamare l'API Gemini dal lato server, in modo da non esporre la chiave API. Tuttavia, AI Studio ha un proxy API Gemini per le chiamate lato client, che allega la chiave API senza esporla nel codice. Per ora generiamo chiamate lato client per utilizzare questo proxy, in quanto semplifica il codice e ti consente di condividere la tua app con altri senza dover fornire una chiave API.

La mia chiave API è esposta quando condivido app?

Non utilizzare una chiave API reale nella tua app. Utilizza invece un valore segnaposto. process.env.GEMINI_API_KEY è impostato su un valore segnaposto che puoi utilizzare. Quando un altro utente utilizza la tua app, AI Studio esegue il proxy delle chiamate all'API Gemini, sostituendo il valore del segnaposto con la chiave API dell'utente (non la tua). Non utilizzare una chiave API reale nella tua app, poiché il codice è visibile a chiunque possa visualizzare la tua app.

Chi può vedere le mie app?

Per impostazione predefinita, la tua app è privata. Puoi condividere la tua app con altri utenti per consentire loro di utilizzarla. Gli utenti con cui condividi la tua app possono visualizzarne il codice e copiarlo per i propri scopi. Se condividi la tua app con l'autorizzazione di modifica, gli altri utenti possono modificare il codice dell'app.

Posso eseguire app al di fuori di AI Studio?

Puoi eseguire il deployment della tua app in Cloud Run da AI Studio, che assegnerà alla tua app un URL pubblico. Viene implementata insieme a un server proxy che manterrà privata la tua chiave API, ma l'app implementata utilizzerà la tua chiave API per tutte le chiamate API Gemini degli utenti. Puoi anche scaricare l'app come file ZIP. Se sostituisci il valore segnaposto con una chiave API reale, dovrebbe comunque funzionare. Tuttavia, non devi eseguire il deployment della tua app in questo modo, poiché qualsiasi utente potrà vedere la chiave API. Per eseguire un'app in modo sicuro al di fuori di AI Studio è necessario spostare parte della logica sul lato server, in modo che la chiave API non sia più esposta.

Posso sviluppare app localmente con i miei strumenti e poi condividerle qui?

Questa funzionalità non è ancora disponibile. Siamo felici di supportare altri casi d'uso per le app in futuro. Se hai qualcosa di specifico in mente, ti invitiamo a inviarci un feedback.

Come posso utilizzare un database o un altro spazio di archiviazione con le mie app?

Le app AI Studio sono app standard in esecuzione in un container Cloud Run. Puoi utilizzare qualsiasi soluzione di archiviazione a cui puoi connetterti tramite una rete, a condizione che non ci sia un firewall che impedisca l'accesso da un intervallo IP dinamico.

Stiamo lavorando per aggiungere il supporto diretto per l'archiviazione in futuro, che potrai configurare direttamente in AI Studio.

Per garantire che gli spettatori siano a conoscenza dell'utilizzo della webcam o di altri dispositivi da parte di un'app, richiediamo un'ulteriore conferma prima che l'app possa accedere a queste API Navigator. Gli autori di app possono aggiungere queste richieste di autorizzazione al file metadata.json della loro app. Ad esempio:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

I valori supportati per requestFramePermissions sono un sottoinsieme delle funzionalità controllate dalle norme standard.

Come faccio a utilizzare GitHub con le mie app?

L'integrazione di GitHub di AI Studio ti consente di creare un repository per il tuo lavoro e di eseguire il commit delle ultime modifiche. Al momento non supportiamo il pull delle modifiche remote.

Posso concedere ad altri utenti l'accesso in modifica alla mia app?

Questa opzione non è ancora supportata, ma lo sarà a breve.

Perché la mia app è stata segnalata per violazione delle norme?

Disponiamo di sistemi che esaminano automaticamente le app per garantire la conformità alle nostre norme. Se rileviamo che un'app viola le nostre norme, l'app verrà rimossa da AI Studio. Le violazioni delle norme possono includere, a titolo esemplificativo:

  • App che contengono malware, phishing o furto d'identità
  • App che mostrano o distribuiscono contenuti che violano le norme relative alle immagini pedopornografiche
  • App che mostrano o distribuiscono contenuti che violano le norme relative alle molestie
  • App che mostrano o distribuiscono contenuti che violano le norme relative all'incitamento all'odio
  • App che mostrano o distribuiscono contenuti che violano le norme relative alla tratta di esseri umani
  • App che mostrano o distribuiscono contenuti che violano le norme relative ai contenuti sessualmente espliciti
  • App che mostrano o distribuiscono contenuti che violano le norme relative a contenuti violenti e cruenti
  • App che mostrano o distribuiscono contenuti che violano le norme relative ai contenuti dannosi o pericolosi

Se la tua app è stata segnalata per una violazione delle norme e ritieni che sia stato commesso un errore, puoi presentare un ricorso. La violazione ripetuta delle nostre norme potrebbe comportare la chiusura del tuo accesso ad AI Studio.

Quali sono le mie responsabilità in qualità di sviluppatore di app?

Ti ricordiamo che, in qualità di proprietario della tua applicazione, sei responsabile del suo comportamento e di tutti i dati che gestisce. È incluso quanto segue:

  • Conformità legale e diritti di terze parti: assicurarsi che l'app sia conforme a tutte le leggi e le normative vigenti e non violi i diritti di altri, inclusi i diritti di proprietà intellettuale e i diritti di privacy.
  • Monitoraggio dei contenuti:la conformità a termini aggiuntivi potrebbe essere applicata ad altri servizi utilizzati dalla tua app. Ad esempio, i Termini di servizio di Google Cloud, applicabili a Firestore, richiedono ai clienti che ospitano contenuti di terze parti di pubblicare norme che definiscono i contenuti vietati (ad es. contenuti illegali) e di monitorare la presenza di questi contenuti illegali.
  • Implementazione sicura:implementare le misure di salvaguardia e gli strumenti di moderazione necessari per evitare un uso improprio dell'applicazione.

Tieni presente le restrizioni d'uso nei Termini di servizio.

I Termini di servizio aggiuntivi dell'API Gemini si applicano all'utilizzo delle app presenti nella galleria di app in AI Studio, se non diversamente indicato.

Passaggi successivi