KI-Chatbots mit Vertex AI Agent Builder erstellen

1. Hinweis

In diesem Codelab lernen Sie in Ihrem eigenen Tempo, wie Sie mit dem Vertex AI Agent Builder von Google Cloud KI-Agents erstellen. In jedem Schritt wird eine bestimmte Funktion von Agent Builder hervorgehoben und ihre Funktion erläutert.

Voraussetzungen

Grundlegendes Wissen über generative KI in Google Cloud
Grundlegendes Verständnis der Konzepte für KI-Agents
Grundkenntnisse zu Gemini Code Assist (optional)

Lerninhalte

Einen einfachen KI-Agenten mit Vertex AI Agent Builder erstellen
Agent durch Anhängen eines Datenspeichers fundieren
KI-Agent in Ihre Website einbinden(optional)

Voraussetzungen

Neugier
Ein funktionierender Computer und eine zuverlässige WLAN-Verbindung
Ein Google Cloud-Projekt mit verknüpfter Abrechnung.

Hinweis: Wenn Sie noch kein Google Cloud-Projekt haben, können Sie dieser Anleitung folgen, um eines zu erstellen. Weitere Informationen zur kostenlosen Stufe von Google Cloud

2. Ersten KI-Agenten entwerfen

Jetzt können Sie Ihren eigenen KI‑Agenten erstellen. Bevor Sie mit der Entwicklung beginnen, ist es jedoch wichtig, eine klare Vision für Ihren Agenten zu entwickeln. Stellen Sie sich folgende zentrale Fragen:

Welches Problem soll sie lösen? Soll die App Aufgaben automatisieren, Informationen bereitstellen, Unterhaltung bieten oder kreative Erkundungen ermöglichen?
Was sind die Hauptfunktionen? Wird es Aufgaben ausführen oder delegieren? Wird Text oder eine Kombination aus verschiedenen Medien generiert?
Gibt es Einschränkungen? Kann es alles autonom erledigen?
Welche Persönlichkeit oder Persona sollte es haben? Soll der Stil eher förmlich oder zwanglos sein? Soll er humorvoll, hilfreich oder informativ sein?
Was sind die Erfolgsmesswerte? Wie messen Sie die Effektivität des Kundenservicemitarbeiters?

Um den Prozess zu beschleunigen, finden Sie hier die Antworten auf diese Fragen für das Reisebüro, das Sie heute erstellen werden:

Welches Problem soll sie lösen?
Die Planung einer Reise kann zeitaufwendig und überwältigend sein. Dieses Reisebüro hilft Nutzern, Reiseziele zu entdecken, Reiserouten zu planen und Flüge und Unterkünfte zu buchen.
Was sind die Hauptfunktionen?
Der Agent sollte Folgendes können:
Fragen zu Reisezielen beantworten, z. B. zu Visabestimmungen
Routen planen, die zu den Zeitplänen und Zielen der Nutzer passen
Flüge und Unterkünfte buchen
Gibt es Einschränkungen?
Der Agent kann komplizierte Anfragen möglicherweise nicht standardmäßig beantworten
Der Agent kann keine Bilder generieren.
Das Wissen des Agenten ist durch das zugrunde liegende Modell begrenzt.
Welche Persönlichkeit oder Persona sollte es haben?
Dieser Kundenservicemitarbeiter sollte sachkundig, hilfsbereit und reisebegeistert sein. Es sollte Informationen klar und prägnant kommunizieren können.
Was sind die Erfolgsmesswerte?
Der Erfolg dieses KI-Agenten könnte daran gemessen werden, wie zufrieden Nutzer mit seinen Empfehlungen sind (Erkundung, Planung, Buchung).

3. KI‑Agent mit Vertex AI Agent Builder erstellen

Mit Vertex AI Agent Builder können KI-Agents in nur wenigen Schritten erstellt werden.

Schritt 1:

Rufen Sie Vertex AI Agent Builder auf.
Die Begrüßungsseite sollte angezeigt werden.
Klicken Sie auf die Schaltfläche WEITER UND API AKTIVIEREN.

Schritt 2:

Sie werden zur Seite „App erstellen“ weitergeleitet.
Klicken Sie auf die Schaltfläche CREATE A NEW APP (Neue App erstellen).

Schritt 3:

Wählen Sie Conversational Agent (Konversationsagent) aus und klicken Sie auf ERSTELLEN.

Hinweis:

Wenn Sie auf ERSTELLEN klicken, wird ein neuer Tab mit Dialogflow Conversational Agents geöffnet.
Wenn Sie aufgefordert werden, ein Google Cloud-Projekt auszuwählen, wählen Sie das Google Cloud-Projekt aus, das mit Ihrem richtigen Gmail-Konto verknüpft ist.
Wenn Sie dieses Lab in einem neuen Konto durchführen, werden Sie aufgefordert, die Dialogflow API zu aktivieren. Klicken Sie dazu auf API aktivieren.

Wenn das Klicken auf den Button nicht funktioniert, können Sie die API manuell auf der API-Seite aktivieren.
Klicken Sie auf der neu geöffneten Dialogflow-Seite auf Create Agent (Agent erstellen).

Sie erhalten nun Optionen zum Erstellen eines Agents. Wählen Sie Einen eigenen erstellen aus.

Schritt 4:

Wählen Sie einen Anzeigenamen aus (z. B. Reisebegleiter).
Wählen Sie als Region die Option Global (Globale Bereitstellung, ruhende Daten in den USA) aus.
Behalten Sie die anderen Konfigurationen bei (Standard).
Klicken Sie auf die Schaltfläche ERSTELLEN.

Schritt 5:

Wählen Sie einen Playbook-Namen aus (z. B. „Info-Agent“).
Fügen Sie ein Ziel hinzu, z. B. „Kunden bei der Beantwortung von Reiseanfragen unterstützen“.
Definieren Sie eine Anweisung, z. B. „Begrüße den Nutzer und frage dann, wie du ihm weiterhelfen kannst.“
Klicken Sie auf Speichern, wenn Sie alles fertiggestellt haben.

Schritt 6:

Klicken Sie auf das Symbol Simulator ein-/ausblenden .
Wählen Sie den Agent aus, den Sie gerade erstellt haben, z. B. Info Agent.
Wählen Sie das zugrunde liegende generative KI-Modell für Ihren Agent aus, z. B. gemini-1.5-flash.
Testen Sie den Agenten, indem Sie sich mit ihm unterhalten.Geben Sie dazu etwas in das Textfeld „Enter User Input“ (Nutzereingabe) ein.

Glückwunsch! Sie haben gerade einen KI-Agenten mit Vertex AI Agent Builder erstellt.

4. Datenspeicher an den KI-Agenten anhängen

Wenn Sie Ihren Agenten beispielsweise fragen, wie Sie am besten nach Wakanda kommen („What's the best way to reach Wakanda?“), erhalten Sie eine Antwort wie diese:

Das ist zwar faktisch richtig, aber anstatt einfach nur zu sagen „Ich kann keine Informationen bereitstellen“ und die Unterhaltung zu beenden, wäre es für den Nutzer hilfreicher, wenn der Agent ähnliche Orte vorschlagen würde. Dieser Ansatz könnte dazu führen, dass Nutzer tatsächlich eine Reise über den Agent buchen.

Damit der Agent ähnliche Orte empfehlen kann, können Sie ihm über Datastores weitere Informationen zur Verfügung stellen. Sie dient als zusätzliche Wissensdatenbank für den Agenten, auf die er zurückgreifen kann, wenn er Nutzerfragen nicht auf der Grundlage seines integrierten Wissens beantworten kann.

Hinweis:Wenn Sie den Simulator schließen möchten, klicken Sie noch einmal auf das Symbol zum Ein- und Ausblenden des Simulators.

Das Erstellen eines Datenspeichers ist ganz einfach. Klicken Sie unten auf der Seite „Agent Basics“ auf die Schaltfläche + Datenspeicher.

Geben Sie die folgenden Informationen an:

Toolname:Alternativer Standort
Typ:Datenspeicher
Beschreibung:Verwenden Sie dieses Tool, wenn die Anfrage des Nutzers einen nicht vorhandenen Ort enthält.

Klicken Sie abschließend auf Speichern.

Dadurch wird ein Datenspeichertool für den Agenten erstellt, mit dem er mit dem Datenspeicher kommunizieren kann. Sie müssen jedoch noch einen tatsächlichen Datenspeicher mit den Informationen erstellen. Klicken Sie dazu auf Datenspeicher hinzufügen und dann auf Datenspeicher erstellen.

Wenn Sie auf Neuen Datenspeicher erstellen klicken, werden Sie zur Vertex AI Agent Builder-Seite weitergeleitet (siehe unten).

Cloud Storage-Option auswählen

Wenn Sie mit dem Schritt fertig sind,

Klicken Sie auf DATEI. Das ist sehr wichtig, da der Import sonst fehlschlägt.
Geben Sie ai-workshops/agents/data/wakanda.txt ein.
Klicken Sie auf WEITER.

Wenn Sie neugierig sind, finden Sie hier den Inhalt der bereitgestellten Textdatei:

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



Geben Sie auf der nächsten Seite einen Namen für den Datenspeicher ein (z.B. „Wakanda Alternative“) und klicken Sie auf ERSTELLEN.

WÄHLEN Sie als letzten Schritt die soeben erstellte Datenquelle aus und klicken Sie auf ERSTELLEN. Sie können den Fortschritt des Datenspeicherimports sehen, indem Sie auf den Datenspeicher klicken**.**

Hinweis:Der Importvorgang dauert einige Zeit. Währenddessen können Sie hier weitere Datenspeicheroptionen für Ihren Vertex AI-Agenten ansehen.

Wenn alles reibungslos verlaufen ist, kehren Sie zum Dialogflow-Tab zurück und klicken Sie auf Aktualisieren. Der erstellte Datenspeicher sollte auf der Seite Verfügbare Datenspeicher angezeigt werden.

Um zu verhindern, dass der Agent halluziniert, legen Sie in der Fundierungskonfiguration für Ihren Datenspeicher die Einstellung auf Sehr niedrig fest. Dadurch werden strengere Einschränkungen für den Agenten angewendet, damit er sich nichts ausdenkt. Lassen Sie die Einstellung vorerst auf dem Standardwert. Sie können sie aber jederzeit mit verschiedenen Einstellungen testen.

Wählen Sie nun den hinzugefügten Datenspeicher aus, klicken Sie auf Bestätigen und dann auf Speichern.

Kehren Sie nun zur Seite Agent Basics zurück. Unten in der Playbook-Konfiguration sehen Sie den neu erstellten Datenspeicher(z. B. „Alternative Location“). Aktivieren Sie den Datenspeicher (z. B. „Alternative Location“) und klicken Sie oben auf der Seite auf die Schaltfläche „Speichern“.

Fast geschafft! Im letzten Schritt fügen Sie das Tool Alternative Location (Alternativer Standort) in die Anweisungen des Agenten ein. Fügen Sie den Anweisungen für den Kundenservicemitarbeiter die Zeile - Use ${TOOL: Alternative Location} if the user's request contains a location that does not exist hinzu und klicken Sie dann auf Speichern.

Wir sind bereit. Öffnen wir den Schaltersimulator noch einmal und stellen wir dieselben Fragen (z. B. „Wie komme ich am besten nach Wakanda?“).

Glückwunsch! Ihr Agent empfiehlt jetzt Orte anhand der bereitgestellten Informationen aus einer Textdatei.

Das war's. Wir haben unseren eigenen KI-Agenten mit dem Agent Builder erstellt. Wenn Sie Ihren Agenten weiter anpassen möchten, um die Nutzerfreundlichkeit zu verbessern, sehen Sie sich die zusätzlichen Aktivitäten unten an.

5. Zusätzliche Aktivitäten – KI-Agenten veröffentlichen

In den vorherigen Schritten haben Sie einen KI-Agenten entwickelt und ihn mit relevanten Referenzdaten verknüpft. Im folgenden Abschnitt wird die entscheidende Frage behandelt, wie Sie diesen Agent in Ihre Website einbetten können, um eine Echtzeitinteraktion mit Ihren Besuchern zu ermöglichen.

Es gibt viele Möglichkeiten, Ihren KI-Agenten zu präsentieren. Sie können sie entweder exportieren oder direkt veröffentlichen. In der Dokumentation finden Sie Informationen zu den möglichen Optionen.

Klicken Sie rechts oben auf dem Tab „Dialogflow“ auf das Dreipunkt-Menü und dann auf Agent veröffentlichen.

Behalten Sie die gesamte Konfiguration als Standard bei und klicken Sie auf Nicht authentifizierte API aktivieren.

Hinweis:Die Aktivierung der nicht authentifizierten API dient nur zu Demozwecken und diese Konfiguration wird nicht für Produktionsarbeitslasten empfohlen. Wenn Sie sicher veröffentlichen möchten, sehen Sie sich diese Dokumentation an.

Wenn Sie darauf klicken, sollte ein kleines CSS-Code-Snippet angezeigt werden:

Kopieren Sie einfach das Code-Snippet. Sie werden dieses Code-Snippet später in eine Website einfügen.

Zum Erstellen einer Website verwenden Sie die Cloud Editor-Umgebung. So öffnen Sie den Cloud Editor:

Öffnen Sie die Google Cloud Console auf einem anderen Tab.
Klicken Sie rechts oben auf die Schaltfläche Cloud Shell aktivieren.
Klicken Sie auf die Schaltfläche Editor öffnen.

Wenn Sie zur Autorisierung von Cloud Shell aufgefordert werden, klicken Sie auf Autorisieren, um fortzufahren.

Im folgenden Abschnitt verwenden Sie Gemini Code Assist, um eine Beispiel-Webanwendung mit Python Flask zu erstellen, die in Ihr Agent-Snippet eingebunden werden kann.

Klicken Sie nach dem Öffnen des Cloud Shell-Editors auf Gemini Code Assist und melden Sie sich in Ihrem Google Cloud-Projekt an. Wenn Sie aufgefordert werden, die API zu aktivieren, klicken Sie auf Aktivieren.

Bitten Sie Gemini Code Assist, eine Flask-App zu erstellen und den KI-Agent-Code-Snippet darin zu integrieren.

Hier ist der Beispiel-Prompt, den Sie verwenden können

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



Hinweis:Hier haben wir nach einer Python Flask-App gefragt. Wenn Sie eine andere Programmiersprache oder ein anderes Framework bevorzugen, können Sie es gerne verwenden. Gemini Code Assist kann Code in verschiedenen Programmiersprachen generieren. Weitere Informationen finden Sie unter Unterstützte Sprachen, IDEs und Schnittstellen.

Sie sehen, dass das bereitgestellte Code-Snippet bereits in den KI-Agenten integriert ist. Um zu testen, ob der bereitgestellte Code gültig ist und wie vorgesehen funktioniert, können Sie der Anleitung von Gemini Code Assist folgen, wie Sie diesen Codeabschnitt der Ausgabereaktion ausführen.

Beispiel für ein Code-Snippet mit einem Antwortcode:

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



Gemäß der angegebenen Anleitung

Kopieren Sie das bereitgestellte Code-Snippet für die Flask-Beispiel-App.
Erstellen Sie eine neue Datei mit dem Namen app.py und speichern Sie sie.

Im nächsten Schritt werden Sie aufgefordert, Flask zu installieren, um dieses Snippet auszuführen. Das ist derzeit nicht erforderlich, da in Cloud Shell bereits alle häufig verwendeten Dienstprogramme standardmäßig installiert sind.

Speichern Sie die Datei (Strg + S oder CMD + S) und klicken Sie dann auf Terminal öffnen, um den bereitgestellten Code auszuführen.

Führen Sie im Terminal den folgenden Befehl aus:

python app.py



Hinweis:Achten Sie darauf, dass Sie sich im richtigen Ordner befinden, in dem sich die Datei app.py befindet.

Die Python Flask-Anwendung wird auf Port 5000 ausgeführt. Wenn Sie die Vorschau dieser Webanwendung aufrufen möchten, klicken Sie in Cloud Shell auf das Symbol für die Webvorschau. Klicken Sie dann auf Port ändern, geben Sie 5000 ein und klicken Sie auf Ändern und Vorschau,um die Änderung zu speichern.

Eine Beispielwebsite wird angezeigt und ein KI-Agent ist bereits verfügbar. Klicken Sie einfach auf den KI‑Agenten und beginnen Sie mit ihm zu chatten.

Sie können es gern mit verschiedenen Prompts ausprobieren. Sie können Gemini Code Assist auch bitten, Ihre Website zu optimieren oder dem KI-Agenten mehr Fundierungsdaten hinzuzufügen, damit er mehr Ressourcen zur Verfügung hat.

Wenn Sie bereit sind, können Sie diesen KI-Agenten als Nächstes in Google Cloud hosten, damit er von überall aus aufgerufen werden kann. Im weiteren Verlauf dieses Codelabs stellen Sie diese Flask-Beispielanwendung in Cloud Run als Container bereit.

Hinweis:Das ist nicht nur auf Cloud Run beschränkt. Wenn Sie nicht wissen, was Cloud Run ist, können Sie Gemini Code Assist trotzdem fragen, wie Sie die Anwendung in Google Cloud oder an einem beliebigen anderen Ort gemäß den Best Practices bereitstellen können.

Kehren Sie zum Cloud Shell-Terminal zurück und drücken Sie Strg + C, um den Prozess zu beenden. Klicken Sie noch einmal auf Editor öffnen und bitten Sie Gemini Code Assist, Sie beim Containerisieren der Anwendung und der Bereitstellung in Cloud Run zu unterstützen.

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



Hier finden Sie einige Anleitungen und Befehle, die Sie ausführen müssen, um unsere App im Cloud Run-Dienst zu hosten. Folgen Sie der Anleitung.

Hier sehen Sie die Beispielausgabe:

Schritte zur Bereitstellung in Cloud Run

Voraussetzungen:

Google Cloud-Konto:Sie benötigen ein Google Cloud-Konto mit aktivierter Abrechnung.
gcloud CLI:Installieren und initialisieren Sie das Google Cloud SDK (gcloud CLI) auf Ihrem lokalen Computer. Damit interagieren Sie über Ihr Terminal mit Google Cloud.
Docker:Installieren Sie Docker auf Ihrem lokalen Computer. Cloud Run verwendet Docker, um Ihre Anwendung zu containerisieren.
Projekteinrichtung:Achten Sie darauf, dass in Ihrer gcloud CLI ein Google Cloud-Projekt ausgewählt ist. Sie können den Wert mit gcloud config list project prüfen und mit gcloud config set project YOUR_PROJECT_ID festlegen.

Hinweis:Da wir diese gesamte Aktivität in Cloud Shell ausführen, müssen wir keine Projekte einrichten.

Erstellen**requirements.txt** **:**

In dieser Datei sind alle Python-Pakete aufgeführt, die Ihre App benötigt. Erstellen Sie im Projektverzeichnis (in dem sich main.py befindet) eine Datei mit dem Namen requirements.txt und fügen Sie die folgende Zeile hinzu:

Erstellen**Dockerfile** **:**

In einem Dockerfile wird beschrieben, wie ein Docker-Image für Ihre Anwendung erstellt wird. Erstellen Sie in Ihrem Projektverzeichnis eine Datei mit dem Namen Dockerfile (ohne Erweiterung) und fügen Sie den folgenden Inhalt hinzu:

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



Docker-Image erstellen:

Öffnen Sie das Terminal, wechseln Sie zum Projektverzeichnis und führen Sie folgenden Befehl aus:

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

In Cloud Run bereitstellen:

Nachdem das Image erstellt und hochgeladen wurde, stellen Sie es mit dem folgenden Befehl in Cloud Run bereit:

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



Wenn Sie diese Schritte ausgeführt haben, ist Ihre Anwendung mit integriertem KI-Agent für Ihre Endnutzer verfügbar.

Herzlichen Glückwunsch und viel Spaß beim Lernen.

6. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden:

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.
Alternativ können Sie in der Console zu Cloud Run wechseln, den gerade bereitgestellten Dienst auswählen und löschen.