Cómo compilar agentes de IA con Vertex AI Agent Builder

1. Antes de comenzar

En este codelab autodidáctico, se te guiará para que crees agentes de IA con Vertex AI Agent Builder de Google Cloud. En cada paso, se destacará una función específica de Agent Builder y se explicará su propósito.

Requisitos previos

Conocimientos básicos sobre la IA generativa en Google Cloud
Conocimientos básicos sobre los conceptos de los agentes de IA
Conocimientos básicos sobre Gemini Code Assist (opcional)

Qué aprenderás

Cómo crear un agente de IA simple con Vertex AI Agent Builder
Cómo fundamentar el agente creado adjuntando un almacén de datos
Cómo integrar un agente de IA en tu sitio web(opcional)

Requisitos

Una mente curiosa
Una computadora que funcione y una red Wi-Fi confiable
Un proyecto de Google Cloud con facturación adjunta

Nota: Si aún no tienes un proyecto de Google Cloud, puedes crear uno siguiendo las instrucciones. También puedes consultar los servicios del nivel gratuito de Google Cloud.

2. Diseña tu primer agente de IA

Ahora puedes crear tu propio agente de IA. Sin embargo, antes de comenzar con el desarrollo, es fundamental establecer una visión clara para tu agente. Hazte estas preguntas clave:

¿Qué problema solucionará? ¿Automatizará tareas, brindará información, ofrecerá entretenimiento o facilitará la exploración creativa?
¿Cuáles son sus funciones principales? ¿Ejecutará o delegará tareas? ¿Generará texto o una combinación de diferentes medios?
¿Cuáles son sus limitaciones? ¿Podrá hacer todo de forma autónoma?
¿Qué personalidad o personaje debería tener? ¿Será formal, informal, humorístico, útil o informativo?
¿Cuáles son las métricas de éxito? ¿Cómo medirás la eficacia del agente?

Para acelerar el proceso, aquí tienes las respuestas a esas preguntas para el agente de viajes que crearás hoy:

¿Qué problema solucionará?
Planificar un viaje puede ser abrumador y llevar mucho tiempo. Este agente de viajes ayudará a los usuarios a descubrir destinos, planificar itinerarios y reservar vuelos y alojamientos.
¿Cuáles son sus funciones principales?
El agente debe poder hacer lo siguiente:
Responder preguntas sobre destinos, como los requisitos de visa
Planificar itinerarios que se adapten a los horarios y objetivos de los usuarios
reservar vuelos y alojamiento
¿Cuáles son sus limitaciones?
Es posible que el agente no pueda responder consultas complicadas de forma predeterminada
El agente no podrá generar imágenes visuales.
El conocimiento del agente estará limitado por el modelo subyacente.
¿Qué personalidad o personaje debería tener?
Este agente debe ser experto, servicial y entusiasta con los viajes. Debe poder comunicar información de forma clara y concisa.
¿Cuáles son las métricas de éxito?
El éxito de este agente se podría medir según el nivel de satisfacción de los usuarios con sus recomendaciones (explorar, planificar, reservar).

3. Cómo compilar un agente basado en IA con Vertex AI Agent Builder

Con Vertex AI Agent Builder, los agentes de IA se pueden crear en unos pocos pasos.

Paso 1:

Dirígete a Vertex AI Agent Builder.
Deberías ver la página de bienvenida.
Haz clic en el botón CONTINUE AND ACTIVATE THE API.

Paso 2:

Se te redireccionará a la página de creación de la app.
Haz clic en el botón CREAR UNA APP NUEVA.

Paso 3:

Elige Agente conversacional y haz clic en CREAR.

Nota:

Una vez que hagas clic en CREATE, se abrirá una pestaña nueva de Agentes conversacionales de Dialogflow.
Si se te solicita que elijas un proyecto de Google Cloud, selecciona el proyecto de Google Cloud asociado a tu cuenta de Gmail correcta.
Si realizas este lab en una cuenta nueva, se te pedirá que habilites la API de Dialogflow. Haz clic en Habilitar API para habilitarla.

Si hacer clic en el botón no funciona, puedes habilitarla manualmente. Para ello, ve directamente a la página de la API .
En la página de Dialogflow que se abrió recientemente, haz clic en Create Agent.

Ahora, te dará algunas opciones para crear un agente. Elige Build your own.

Paso 4:

Elige un nombre visible (p. ej., Compañero de viaje).
En Ubicación, selecciona global (Global serving, data-at-rest in US) como Región.
Mantén la otra configuración, predeterminada
Haz clic en el botón CREAR.

Paso 5:

Elige un nombre de guía (p. ej., Agente de información).
Agrega un Goal (p. ej., Ayuda a los clientes a responder preguntas relacionadas con viajes).
Define una instrucción (p. ej., saluda a los usuarios y, luego, pregúntales cómo puedes ayudarlos).
Presiona Guardar cuando todo esté listo.

Paso 6:

Haz clic en el ícono Toggle Simulator .
Selecciona el agente que acabas de crear (p. ej., Agente de información).
Elige el modelo de IA generativa subyacente para tu agente (p. ej., gemini-1.5-flash).
Prueba tu agente conversando con él (es decir, escribe algo en el cuadro de texto "Enter User Input").

¡Felicitaciones! Acabas de crear correctamente un agente basado en IA con Vertex AI Agent Builder.

4. Cómo adjuntar almacenes de datos al agente

Intenta preguntarle a tu agente cómo llegar a Wakanda (p. ej., "¿Cuál es la mejor manera de llegar a Wakanda?"). Obtendrás una respuesta como la siguiente:

Si bien esto es correcto, en lugar de simplemente decir "No puedo proporcionar información" y finalizar la conversación, sería más útil para el usuario que el agente sugiriera lugares similares. Este enfoque podría llevar a que los usuarios reserven un viaje a través del agente.

Para que el agente pueda recomendar lugares similares, puedes proporcionarle más información a través de los almacenes de datos. Actúa como una base de conocimiento adicional a la que el agente puede recurrir si no puede responder las preguntas de los usuarios en función de su conocimiento integrado.

Nota: Si quieres cerrar el simulador, vuelve a hacer clic en el ícono de alternar el simulador.

Crear un almacén de datos es sencillo. Haz clic en el botón + Almacén de datos en la parte inferior de la página Conceptos básicos del agente.

Completa la siguiente información:

Nombre de la herramienta: Ubicación alternativa
Tipo: Almacén de datos
Descripción: Usa esta herramienta si la solicitud del usuario contiene una ubicación que no existe.

Haz clic en Guardar cuando termines.

Esto crea una herramienta de almacén de datos para que el agente se comunique con el almacén de datos, pero aún debes crear un almacén de datos real que contenga la información. Para ello, haz clic en add data stores and Create a data store.

Una vez que hagas clic en Crear almacén de datos nuevo, se te redireccionará a la página de Vertex AI Agent Builder, como se muestra a continuación.

Elige la opción en Cloud Storage

Cuando termines el paso,

Haz clic en FILE (esto es muy importante, de lo contrario, fallará la importación).
escribe ai-workshops/agents/data/wakanda.txt
Haz clic en CONTINUAR.

Si tienes curiosidad, aquí tienes el contenido del archivo de texto proporcionado:

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



En la página siguiente, asigna un nombre a tu almacén de datos (p.ej., Wakanda Alternative) y haz clic en CREATE.

Como paso final, SELECCIONA la fuente de datos que acabas de crear y haz clic en CREAR. Para ver el progreso de la importación de tu almacén de datos,haz clic en él**.**

Nota: La actividad de importación tardará un tiempo en completarse correctamente, por lo que, mientras tanto, puedes explorar más opciones de almacén de datos disponibles para tu agente de Vertex AI aquí.

Si todo salió bien, vuelve a la pestaña de Dialogflow y haz clic en Actualizar. Deberías ver el almacén de datos creado en la página Almacenes de datos disponibles.

Para evitar que el agente alucine, en la configuración de fundamentación de tu almacén de datos, establece el parámetro de configuración en Muy bajo, lo que aplica restricciones más estrictas al agente para que no invente cosas. Por ahora, mantén la configuración predeterminada, pero puedes explorarla con diferentes parámetros de configuración en cualquier momento.

Ahora, selecciona el almacén de datos agregado, haz clic en Confirmar y, luego, en Guardar.

Ahora, vuelve a la página Conceptos básicos del agente. En la parte inferior de la configuración del playbook, verás que el almacén de datos que acabas de crear(p. ej., ubicación alternativa) estará disponible para su uso. Marca el almacén de datos (p. ej., ubicación alternativa) y haz clic en el botón Guardar en la parte superior de la página.

¡Ya casi terminas! El último paso es incluir la herramienta "Ubicación alternativa" en las instrucciones del agente. Agrega la línea - Use ${TOOL: Alternative Location} if the user's request contains a location that does not exist a las instrucciones del agente y, luego, haz clic en Guardar.

Todo listo. Volvamos a abrir el simulador de activación y hagamos las mismas preguntas (p. ej., ¿cuál es la mejor manera de llegar a Wakanda?).

¡Felicitaciones! Ahora, tu agente recomienda lugares con la información proporcionada en un archivo de texto.

Eso es todo. Terminamos de compilar nuestro propio agente de IA para crear agentes. Si quieres explorar más formas de personalizar tu agente para mejorar la experiencia, consulta las actividades adicionales que se incluyen a continuación.

5. Actividades adicionales: Publica tu agente de IA

En los pasos anteriores, desarrollaste un agente de IA y lo fundamentaste con datos de referencia pertinentes. En la siguiente sección, abordarás la pregunta crucial de cómo incorporar este agente en tu sitio web, lo que permitirá la interacción en tiempo real con tus visitantes.

Hay muchas formas de exponer tu agente. Puedes exportarlo o publicarlo directamente. Puedes explorar la documentación para conocer las opciones posibles.

En la esquina superior derecha de la pestaña de Dialogflow, haz clic en el menú de desbordamiento y, luego, en Publicar agente.

Mantén toda la configuración como Predeterminada y haz clic en Habilitar la API no autenticada.

Nota: Habilitar la API no autenticada es solo para fines de demostración, y no se recomienda usar esta configuración para la carga de trabajo de producción. Si te interesa publicar contenido de forma segura, consulta esta documentación.

Cuando hagas clic, deberías ver un pequeño fragmento de código CSS:

Solo copia el fragmento de código. Más adelante, integrarás este fragmento de código en un sitio web.

Para crear un sitio web, usarás el entorno del Editor de Cloud. Sigue estos pasos para abrir Cloud Editor:

Abre la consola de Google Cloud en otra pestaña.
Haz clic en el botón Activar Cloud Shell en la esquina superior derecha.
Haz clic en el botón Abrir editor.

Si aparece un mensaje para autorizar Cloud Shell, haz clic en Autorizar para continuar.

En la siguiente sección, usarás Gemini Code Assist para crear una aplicación web de Flask en Python de ejemplo que se integrará con tu fragmento del agente.

Una vez que se abra el editor de Cloud Shell, haz clic en Gemini Code Assist y accede a tu proyecto de Google Cloud. Si te solicita que habilites la API, haz clic en Habilitar.

Una vez que termines, pídele a Gemini Code Assist que cree una app de Flask y que integre el fragmento de código del agente de IA.

Aquí tienes la instrucción de ejemplo que puedes usar:

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: Aquí solicitamos una app de Flask en Python. Si prefieres otro lenguaje de programación o framework, puedes usarlo. Gemini Code Assist puede generar código en diferentes lenguajes de programación. Consulta IDE, interfaces y también idiomas compatibles para obtener más detalles.

Verás que el fragmento de código proporcionado ya está integrado con el agente de IA. Para probar si el código proporcionado es válido y funciona según lo previsto, puedes seguir las instrucciones que te brinda Gemini Code Assist sobre cómo ejecutar esta sección de código de la respuesta.

Fragmento de código de respuesta de muestra:

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)



Según las instrucciones proporcionadas

Copia el fragmento de código de la app de Flask de ejemplo proporcionado.
Crea un archivo nuevo llamado app.py y guárdalo.

En el siguiente paso, se solicita instalar Flask para ejecutar este fragmento, lo que no es necesario por el momento, ya que Cloud Shell ya tiene instaladas de forma predeterminada todas las utilidades de uso común.

Guarda el archivo (Ctrl + S o Cmd + S) y, luego, haz clic en Abrir terminal, donde ejecutarás el código proporcionado.

En la terminal, ejecuta el siguiente comando:

python app.py



Nota: Asegúrate de estar en la carpeta correcta, donde se encuentra el archivo app.py.

La app de Flask en Python se ejecutará en el puerto 5000. Para ver la vista previa de esta aplicación web, haz clic en el ícono de Vista previa en la Web en Cloud Shell. Luego, puedes hacer clic en Cambiar puerto,ingresar 5000 y hacer clic en Cambiar y obtener vista previa para guardarlo.

Aparecerá un sitio web de ejemplo y ya habrá un agente de IA disponible. Solo haz clic en el agente de IA y comienza a chatear con él.

No dudes en probarlo con diferentes instrucciones. También puedes pedirle a Gemini Code Assist que embellezca tu sitio web o que agregue más datos de fundamentación al agente de IA para que sea más útil.

Cuando esté todo listo, como siguiente paso, puedes intentar alojar este agente de IA en Google Cloud para que cualquier persona pueda acceder a él desde cualquier lugar. En cuanto al resto de este codelab, implementarás esta aplicación de Flask de muestra en Cloud Run como un contenedor.

Nota: No solo se limita a Cloud Run (incluso si no sabes qué es Cloud Run, puedes preguntar esto). Puedes pedirle a Gemini Code Assist que te ayude a implementar esto en Google Cloud o en cualquier lugar con las prácticas recomendadas. También puede ayudarte con esa parte.

Regresa a la terminal de Cloud Shell y presiona Ctrl + C para detener el proceso. Vuelve a hacer clic en Abrir editor y pídele a Gemini Code Assist que nos ayude a contenerizar la aplicación y a implementarla en Cloud Run.

Can you help me deploy this sample flask app to cloud run service



Proporciona algunas instrucciones y comandos que se deben seguir para alojar nuestra app en el servicio de Cloud Run. Sigamos las instrucciones.

Esta es la respuesta de ejemplo del resultado:

Pasos para implementar en Cloud Run

Requisitos previos:

Cuenta de Google Cloud: Necesitas una cuenta de Google Cloud con la facturación habilitada.
CLI de gcloud: Instala e inicializa el SDK de Google Cloud (CLI de gcloud) en tu máquina local. Lo usarás para interactuar con Google Cloud desde tu terminal.
Docker: Instala Docker en tu máquina local. Cloud Run usa Docker para crear contenedores para tu aplicación.
Configuración del proyecto: Asegúrate de tener seleccionado un proyecto de Google Cloud en tu gcloud CLI. Puedes verificarlo con gcloud config list project y configurarlo con gcloud config set project YOUR_PROJECT_ID

Nota: Como realizaremos toda esta actividad en Cloud Shell, no es necesario configurar proyectos.

Crear **requirements.txt****:**

En este archivo, se enumeran todos los paquetes de Python que necesita tu app. En el directorio de tu proyecto (donde se encuentra main.py), crea un archivo llamado requirements.txt y agrega la siguiente línea:

Crear **Dockerfile****:**

Un Dockerfile define cómo compilar una imagen de Docker para tu aplicación. Crea un archivo llamado Dockerfile (sin extensión) en el directorio de tu proyecto y agrega el siguiente contenido:

# 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"]



Compila la imagen de Docker:

Abre la terminal, navega al directorio del proyecto y ejecuta lo siguiente:

gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy

Implementa en Cloud Run:

Después de compilar y subir la imagen, impleméntala en Cloud Run con el siguiente comando:

gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1



Una vez que completes estos pasos, verás que tu aplicación con el agente de IA integrado estará disponible para tus usuarios finales.

¡Felicitaciones y que disfrutes del aprendizaje!

6. Limpieza

Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este codelab:

En la consola de Google Cloud, ve a la página Administrar recursos.
En la lista de proyectos, elige el proyecto que deseas borrar y haz clic en Borrar.
En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
Como alternativa, puedes ir a Cloud Run en la consola, seleccionar el servicio que acabas de implementar y borrarlo.