Creazione di agenti IA con Vertex AI Agent Builder

Informazioni su questo codelab
schedule45 minuti
subjectUltimo aggiornamento: 7 marzo 2025
account_circleScritto da: Thu Ya Kyaw (Googler), Abhishek Sharma (GDE)

Questo codelab a ritmo autonomo ti guiderà nella creazione di agenti AI con Vertex AI Agent Builder di Google Cloud. Ogni passaggio evidenzierà una funzionalità specifica di Agent Builder e ne spiegherà lo scopo.

  • Come creare un semplice agente IA utilizzando Vertex AI Agent Builder
  • Come collegare un datastore per collegare l'agente creato
  • (Facoltativo) Come integrare l'agente AI nel tuo sito web
  • 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 è tutto pronto per creare il tuo agente IA. Tuttavia, prima di iniziare a sviluppare, è essenziale stabilire una visione chiara per il tuo agente. Poniti queste domande chiave:

  • Quale problema risolverà? Automatizzerà le attività, fornirà informazioni, offrirà intrattenimento o faciliterà l'esplorazione delle creatività?
  • Quali sono le sue funzioni principali? Eseguirà attività o le delegherà? Genererà testo o una combinazione di diversi contenuti multimediali?
  • Quali sono i suoi limiti? Sarà in grado di fare tutto in autonomia?
  • Quale personalità o identità deve avere? Voglio che sia formale, informale, umoristico, utile o informativo?
  • Quali sono le metriche di successo? Come misurerai l'efficacia dell'agente?

Per velocizzare la procedura, ecco le risposte alle domande per l'agente di viaggio che creerai oggi:

  • Quale problema risolverà?
  • Pianificare un viaggio può richiedere molto tempo e risultare complicato. Questa agenzia viaggi aiuterà gli utenti a scoprire destinazioni, pianificare itinerari, prenotare voli e alloggi.
  • Quali sono le sue funzioni principali?
  • L'agente dovrebbe essere in grado di
  • rispondere a domande sulle destinazioni, ad esempio i requisiti per i visti
  • Pianificare itinerari adatti ai programmi e agli obiettivi degli utenti
  • prenotare voli e alloggi
  • Quali sono i suoi limiti?
  • L'agente potrebbe non essere in grado di rispondere a query complesse per impostazione predefinita
  • L'agente non potrà generare immagini visive
  • La conoscenza dell'agente sarà limitata dal modello sottostante
  • Quale personalità o identità deve avere?
  • L'agente deve essere competente, disponibile ed entusiasta di viaggiare. Deve essere in grado di comunicare informazioni in modo chiaro e conciso.
  • Quali sono le metriche di successo?
  • Il successo di questo agente potrebbe essere misurato dal grado di soddisfazione degli utenti per i suoi consigli (esplorazione, pianificazione, prenotazione)

3. Creare un agente AI con Vertex AI Agent Builder

Con Vertex AI Agent Builder, gli agenti di IA possono essere creati in pochi passaggi.

Passaggio 1:

  • Vai a Vertex AI Agent Builder.
  • Dovresti visualizzare la pagina di benvenuto. 833886ce0d2645ba.png
  • Fai clic sul pulsante CONTINUA E ATTIVA L'API.

Passaggio 2:

  • Verrà visualizzata la pagina di creazione dell'app. f2d45cc76d62edeb.png
  • Fai clic sul pulsante CREA UNA NUOVA APP.

Passaggio 3:

  • Scegli Agente conversazionale e fai clic su CREA.

732d2cd9e10c9a79.png

Nota:

  1. Dopo aver fatto clic su CREA, si aprirà una nuova scheda di Agenti conversazionali Dialogflow.
  2. Se ti viene chiesto di scegliere un progetto Google Cloud, seleziona il progetto Google Cloud associato al tuo account Gmail corretto.
  3. Se esegui questo laboratorio in un nuovo account, ti verrà chiesto di abilitare l'API Dialogflow. Fai clic su Abilita API per farlo.

238281df06301db0.png

  • Se il clic sul pulsante non funziona, puoi attivarla manualmente andando direttamente alla pagina dell'API .
  • Nella pagina di Dialogflow appena aperta, fai clic su Crea agente.

42515e46bc63506d.png

  • Ti verranno mostrate alcune opzioni per la creazione di un agente. Scegli Crea il tuo.

8af6bf0853f20768.png

Passaggio 4:

  • Scegli un nome visualizzato (ad es. Travel Buddy)
  • Per Località, seleziona globale (pubblicazione a livello globale, dati at-rest negli Stati Uniti) come Regione
  • Mantieni l'altra configurazione, predefinita
  • Fai clic sul pulsante CREA.

4e0dea29e5d8acde.png

Passaggio 5:

  • Scegli un nome per il playbook (ad es. Agente informazioni)
  • Aggiungi un obiettivo (ad es. Aiutare i clienti a rispondere a query relative ai viaggi)
  • Definisci un'istruzione (ad es. Saluta gli utenti, poi chiedi come puoi aiutarli oggi)
  • Premi Salva al termine dell'operazione.

f8bfd605ddd97cf8.png

Passaggio 6:

  • Fai clic sull'icona Attiva/Disattiva simulatore 72588cbe8734f54e.png
  • Seleziona l'agente che hai appena creato (ad es.Agente informazioni).
  • Scegli il modello di IA generativa sottostante per l'agente (ad es. gemini-1.5-flash)
  • Testa l'agente avviando una conversazione con lui (ad es.digita qualcosa nella casella di testo "Inserisci input utente").

3ac3cf54a1e2098.png

Complimenti! Hai appena creato un agente AI utilizzando Vertex AI Agent Builder.

4. Collegamento dei datastore all'agente

Prova a chiedere all'agente come arrivare a Wakanda (ad es. "Qual è il modo migliore per raggiungere Wakanda?"). Riceverai una risposta come questa:

5baa2dbabe2941a2.png

Sebbene questa risposta sia corretta, sarebbe più utile per l'utente se l'agente, anziché limitarsi a dire "Non posso fornire informazioni" e terminare la conversazione, suggerisse luoghi simili. Questo approccio potrebbe potenzialmente portare gli utenti a prenotare effettivamente 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 sue conoscenze integrate.

Nota:se vuoi chiudere il simulatore, fai di nuovo clic sull'icona del simulatore.

La creazione di un datastore è semplice: fai clic sul pulsante + Datastore nella parte inferiore della pagina Nozioni di base sull'agente.

6c3ef19fefc46af7.png

Inserisci le seguenti informazioni:

  • Nome dello strumento:Posizione alternativa
  • Tipo: datastore
  • Descrizione: utilizza questo strumento se la richiesta dell'utente contiene una località che non esiste

Al termine, fai clic su Salva.

Viene creato uno strumento di datastore per consentire all'agente di comunicare con il datastore, ma devi comunque creare un datastore effettivo contenente le informazioni. A tale scopo, fai clic su Aggiungi datastore e Crea un datastore.

65c790a87de8fba8.png

7648d478a6f35cf0.png

Dopo aver fatto clic su Crea nuovo datastore, verrà visualizzata la pagina di Vertex AI Agent Builder, come mostrato di seguito

Scegli l'opzione su Cloud Storage

bff5455fac531509.png

Al termine del passaggio,

  • fai clic su FILE (questo passaggio è molto importante, altrimenti l'importazione non andrà a buon fine)
  • digita ai-workshops/agents/data/wakanda.txt
  • Fai clic su CONTINUA.

d1983baa579eb78c.png

Se vuoi, ecco i contenuti 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.

93eb71e8d019ae24.png

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

de1ac9256cc96f29.png

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

9b5c4a2831728a6b.png

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

a44373b78bd95ff0.png

Per evitare che l'agente abbia allucinazioni, nella configurazione di ancoraggio per il tuo data store, imposta l'impostazione su Molto basso, che applica limitazioni più stringenti all'agente per evitare che inventi cose. Per il momento mantieni l'impostazione predefinita, ma puoi esplorarla in qualsiasi momento con impostazioni diverse.

c1605bd076258050.png

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

40082aebe8b82d7c.png

Ora torna alla pagina Nozioni di base sull'agente.Nella parte inferiore della configurazione del playbook vedrai che il datastore appena creato(ad es. Posizione alternativa) sarà disponibile per l'utilizzo.Seleziona il datastore (ad es. Posizione alternativa) e fai clic sul pulsante Salva nella parte superiore della pagina.

1b6b82fd7f30a598.png

e09af18697b0fd7f.png

Ci sei quasi. Il passaggio finale consiste nell'includere lo strumento "Posizione alternativa" nelle istruzioni dell'agente. Aggiungi una riga, - Utilizza ${TOOL: Posizione alternativa} se la richiesta dell'utente contiene una località che non esiste, alle istruzioni dell'agente e poi fai clic su Salva.

3134d9eadca34e21.png

È tutto a posto. Apriamo di nuovo il simulatore di pulsanti e chiediamo le stesse domande (ad es. Qual è il modo migliore per raggiungere Wakanda?)

6cdee598391fc82a.png

Complimenti! Ora l'agente consiglia i luoghi utilizzando le informazioni fornite da un file di testo.

È tutto, abbiamo completato la creazione del nostro agente AI per la creazione di agenti. Se vuoi saperne di più sulla personalizzazione dell'agente per un'esperienza migliore, consulta le attività aggiuntive di seguito.

5. Attività aggiuntive: rendere disponibile l'agente AI

Nei passaggi precedenti hai sviluppato un agente di IA e lo hai basato su dati di riferimento pertinenti. Nella sezione seguente, affronterai la questione cruciale di come incorporare questo agente nel tuo sito web, consentendo l'interazione in tempo reale con i visitatori.

Esistono molti modi per esporre l'agente. Puoi esportarlo o pubblicarlo direttamente. Puoi consultare la documentazione per scoprire le possibili opzioni.

Nell'angolo in alto a destra della scheda Dialogflow, fai clic su Menu extra e poi su Pubblica agente.

a1b109fa9d7cb51d.png

Mantieni invariata 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 il carico di lavoro di produzione. Se ti interessa la pubblicazione sicura, consulta questa documentazione.

ef0f24db780a185e.png

Dopo aver fatto clic, dovresti vedere un piccolo snippet di codice CSS:

c40d12f6207bf5b4.png

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. Per aprire Cloud Editor:

  1. Apri la console Google Cloud in un'altra scheda.
  2. Fai clic sul pulsante Attiva Cloud Shell nell'angolo in alto a destra.
  3. Fai clic sul pulsante Apri editor.

Se viene richiesto di autorizzare Cloud Shell, fai clic su Autorizza per continuare.

d23192eca480f00c.png

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.

93112cce3e8d963b.png

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 chiesto un'app Python Flask. Se preferisci un altro linguaggio di programmazione o framework, non esitare a utilizzarlo. Gemini Code Assist è in grado di generare diversi linguaggi di programmazione. Per ulteriori dettagli, consulta la sezione Lingue, IDE e interfacce supportate.

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.

Sample Output Response Code Snippet -

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)

3dd3246c5fceb1d4.png

Come da istruzioni fornite

  1. Copia lo snippet di codice dell'app Flask di esempio fornito.
  2. Crea un nuovo file denominato app.py e salvalo.

4e58cfcf95f65d38.png

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

b657b535710fd8f3.png

Salva il file (Ctrl + S o Cmd + S) e poi fai clic su Apri terminale, dove eseguirai il codice fornito.

Nel terminale, esegui il seguente comando

python app.py

Nota:assicurati di trovarti nella cartella corretta, dove è presente il file app.py

L'app Flask di Python 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, inserisci 5000 e su Cambia e visualizza anteprima per salvarlo.

59ed7b08133b82bf.png

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

35a4b5abdd299efe.png

Non esitare a provarlo con prompt diversi. Puoi anche chiedere all'Assistente codice Gemini di abbellire il tuo sito web o aggiungere altri dati di base all'agente IA e renderlo più utile.

Quando è tutto pronto, come passaggio successivo puoi provare a ospitare questo agente IA su Google Cloud in modo che chiunque possa accedervi ovunque si trovi. Per il resto di questo codelab, eseguirai il deployment di questa applicazione Flask di esempio in Cloud Run come contenitore.

Nota: non è limitato solo a Cloud Run (se non sai cosa sia Cloud Run, puoi anche chiedere di questo). Puoi chiedere all'assistenza di Gemini Code 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 interrompere il processo. Fai di nuovo clic su Apri editor e chiedi a Gemini Code Assist di aiutarti a eseguire il containerizzazione dell'applicazione 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. Segui le istruzioni

Ecco la risposta di output di esempio

Passaggi per eseguire il deployment in Cloud Run

  1. Prerequisiti:
  • Account Google Cloud:devi disporre di un account Google Cloud con la fatturazione abilitata.
  • Interfaccia a riga di comando gcloud:installa e inizializza l'SDK Google Cloud (interfaccia a riga di comando gcloud) 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 avere selezionato un progetto Google Cloud in gcloud CLI. Puoi controllare con gcloud config list project e impostarlo con gcloud config set project YOUR_PROJECT_ID

Nota:poiché stiamo eseguendo l'intera attività in Cloud Shell, non è necessario configurare i progetti.

  1. Crea **requirements.txt****:**
  • Questo file elenca tutti i pacchetti Python di cui ha bisogno la tua app. Nella directory del progetto (dove si trova main.py), crea un file denominato requirements.txt e aggiungi le seguenti righe
  1. Crea **Dockerfile****:**
  • Un Dockerfile definisce come creare un'immagine Docker per la tua applicazione. Crea un file denominato Dockerfile (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"]

  1. 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

  1. 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

Al termine di questi passaggi, la tua applicazione con l'agente AI integrato sarà disponibile per gli utenti finali.

Congratulazioni e buono studio.

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:

  1. Nella console Google Cloud, vai alla pagina Gestisci risorse.
  2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
  3. Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
  4. In alternativa, puoi andare a Cloud Run nella console, selezionare il servizio appena di cui hai eseguito il deployment ed eliminarlo.