1. Prima di iniziare
Questo codelab autonomo ti guiderà nella creazione di agenti AI con Vertex AI Agent Builder di Google Cloud. Ogni passaggio metterà in evidenza una funzionalità specifica di Agent Builder e ne spiegherà lo scopo.
Prerequisiti
- Una conoscenza di base dell'AI generativa su Google Cloud
- Conoscenza di base dei concetti degli agenti AI
- Conoscenza di base di Gemini Code Assist (facoltativo)
Cosa imparerai a fare
- Come creare un semplice agente AI utilizzando Vertex AI Agent Builder
- Come basare l'agente creato collegando un datastore
- (Facoltativo) Come integrare l'agente AI nel tuo sito web
Che cosa ti serve
- Una mente curiosa
- Un computer funzionante e una connessione Wi-Fi affidabile
- Un progetto Google Cloud con la fatturazione collegata.
Nota: se non hai ancora un progetto Google Cloud, puoi crearne uno seguendo le istruzioni. Puoi anche consultare i servizi del livello senza costi di Google Cloud.
2. Progettare il tuo primo agente AI
Ora puoi creare il tuo agente AI. Prima di iniziare lo sviluppo, però, è essenziale stabilire una visione chiara per l'agente. Poni le seguenti domande chiave:
- Quale problema risolverà? Automatizzerà le attività, fornirà informazioni, offrirà intrattenimento o faciliterà l'esplorazione creativa?
- Quali sono le sue funzioni principali? Eseguirà attività o le delegherà? Genererà testo o una combinazione di media diversi?
- Quali sono i suoi limiti? Sarà in grado di fare tutto in autonomia?
- Quale personalità o personaggio deve avere? Voglio che sia formale, informale, divertente, utile o informativo?
- Quali sono le metriche di successo? Come misurerai l'efficacia dell'agente?
Per velocizzare la procedura, ecco le risposte a queste domande per l'agente di viaggi che creerai oggi:
- Quale problema risolverà?
- Pianificare un viaggio può essere un'attività lunga e stressante. Questa agenzia viaggi aiuterà gli utenti a scoprire destinazioni, pianificare itinerari e prenotare voli e alloggi.
- Quali sono le sue funzioni principali?
- L'agente dovrebbe essere in grado di
- rispondere a domande sulle destinazioni, ad esempio sui requisiti per il visto
- pianificare itinerari adatti agli orari e agli obiettivi degli utenti
- prenotare voli e alloggi
- Quali sono i suoi limiti?
- Per impostazione predefinita, l'agente potrebbe non essere in grado di rispondere a query complesse
- L'agente non sarà in grado di generare immagini visive
- Le conoscenze dell'agente saranno limitate dal modello sottostante
- Quale personalità o personaggio deve avere?
- Questo agente deve essere competente, disponibile ed entusiasta dei viaggi. Deve essere in grado di comunicare le informazioni in modo chiaro e conciso.
- Quali sono le metriche di successo?
- Il successo di questo agente potrebbe essere misurato in base al grado di soddisfazione degli utenti nei confronti dei suoi consigli (esplorazione, pianificazione, prenotazione).
3. Creare un agente AI con Vertex AI Agent Builder
Con Vertex AI Agent Builder, gli agenti AI possono essere creati in pochi passaggi.
Passaggio 1:
- Vai a Vertex AI Agent Builder.
- Dovresti visualizzare la pagina di benvenuto.

- Fai clic sul pulsante CONTINUA E ATTIVA L'API.
Passaggio 2:
- Verrà visualizzata la pagina di creazione dell'app.

- Fai clic sul pulsante CREA UNA NUOVA APP.
Passaggio 3:
- Scegli Agente conversazionale e fai clic su CREA.

Nota:
- Dopo aver fatto clic su CREA, si aprirà una nuova scheda di Agenti conversazionali di Dialogflow.
- Se ti viene chiesto di scegliere un progetto Google Cloud, seleziona il progetto Google Cloud associato al tuo account Gmail corretto.
- Se stai svolgendo questo lab in un nuovo account, ti verrà chiesto di abilitare l'API Dialogflow. Fai clic su Abilita API per abilitarla.

- Se fare clic sul pulsante non funziona, puoi abilitarla manualmente andando direttamente alla pagina API .
- Nella pagina di Dialogflow appena aperta, fai clic su Crea agente.

- Ora ti verranno mostrate alcune opzioni per creare un agente, scegli Crea il tuo.

Passaggio 4:
- Scegli un nome visualizzato (ad es.Compagno di viaggio).
- Per Località, seleziona globale (Global serving, dati at-rest negli Stati Uniti) come Regione.
- Mantieni l'altra configurazione, predefinita
- Fai clic sul pulsante CREA.

Passaggio 5:
- Scegli un nome del playbook (ad es.Agente informativo).
- Aggiungi un obiettivo (ad es. aiutare i clienti a rispondere a domande relative ai viaggi)
- Definisci un'istruzione (ad es.saluta gli utenti, poi chiedi come puoi aiutarli oggi).
- Premi Salva una volta terminato.

Passaggio 6:
- Fai clic sull'icona Attiva/Disattiva simulatore
. - Seleziona l'agente che hai appena creato (ad es.Agente informazioni).
- Scegli il modello di AI generativa sottostante per il tuo agente (ad es. gemini-1.5-flash)
- Prova l'agente avviando una conversazione (ad esempio, digita qualcosa nella casella di testo "Inserisci input utente").

Complimenti! Hai creato correttamente un agente di AI utilizzando Vertex AI Agent Builder.
4. Collegamento di datastore all'agente
Se provi a chiedere all'agente come raggiungere il Wakanda (ad es. "Qual è il modo migliore per raggiungere il Wakanda?"), riceverai una risposta come questa:

Sebbene sia corretto, invece di dire semplicemente "Non posso fornire informazioni" e terminare la conversazione, sarebbe più utile per l'utente se l'agente suggerisse luoghi simili. Questo approccio potrebbe potenzialmente portare gli utenti a prenotare un viaggio tramite l'agente.
Affinché l'agente possa consigliare luoghi simili, puoi fornire ulteriori informazioni tramite i datastore. Funge da knowledge base aggiuntiva a cui l'agente può fare riferimento se non è in grado di rispondere alle domande degli utenti in base alle proprie conoscenze integrate.
Nota:se vuoi chiudere il simulatore, fai di nuovo clic sull'icona del simulatore.
Creare un datastore è semplice: fai clic sul pulsante + Datastore in fondo alla pagina Nozioni di base dell'agente.

Inserisci le seguenti informazioni:
- Nome dello strumento: Posizione alternativa
- Tipo: datastore
- Descrizione: utilizza questo strumento se la richiesta dell'utente contiene una località inesistente
Al termine, fai clic su Salva.
In questo modo viene creato uno strumento di datastore per l'agente per comunicare con il datastore, ma devi comunque creare un datastore effettivo che contenga le informazioni. Per farlo, fai clic su Aggiungi datastore e crea un datastore.


Dopo aver fatto clic su Crea nuovo datastore, si aprirà la pagina di Vertex AI Agent Builder, come mostrato di seguito.
Scegli l'opzione Su Cloud Storage

Una volta completato il passaggio,
- fai clic su FILE (molto importante, altrimenti l'importazione non andrà a buon fine)
- type ai-workshops/agents/data/wakanda.txt
- fai clic su CONTINUA.

Se sei curioso, ecco il contenuto del file di testo fornito:
Places that are similar to Wakanda
- Oribi Gorge in South Africa: The rock formations here are reminiscent of the Warrior Falls in Wakanda.
- Iguazu Falls: Located on the border of Argentina and Brazil, these massive waterfalls were a major inspiration for the Warrior Falls.
- Immerse yourself in Wakandan culture: Read the Black Panther comics, watch the movies, and explore online resources to learn more about Wakandan culture, language, and technology.
- Visit a Disney theme park: While there isn't a dedicated Wakanda land yet, you might be able to meet Black Panther at Disneyland or on a Marvel Day at Sea Disney cruise.
Nella pagina successiva, assegna un nome al datastore (ad es. Wakanda Alternative) e fai clic su CREA.

Come passaggio finale, SELEZIONA l'origine dati appena creata e fai clic su CREA. Puoi visualizzare l'avanzamento dell'importazione del datastore facendo clic sul datastore**.**

Nota:l'attività di importazione richiederà del tempo per essere completata correttamente, quindi nel frattempo puoi esplorare altre opzioni di datastore disponibili per il tuo agente Vertex AI qui.

Se tutto è andato bene, torna alla scheda di Dialogflow e fai clic su Aggiorna. Dovresti vedere il datastore creato nella pagina Datastore disponibili.

Per evitare che l'agente generi allucinazioni, nella configurazione di grounding per l'archivio dati, imposta l'impostazione su Molto basso, che applica restrizioni più rigide all'agente per evitare che inventi cose. Per ora mantieni l'impostazione predefinita, ma puoi esplorarla con impostazioni diverse.

Ora seleziona il datastore aggiunto, fai clic su Conferma e poi su Salva.

Ora torna alla pagina Nozioni di base dell'agente.In fondo alla configurazione del playbook, vedrai che il datastore appena creato(ad es. posizione alternativa) è disponibile per l'uso.Seleziona il datastore (ad es. posizione alternativa) e fai clic sul pulsante Salva nella parte superiore della pagina.


Ci sei quasi. Il passaggio finale consiste nell'includere lo strumento "Posizione alternativa" nelle istruzioni dell'agente. Aggiungi una riga, - Use ${TOOL: Alternative Location} if the user's request contains a location that does not exist, alle istruzioni dell'agente e poi fai clic su Salva.

È tutto pronto. Apriamo di nuovo il simulatore di attivazione/disattivazione e facciamo le stesse domande (ad es.Qual è il modo migliore per raggiungere il Wakanda?).

Complimenti! L'agente ora consiglia luoghi utilizzando le informazioni fornite da un file di testo.
Abbiamo finito di creare il nostro agente AI di Agent Builder. Se vuoi esplorare altre opzioni di personalizzazione dell'agente per migliorare l'esperienza, consulta le attività aggiuntive di seguito.
5. Attività aggiuntive: rendi operativo il tuo agente AI
Nei passaggi precedenti, hai sviluppato un agente AI e lo hai basato su dati di riferimento pertinenti. Nella sezione seguente, affronterai la domanda cruciale su come incorporare questo agente nel tuo sito web, consentendo l'interazione in tempo reale con i tuoi visitatori.
Esistono molti modi per esporre il tuo agente. Puoi esportarlo o pubblicarlo direttamente. Per scoprire le opzioni possibili, consulta la documentazione.
Nell'angolo in alto a destra della scheda Dialogflow, fai clic sul menu Altro e poi su Pubblica agente.

Mantieni tutta la configurazione come Predefinita e fai clic su Abilita API non autenticata.
Nota:l'attivazione dell'API non autenticata è solo a scopo dimostrativo e questa configurazione non è consigliata per l'utilizzo con carichi di lavoro di produzione. Se ti interessa pubblicare in modo sicuro, consulta questa documentazione.

Quando fai clic, dovresti vedere un piccolo snippet di codice CSS:

Basta copiare lo snippet di codice. Integrerai questo snippet di codice in un sito web in un secondo momento.
Per creare un sito web, utilizzerai l'ambiente Cloud Editor. Di seguito sono riportati i passaggi per aprire Cloud Editor:
- Apri la console Google Cloud in un'altra scheda.
- Fai clic sul pulsante Attiva Cloud Shell nell'angolo in alto a destra.
- Fai clic sul pulsante Apri editor.
Se viene visualizzato un prompt per autorizzare Cloud Shell, fai clic su Autorizza per continuare.

Nella sezione seguente, utilizzerai Gemini Code Assist per creare un'applicazione web Python Flask di esempio da integrare con lo snippet dell'agente.
Una volta aperto l'editor di Cloud Shell, fai clic su Gemini Code Assist e accedi al tuo progetto Google Cloud. Se ti viene chiesto di abilitare l'API, fai clic su Abilita.

Al termine, chiediamo a Gemini Code Assist di creare un'app Flask e di integrarvi lo snippet di codice dell'agente AI.
Ecco il prompt di esempio che puoi utilizzare
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
Nota:qui abbiamo richiesto un'app Python Flask. Se preferisci un altro linguaggio di programmazione o framework, puoi utilizzarlo. Gemini Code Assist è in grado di generare diversi linguaggi di programmazione. Per ulteriori dettagli, consulta la sezione Lingue, IDE e interfacce supportati.
Vedrai che lo snippet di codice fornito è già integrato con l'agente AI. Per verificare se il codice fornito è valido e funziona come previsto, puoi seguire le istruzioni fornite da Gemini Code Assist su come eseguire questa sezione di codice della risposta di output.
Snippet di codice di risposta di esempio dell'output:
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)

Come da istruzioni fornite
- Copia lo snippet di codice dell'app Flask di esempio fornito.
- Crea un nuovo file denominato app.py e salvalo.

Nel passaggio successivo viene chiesto di installare Flask per eseguire questo snippet, ma per ora non è necessario perché Cloud Shell ha già installato per impostazione predefinita tutte le utilità di uso comune.

Salva il file (Ctrl + S o Cmd + S) e poi fai clic su Apri terminale, dove eseguirai il codice fornito.
Nel terminale, esegui il comando riportato di seguito.
python app.py
Nota:assicurati di trovarti nella cartella giusta, in cui è presente il file app.py.
L'app Python Flask verrà eseguita sulla porta 5000. Per visualizzare l'anteprima di questa applicazione web, fai clic sull'icona Anteprima web in Cloud Shell. Poi puoi fare clic su Cambia porta, inserire 5000 e fare clic su Cambia e visualizza anteprima per salvare.

Verrà visualizzato un sito web di esempio e sarà già disponibile un agente AI. Basta fare clic sull'agente AI e iniziare a chattare.

Non esitare a provarlo con prompt diversi. Puoi anche chiedere a Gemini Code Assist di abbellire il tuo sito web o di aggiungere altri dati di base all'agente AI e renderlo più intraprendente.
Quando è tutto pronto, il passaggio successivo consiste nel provare a ospitare questo agente AI su Google Cloud in modo che possa essere accessibile a chiunque, ovunque. Per il resto di questo codelab, eseguirai il deployment di questa applicazione Flask di esempio in Cloud Run come container.
Nota:non è limitato solo a Cloud Run (se non sai cos'è Cloud Run, puoi anche chiedere), puoi chiedere a Gemini Code Assist di aiutarti a eseguire il deployment in Google Cloud o ovunque con le best practice. Può aiutarti anche in questa parte.
Torna al terminale Cloud Shell e premi Ctrl + C per terminare il processo. Fai di nuovo clic su Apri editor e chiedi a Gemini Code Assist di aiutarti a inserire l'applicazione in un container e a eseguirne il deployment in Cloud Run.
Can you help me deploy this sample flask app to cloud run service
Fornisce alcune istruzioni e comandi da seguire per ospitare la nostra app nel servizio Cloud Run. Seguiamo le istruzioni.
Ecco la risposta di output di esempio
Passaggi per il deployment in Cloud Run
- Prerequisiti:
- Account Google Cloud:devi disporre di un account Google Cloud con la fatturazione abilitata.
- gcloud CLI: installa e inizializza Google Cloud SDK (gcloud CLI) sulla tua macchina locale. Lo utilizzerai per interagire con Google Cloud dal terminale.
- Docker:installa Docker sulla tua macchina locale. Cloud Run utilizza Docker per containerizzare l'applicazione.
- Configurazione del progetto:assicurati di aver selezionato un progetto Google Cloud in gcloud CLI. Puoi controllare con
gcloud config list projecte impostarlo congcloud config set project YOUR_PROJECT_ID
Nota:poiché stiamo eseguendo l'intera attività in Cloud Shell, non è necessario configurare i progetti
- Crea **
requirements.txt****:**
- Questo file elenca tutti i pacchetti Python di cui la tua app ha bisogno. Nella directory del progetto (dove si trova
main.py), crea un file denominatorequirements.txte aggiungi le seguenti righe
- Crea **
Dockerfile****:**
- Un
Dockerfiledefinisce come creare un'immagine Docker per la tua applicazione. Crea un file denominatoDockerfile(senza estensione) nella directory del progetto e aggiungi i seguenti contenuti:
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- Crea l'immagine Docker:
- Apri il terminale, vai alla directory del progetto ed esegui:
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- Esegui il deployment in Cloud Run:
- Dopo aver creato e caricato l'immagine, esegui il deployment in Cloud Run con il seguente comando:
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
Una volta completati questi passaggi, l'applicazione con l'agente AI integrato sarà disponibile per gli utenti finali.
Congratulazioni e buon apprendimento.
6. Esegui la pulizia
Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, segui questi passaggi:
- Nella console Google Cloud, vai alla pagina Gestisci risorse.
- Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
- Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
- In alternativa, puoi andare a Cloud Run nella console, selezionare il servizio di cui hai appena eseguito il deployment ed eliminarlo.