KI-Chatbots mit Vertex AI Agent Builder erstellen

Informationen zu diesem Codelab

45 Minuten

Zuletzt aktualisiert: 7. März 2025

Verfasst von Thu Ya Kyaw (Googler), Abhishek Sharma (GDE)

Diese Seite wurde von der Cloud Translation API übersetzt.

1. Hinweis

In diesem Codelab können Sie in Ihrem eigenen Tempo lernen, wie Sie KI-Agenten mit dem Vertex AI Agent Builder von Google Cloud erstellen. Bei jedem Schritt wird eine bestimmte Agent Builder-Funktion hervorgehoben und ihr Zweck erläutert.

Voraussetzungen

Grundlegende Kenntnisse zu Generative AI in Google Cloud
Grundlegende Kenntnisse der Konzepte von KI-Agenten
Grundlegende Kenntnisse von Gemini Code Assist (optional)

Aufgaben in diesem Lab

Einen einfachen KI-Agenten mit Vertex AI Agent Builder erstellen
Erstellen Sie einen Datenspeicher und binden Sie ihn an den erstellten Agenten an.
KI-Chatbot in Ihre Website einbinden(optional)

Voraussetzungen

Neugier
Einen funktionierenden 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 diese Anleitung befolgen, um eines zu erstellen. Sehen Sie sich auch die Google Cloud-Dienste der kostenlosen Stufe an.

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 Bot zu entwickeln. Stellen Sie sich folgende wichtige Fragen:

Welches Problem soll damit gelöst werden? Wird es Aufgaben automatisieren, Informationen liefern, Unterhaltung bieten oder kreatives Erkunden ermöglichen?
Was sind die wichtigsten Funktionen? Führt es Aufgaben aus oder delegiert es Aufgaben? Wird Text oder eine Kombination verschiedener Medien generiert?
Gibt es Einschränkungen? Kann es alles autonom erledigen?
Welche Persönlichkeit oder Persona sollte sie haben? Soll der Stil eher förmlich, informell, humorvoll, hilfreich oder informativ sein?
Welche Erfolgsmesswerte gibt es? Wie messen Sie die Effektivität des Kundenservicemitarbeiters?

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

Welches Problem soll damit gelöst werden?
Die Planung einer Reise kann zeitaufwendig und überwältigend sein. Dieses Reisebüro hilft Nutzern, Reiseziele zu finden, Reisepläne zu erstellen, Flüge und Unterkünfte zu buchen.
Was sind die Hauptfunktionen?
Der Kundenservicemitarbeiter sollte Folgendes tun können:
Fragen zu Reisezielen beantworten, z. B. zu Visaanforderungen
Reisepläne planen, die zum Zeitplan und den Zielen der Nutzer passen
Flüge und Unterkünfte buchen
Gibt es Einschränkungen?
Der Agent kann komplexe Suchanfragen standardmäßig möglicherweise nicht beantworten.
Der Kundenservicemitarbeiter kann keine visuellen Bilder generieren.
Das Wissen des Kundenservicemitarbeiters ist durch das zugrunde liegende Modell begrenzt.
Welche Persönlichkeit oder Persona sollte sie haben?
Dieser Kundenservicemitarbeiter sollte reiseerfahren, hilfsbereit und leidenschaftlich für Reisen sein. Sie sollte Informationen klar und prägnant vermitteln.
Welche Erfolgsmesswerte gibt es?
Der Erfolg dieses Agents könnte an der Zufriedenheit der Nutzer mit seinen Empfehlungen gemessen werden (Entdecken, Planen, Buchen).

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 FORTFAHREN 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 aus und klicken Sie auf ERSTELLEN.

Hinweis:

Wenn Sie auf ERSTELLEN klicken, wird ein neuer Tab mit Dialogflow-Konversations-Agenten 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 ausführen, werden Sie aufgefordert, die Dialogflow API zu aktivieren. Klicken Sie dazu auf API aktivieren.

Wenn das Klicken auf die Schaltfläche nicht funktioniert, können Sie die API auch manuell aktivieren, indem Sie direkt die API-Seite aufrufen.
Klicken Sie auf der neu geöffneten Dialogflow-Seite auf Create Agent (Agent erstellen).

Nun werden Ihnen einige Optionen zum Erstellen eines Bots angezeigt. Wählen Sie Eigenen Bot erstellen aus.

Schritt 4:

Wählen Sie einen Anzeigenamen aus (z. B. Reisepartner).
Wählen Sie als Region die Option global (Globale Bereitstellung, ruhende Daten in den USA) aus.
Andere Konfiguration beibehalten, default
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 reisebezogenen Suchanfragen helfen)
Definieren Sie eine Anweisung (z. B.: „Begrüßen Sie den Nutzer und fragen Sie dann, wie Sie ihm weiterhelfen können.“)
Klicken Sie auf Speichern, wenn alles fertig ist.

Schritt 6:

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

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

4. Datenspeicher an den Kundenservicemitarbeiter anhängen

Wenn Sie Ihren Kundenservicemitarbeiter nach der Anreise nach Wakanda fragen (z.B. „Wie komme ich am besten nach Wakanda?“), erhalten Sie eine Antwort wie diese:

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

Damit der Kundenservicemitarbeiter ähnliche Orte empfehlen kann, können Sie ihm über Datenspeicher weitere Informationen zur Verfügung stellen. Sie dient als zusätzliche Wissensdatenbank für den Kundenservicemitarbeiter, wenn er Nutzerfragen nicht anhand seines integrierten Wissens beantworten kann.

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

Das Erstellen eines Datenspeichers ist ganz einfach. Klicken Sie dazu unten auf der Seite „Grundlagen des Kundenservicemitarbeiters“ auf die Schaltfläche + Datenspeicher.

Geben Sie die folgenden Informationen an:

Tool-Name:Alternativer Standort
Typ:Datenspeicher
Beschreibung:Verwende dieses Tool, wenn die Anfrage des Nutzers einen nicht existierenden Standort enthält.

Klicken Sie abschließend auf Speichern.

Dadurch wird ein Datenspeichertool erstellt, mit dem der Kundenservicemitarbeiter mit dem Datenspeicher kommunizieren kann. Sie müssen jedoch noch einen Datenspeicher erstellen, der die Informationen enthält. Klicken Sie dazu auf Datenspeicher hinzufügen und dann auf Datenspeicher erstellen.

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

Option „In Cloud Storage“ 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.
Klicke auf WEITER.

Hier ist der 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:Die Importaktivität dauert einige Zeit. In der Zwischenzeit können Sie hier weitere Datenspeicheroptionen für Ihren Vertex AI-Agenten ansehen.

Wenn alles reibungslos funktioniert hat, kehren Sie zum Tab „Dialogflow“ zurück und klicken Sie auf Aktualisieren. Der erstellte Datenspeicher sollte auf der Seite Verfügbare Datenspeicher angezeigt werden.

Um zu verhindern, dass der Assistant Halluzinationen hat, legen Sie in der Grounding-Konfiguration für Ihren Datenspeicher die Einstellung auf Sehr niedrig fest. Dadurch werden strengere Einschränkungen für das Erfinden von Dingen durch den Assistant angewendet. Lassen Sie die Standardeinstellung vorerst unverändert, Sie können aber jederzeit andere Einstellungen ausprobieren.

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

Kehren Sie nun zur Seite Grundlagen für Kundenservicemitarbeiter zurück. Unten in der Playbook-Konfiguration sehen Sie, dass der neu erstellte Datenspeicher(z. B. Alternativer Standort) zur Verfügung steht. Setzen Sie ein Häkchen neben „Datenspeicher“ (z. B. „Alternativer Standort“) und klicken Sie oben auf der Seite auf die Schaltfläche „Speichern“.

Fast geschafft! Im letzten Schritt füge der Kundenservicemitarbeiter der Anleitung das Tool Alternativer Standort hinzu. Füge der Anleitung für Kundenservicemitarbeiter die Zeile – Verwende ${TOOL: Alternative Location}, wenn die Anfrage des Nutzers einen Ort enthält, der nicht existiert hinzu und klicke dann auf Speichern.

Alles klar. Öffnen wir den Schaltersimulator noch einmal und stellen dieselben Fragen (z. B. „Wie erreiche ich Wakanda am besten?“).

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

Das war's. Wir haben unseren eigenen KI-gestützten Agenten für den Konversations-Builder erstellt. Wenn Sie mehr darüber erfahren möchten, wie Sie Ihren Agenten für eine bessere Nutzererfahrung anpassen können, 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 mit relevanten Referenzdaten unterlegt. Im folgenden Abschnitt geht es darum, wie Sie diesen Bot in Ihre Website einbetten, um eine Echtzeitinteraktion mit Ihren Besuchern zu ermöglichen.

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

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

Lassen Sie die Konfiguration als Standard und klicken Sie auf Unauthentifizierte API aktivieren.

Hinweis:Die nicht authentifizierte API kann nur zu Demonstrationszwecken aktiviert werden. Diese Konfiguration wird für Produktionsarbeitslasten nicht empfohlen. Weitere Informationen zur sicheren Veröffentlichung finden Sie in dieser Dokumentation.

Nach dem Klicken sollte ein kleines CSS-Code-Snippet angezeigt werden:

Kopiere das Code-Snippet. Dieses Code-Snippet wird später in eine Website eingebunden.

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

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

Wenn Sie aufgefordert werden, Cloud Shell zu autorisieren, klicken Sie auf Autorisieren, um fortzufahren.

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

Klicken Sie im geöffneten Cloud Shell-Editor 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 wir Gemini Code Assist, eine Flask-App zu erstellen und das Code-Snippet für den KI-Agenten darin zu integrieren.

Hier ist ein Beispiel für einen 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 eine Python-Flask-App angefordert. Wenn Sie eine andere Programmiersprache oder ein anderes Framework bevorzugen, können Sie diese verwenden. Gemini Code Assist kann Code in verschiedenen Programmiersprachen generieren. Weitere Informationen finden Sie unter Unterstützte Sprachen, IDEs und Oberflächen.

Sie sehen, dass das bereitgestellte Code-Snippet bereits in den KI-Agenten eingebunden ist. Wenn Sie prüfen möchten, ob der angegebene Code gültig ist und wie vorgesehen funktioniert, folgen Sie der Anleitung in Gemini Code Assist, um diesen Codeabschnitt der Ausgabeantwort auszuführen.

Beispiel für ein Code-Snippet für den 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 Anleitung

Kopieren Sie das bereitgestellte Code-Snippet für die Beispiel-Flask-Anwendung.
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 gängigen Dienstprogramme standardmäßig installiert sind.

Speichern Sie die Datei (Strg + S oder Befehlstaste + 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. Klicken Sie in Cloud Shell auf das Symbol Webvorschau, um die Vorschau dieser Webanwendung aufzurufen. Klicken Sie dann auf Port ändern, geben Sie „5000“ ein und klicken Sie auf Ändern und Vorschau,um die Änderung zu speichern.

Es wird eine Beispielwebsite angezeigt und es ist bereits ein KI-Chatbot verfügbar. Klicken Sie einfach auf den KI-Chatbot und starten Sie einen Chat.

Sie können es mit verschiedenen Prompts testen. Sie können Gemini Code Assist auch bitten, Ihre Website zu verschönern oder dem KI-Agenten weitere stützende Daten hinzuzufügen, um ihn leistungsfähiger zu machen.

Wenn Sie bereit sind, können Sie als Nächstes versuchen, diesen KI-Agenten in Google Cloud zu hosten, damit jeder überall darauf zugreifen kann. Im Rest dieses Codelabs stellen Sie diese Beispiel-Flask-Anwendung als Container in Cloud Run bereit.

Hinweis:Die Funktion ist nicht nur auf Cloud Run beschränkt. Wenn Sie nicht wissen, was Cloud Run ist, können Sie das auch fragen. Sie können Gemini Code Assist bitten, Sie bei der Bereitstellung in Google Cloud oder an anderer Stelle mit den Best Practices zu unterstützen.

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, uns beim Containerisieren der Anwendung und beim Bereitstellen in Cloud Run zu helfen.

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



Es enthält einige Anweisungen und Befehle zum Hosten unserer App im Cloud Run-Dienst. Folgen Sie der Anleitung.

Hier ist eine Beispielausgabe:

Schritte zum Bereitstellen 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 können Sie von Ihrem Terminal aus mit Google Cloud interagieren.
Docker:Installieren Sie Docker auf Ihrem lokalen Computer. In Cloud Run wird Docker verwendet, um Ihre Anwendung zu containerisieren.
Projekteinrichtung:Achten Sie darauf, dass in der gcloud CLI ein Google Cloud-Projekt ausgewählt ist. Sie können den Status mit gcloud config list project prüfen und ihn mit gcloud config set project YOUR_PROJECT_ID festlegen.

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

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****:**

Mit einer Dockerfile wird definiert, wie ein Docker-Image für Ihre Anwendung erstellt wird. Erstellen Sie im Projektverzeichnis eine Datei namens Dockerfile (ohne Erweiterung) und fügen Sie Folgendes 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, können Sie es mit dem folgenden Befehl in Cloud Run bereitstellen:

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



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

Viel Erfolg beim Lernen!

6. Bereinigen

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

Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.
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 Cloud Run aufrufen, den gerade bereitgestellten Dienst auswählen und löschen.