Übersicht

In diesem Lab binden Sie einen LangChain-Agenten in eine Flutter-Anwendung ein. Flutter wird als Framework für die Client-Anwendung eingesetzt, die Agent Search on Gemini Enterprise Agent Platform dient als Vektordatenbank und die Agent Runtime on Gemini Enterprise Agent Platform wird zum Erstellen und Bereitstellen des LangChain-Agenten genutzt. Der KI-Agent verwendet Gemini, eine Familie leistungsstarker Large Language Models (LLMs), um KI-Antworten auf Text- und Bildprompts zu generieren.

Das Lab wird anhand von code-server mit VS Code als IDE bereitgestellt sowie mit den Flutter- und Dart-Erweiterungen, die zum Ausführen der Flutter-Anwendung erforderlich sind. In diesem Lab wird ebenfalls das fwr-Tool verwendet. Damit stellen Sie die Flutter-Anwendung als Webanwendung bereit, auf die Sie über einen Browser zugreifen.

Dieses Lab ist für Entwicklerinnen und Entwickler aller Erfahrungsstufen gedacht, die an der Anwendungserstellung beteiligt, aber unter Umständen nicht mit Cloud-Anwendungen vertraut sind. Erfahrung mit Python sowie dem Flutter-Framework ist hilfreich. Sie müssen Flutter nicht kennen, um die Aufgaben in diesem Lab auszuführen. Sie werden jedoch einen Teil des Codes der Flutter-Anwendung überprüfen und ihre Funktionen testen.

Lernziele

Aufgaben in diesem Lab:

• Mit KI-Anwendungen in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen

• Mit der Gemini Enterprise Agent Platform Workbench einen LangChain-Agenten bereitstellen

• Eine Python-Anwendung nutzen, die in Agent Search und den LangChain-Agenten eingebunden ist

• Die Anwendung in Cloud Run bereitstellen und als Backend für eine Flutter-Anwendung verwenden

• Eine Flutter-Anwendung erstellen, die als Frontend-Chatanwendung verwendet werden soll

  Hier ist eine Übersicht der verschiedenen Komponenten, die in diesem Lab verwendet werden:

  

Einrichtung

Für jedes Lab werden Ihnen ein neues Google Cloud-Projekt und die entsprechenden Ressourcen für eine bestimmte Zeit kostenlos zur Verfügung gestellt.

1. Melden Sie sich über ein Inkognitofenster bei Google Skills an.

2. Beachten Sie die Zugriffszeit (z. B. 1:15:00). Das Lab muss in dieser Zeit abgeschlossen werden.
   Es gibt keine Pausenfunktion. Sie können bei Bedarf neu starten, müssen dann aber von vorn beginnen.

3. Wenn Sie bereit sind, klicken Sie auf Lab starten.

4. Notieren Sie sich Ihre Anmeldedaten (Nutzername und Passwort). Mit diesen Daten melden Sie sich in der Google Cloud Console an.

5. Klicken Sie auf Google Console öffnen.

6. Klicken Sie auf Anderes Konto verwenden. Kopieren Sie den Nutzernamen und das Passwort für dieses Lab und fügen Sie beides in die entsprechenden Felder ein.
   Wenn Sie andere Anmeldedaten verwenden, tritt ein Fehler auf oder es fallen Kosten an.

7. Akzeptieren Sie die Nutzungsbedingungen und überspringen Sie die Seite zur Wiederherstellung der Ressourcen.

Aufgabe 1: Suchdatenspeicher und Suchanwendung erstellen

In dieser Aufgabe implementieren Sie die Suchfunktion für Ihre Flutter-Anwendung, indem Sie mit KI-Anwendungen in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen.

Suchdatenspeicher erstellen

1. Klicken Sie in der Cloud Console auf Alle Produkte ansehen. Scrollen Sie auf der Seite Alle Produkte zum Bereich Künstliche Intelligenz und klicken Sie auf KI-Anwendungen.

2. Klicken Sie auf Fortfahren und die API aktivieren.

3. Klicken Sie im linken Bereich auf Datenspeicher und dann auf der Seite Datenspeicher auf Datenspeicher erstellen.

   Auf dieser Seite konfigurieren Sie die Datenquelle, die für die Suchergebnisse verwendet werden soll. Das Lab wird mit einem Cloud Storage-Bucket bereitgestellt, der eine CSV-Datei mit Daten zu Artikeln aus dem Merchandise-Onlineshop von Google enthält.

4. Klicken Sie unter Cloud Storage auf Auswählen, um Cloud Storage als Datenquelle auszuwählen.

5. Wählen Sie unter Import strukturierter Daten als Art der importierten Daten CSV (für FAQ-Daten) aus.

6. Scrollen Sie zum Abschnitt Ordner oder Datei für Import auswählen und klicken Sie auf Datei.

7. Klicken Sie auf Durchsuchen, um die Cloud Storage-URL für die CSV-Datei anzugeben.

8. Klicken Sie auf , um den Inhalt des Cloud Storage-Buckets anzusehen.

9. Wählen Sie die Datei goog_merch.csv aus und klicken Sie dann auf Auswählen.

   Der gs://-URI zum Ordner wird eingefügt.

   

10. Klicken Sie auf Weiter.

11. Geben Sie als Namen des Datenspeichers goog-merch-ds ein und klicken Sie auf Weiter.

12. Lassen Sie das ausgewählte Preismodell unverändert und klicken Sie auf Erstellen.

    Ein Datenspeicher wird erstellt und die Datenaufnahme aus der CSV-Datei wird gestartet.

13. Klicken Sie auf der Seite Datenspeicher auf den Namen des neu erstellten Datenspeichers.

14. Klicken Sie auf Aktualisieren.

    Auf dem Tab Dokumente ist eine Liste der importierten Dokumente zu sehen.

15. Klicken Sie auf Dokument anzeigen, um die mit einem Dokument verknüpften Daten anzusehen.

Klicken Sie auf Fortschritt prüfen. Agent Search-Datenspeicher erstellen

Suchanwendung erstellen

Damit Sie den Suchdatenspeicher verwenden können, verbinden Sie ihn unter „KI-Anwendungen“ mit einer Suchanwendung.

1. Klicken Sie in der Cloud Console auf KI-Anwendungen und dann auf Anwendungen.

2. Klicken Sie auf Neue Anwendung erstellen.

3. Klicken Sie auf der Seite Anwendung erstellen auf dem Tab Suche und Assistent unter Benutzerdefinierte Suche (allgemein) auf Erstellen.

4. Konfigurieren Sie auf der Seite Konfiguration der Suchanwendung eine Website-Suchanwendung mit diesen Einstellungen. Lassen Sie ansonsten die Standardeinstellungen unverändert:

   Attribut	Wert (eingeben oder auswählen)
   Funktionen der Enterprise-Version	Deaktivieren
   Name der Anwendung	gms-search-app
   Externer Name Ihres Unternehmens oder Ihrer Organisation	gms-company
   Standort der Anwendung	global (Global)

5. Klicken Sie auf Weiter.

6. Eine Liste der vorhandenen Datenspeicher wird angezeigt. Wählen Sie den Datenspeicher goog_merch_ds aus, den Sie in der vorherigen Unteraufgabe erstellt haben, und klicken Sie auf Weiter.

7. Lassen Sie für das ausgewählte Preismodell den Standardwert stehen und klicken Sie auf Erstellen.

   Die Suchanwendung wird erstellt und der Datenspeicher wird mit der Anwendung verbunden.

8. Klicken Sie im Navigationsmenü der KI-Anwendungen auf Vorschau, um die Suchanwendung zu testen.

9. Geben Sie im Feld Suchen das Wort dino ein und drücken Sie die Eingabetaste.

   Eine Liste mit ähnlichen Suchergebnissen aus den Dokumenten, die in den Datenspeicher importiert wurden, wird angezeigt.

   

   Hinweis: Wenn Ihnen die Fehlermeldung Suchvorschau ist noch nicht bereit angezeigt wird, warten Sie einige Minuten und versuchen Sie es dann noch einmal. Falls Sie nicht warten möchten, können Sie mit der nächsten Aufgabe im Lab fortfahren.

Klicken Sie auf Fortschritt prüfen. Agent Search-Anwendung erstellen

Aufgabe 2: Backend erstellen und bereitstellen

Das Backend unserer Flutter-Anwendung wird als Cloud Run-Dienst in Google Cloud ausgeführt. Der Backend-Dienst wird in die Suchanwendung eingebunden, die Sie in der vorherigen Aufgabe erstellt haben, um Antworten aus den Daten des Merchandise-Onlineshops zu generieren.

In einer späteren Aufgabe binden Sie die Backend-Anwendung auch in einen LangChain-Agenten ein, um auf GenAI-Inhalte in Gemini zuzugreifen und Abfragen der Flutter-Anwendung zu beantworten.

In dieser Aufgabe erstellen Sie die Backend-Python-Anwendung und stellen sie in Cloud Run bereit.

Backend-Anwendung konfigurieren und überprüfen

1. Für dieses Lab wurde eine auf VS Code basierende IDE bereitgestellt. Kopieren Sie die IDE-Dienst-URL aus dem Bereich mit den Anmeldedaten des Labs und fügen Sie sie in ein neues Inkognito-Browserfenster oder einen neuen Tab ein, um auf die IDE zuzugreifen.

   

   Hinweis: Die URL des IDE-Diensts ist der Endpunkt eines Cloud Run-Diensts, der für dieses Lab vorkonfiguriert wurde, und verarbeitet Anfragen an die „code-server“-VM. Die IDE wurde mit code-server erstellt und umfasst die Erweiterungen für Flutter, Dart und Vim.

   

2. Öffnen Sie ein Terminalfenster in der IDE. Klicken Sie im Navigationsmenü der IDE () auf Terminal > Neues Terminal.

   Hinweis: Führen Sie die Befehle in den folgenden Schritten im Terminalfenster der IDE aus.

3. Eine erste Version der Backend-Anwendung und die zugehörigen Dateien sind für das Lab vorkonfiguriert. Kopieren Sie die erste Version des Backend-Anwendungsordners und seinen Inhalt aus einem Archiv in Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip Hinweis: Wenn Sie dazu aufgefordert werden, klicken Sie auf Zulassen, um Text und Bilder aus der Zwischenablage einzufügen, und drücken Sie dann die Eingabetaste.

4. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus, um den Inhalt des Ordners aufzulisten:

   ls ~/ag-web/app

   Der Ordner ag-web/app enthält den Quellcode der Anwendung sowie weitere Dateien, die zum Erstellen der Backend-Anwendung und zum Bereitstellen in Cloud Run erforderlich sind.

5. Legen Sie die Konfiguration von PROJECT_ID und LOCATION für die Anwendung fest.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py

6. Konfigurieren Sie die Backend-Anwendung so, dass sie den zuvor erstellten Suchdatenspeicher verwendet.

   sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py

   Ersetzen Sie im Befehl den String {YOUR_SEARCH_DATASTORE_ID} durch die ID Ihres Suchdatenspeichers. Entfernen Sie die geschweiften Klammern im sed-Befehl.

   Hinweis: Gehen Sie in der Cloud Console zu KI-Anwendungen > Datenspeicher und klicken Sie auf den Namen des zuvor erstellten Suchdatenspeichers, um die ID des Suchdatenspeichers abzurufen. Kopieren Sie den Wert der Datenspeicher-ID, die mit der Suchmaschinen-ID übereinstimmt.

   

7. Klicken Sie im Navigationsmenü der IDE auf und dann auf Ordner öffnen, um den Code in der IDE anzusehen.

8. Wählen Sie den Ordner IDE-DEV/ag-web/ aus der Liste aus und klicken Sie auf OK.

9. Wenn Sie den Erstellerinnen und Erstellern des Codes vertrauen, klicken Sie auf Ja, ich vertraue den Erstellern.

10. Maximieren Sie im Bereich Explorer den Ordner app und klicken Sie dann auf app.py, um die Datei im Editor zu öffnen.

    Der Code der Backend-Anwendung bewirkt Folgendes:

    • Initialisiert einen SearchServiceClient für die API discoveryengine.googleapis.com.
    • Die Funktion search_gms() nutzt den API-Endpunkt datastores, um eine Suchanfrage zu starten. Die zuvor erstellte Datenspeicher-ID wird in der URL verwendet.
    • Die Funktion verwendet die von der Nutzerin bzw. dem Nutzer bereitgestellte Suchanfrage, um den Inhalt des Datenspeichers zu durchsuchen, und formatiert die Ergebnisse als JSON-Antwort.
    • Die Anwendung verwendet flask, um Aufrufe an die einzelnen Funktionen weiterzuleiten. Der Endpunkt / ist die Standardseite, mit der überprüft wird, ob die Anwendung erfolgreich geladen wird. Der Endpunkt /ask_gms ruft die Funktion search_gms() auf, die Agent Search verwendet.

Anwendung erstellen und in Cloud Run bereitstellen

Ein Bereitstellungsscript ist verfügbar, um die Backend-Anwendung zu erstellen und in Cloud Run bereitzustellen.

1. Öffnen Sie ein Terminalfenster in der IDE und wechseln Sie in den Ordner der Backend-Anwendung:

   cd ~/ag-web/app

2. Authentifizieren Sie sich über die gcloud CLI bei Google Cloud:

   gcloud auth login

3. Geben Sie Y ein, um fortzufahren.

4. Drücken Sie zum Starten der Anmeldung unter Windows und Linux die Strg-Taste oder unter macOS die Befehlstaste und klicken Sie auf den Link im Terminal.

5. Wenn Sie aufgefordert werden, das Öffnen der externen Website zu bestätigen, klicken Sie auf Öffnen.

6. Klicken Sie auf Ihre E‑Mail-Adresse für das Lab.

7. Wenn Sie aufgefordert werden, fortzufahren, klicken Sie auf Weiter.

8. Klicken Sie auf Zulassen, um dem Google Cloud SDK Zugriff auf Ihr Google-Konto zu gewähren und die Nutzungsbedingungen zu akzeptieren.

   Ihr Bestätigungscode wird im Browsertab angezeigt.

9. Klicken Sie auf Kopieren.

10. Fügen Sie den Code im Terminalfenster der IDE unter Autorisierungscode eingeben ein und drücken Sie die Eingabetaste.

    Sie sind jetzt in Google Cloud angemeldet.

11. Machen Sie das Script deploy.sh ausführbar und führen Sie es aus, um die Anwendung in der angegebenen Cloud Run-Region bereitzustellen:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Nachdem die Anwendung erstellt und in Cloud Run bereitgestellt wurde, wird am Ende der Scriptausgabe ihre Endpunkt-URL angezeigt. Die URL wurde durch den Befehl gcloud run deploy generiert, der im Script ausgeführt wurde.

    Hinweis: Die Ausführung dieses Befehls kann einige Zeit in Anspruch nehmen. Warten Sie, bis er abgeschlossen ist, bevor Sie mit der nächsten Aufgabe fortfahren.

Backend-Anwendung testen

Sie testen die Funktionen der Anwendung, indem Sie auf den Cloud Run-Endpunkt zugreifen.

1. Kopieren Sie die Endpunkt-URL der Anwendung, die im vorherigen Schritt generiert wurde, und rufen Sie diese URL in einem neuen Browsertab auf.

2. Wenn die Anwendung geladen wird, wird auf der Startseite Willkommen bei der Backend-Anwendung ag-web angezeigt.

3. Hängen Sie in der Browserleiste den folgenden Pfad an die URL an:

   /ask_gms?query=dino

4. Prüfen Sie, ob die Anwendung mit Ergebnissen aus dem Suchdatenspeicher antwortet, den Sie zuvor erstellt haben.

Klicken Sie auf Fortschritt prüfen. Backend-Anwendung erstellen

Aufgabe 3: LangChain-Agenten erstellen

Ein KI-Agent ist eine Anwendung, die Large Language Models (LLMs) für Schlussfolgerungen und die Orchestrierung externer Tools nutzt, um ihr Ziel zu erreichen. Die Gemini Enterprise Agent Platform umfasst eine Reihe von Produkten und Tools von Google, mit denen Sie KI-Agenten erstellen können, indem Sie sie mit Ihren zuverlässigen Datenquellen verbinden.

Mit der Agent Runtime on Gemini Enterprise Agent Platform können Sie einen Reasoning-Agenten auf der Agent Platform erstellen und bereitstellen. LangChain ist ein beliebtes OSS-Tool zum Erstellen von Chatbots und RAG-Systemen.

In der Agent Platform können Entwicklungsteams Funktionsaufrufe verwenden, um die Ausgabe von LLMs (Gemini) Python-Funktionen zuzuordnen. Mit dem Agent Platform SDK können Sie mit der für das LangChain-Framework spezifischen Vorlage KI-Agenten entwickeln und bereitstellen.

In dieser Aufgabe verwenden Sie die Agent Platform Workbench mit einem Jupyter-Notebook, um einen LangChain-Agenten mit Python-Funktionen zu erstellen und bereitzustellen. Er kommt bei der nächsten Lab-Aufgabe in unserer auf generativer KI basierenden Backend-Anwendung zum Einsatz.

Agent Platform Workbench-Instanz erstellen

Agent Platform Workbench ist eine auf Jupyter-Notebooks basierende Entwicklungsumgebung für den gesamten Data-Science- und Machine-Learning-Workflow. Sie können über das Jupyter-Notebook einer Workbench-Instanz mit der Agent Platform und anderen Google Cloud-Diensten interagieren. Sie können beispielsweise über BigQuery- und Cloud Storage-Integrationen in einem Jupyter-Notebook auf Ihre Daten zugreifen und sie analysieren.

Agent Platform Workbench-Notebooks bieten eine flexible und skalierbare Lösung für das Entwickeln und Bereitstellen von ML-Modellen in Google Cloud.

1. Klicken Sie zum Erstellen einer Workbench-Instanz in der Cloud Console auf das Navigationsmenü () und wählen Sie Agent Platform > Notebooks aus.

2. Klicken Sie im Navigationsmenü Notebooks auf Workbench.

3. Prüfen Sie, ob auf dem Tab Instanzen die Option Instanzen ausgewählt ist, und klicken Sie dann auf Neu erstellen.

   

4. Geben Sie auf der Seite „Neue Instanz“ als Name den Wert my-instance ein.

5. Lassen Sie alle anderen Einstellungen unverändert und klicken Sie auf Erstellen.

   Die neue Instanz wird im Abschnitt „Instanzen“ gestartet. Warten Sie, bis die Instanz erstellt wurde, bevor Sie mit dem nächsten Schritt fortfahren.

   Hinweis: Wenn die Instanz einsatzbereit ist, wird neben dem Namen ein grünes Häkchen angezeigt.

6. Wenn die Instanz bereit ist, klicken Sie auf JupyterLab öffnen.

   

7. Klicken Sie auf das Python 3-Notebook, um ein Jupyter-Notebook mit Python 3 zu starten.

   

Notebookdatei kopieren

Für dieses Lab wurde ein Notebook bereitgestellt, mit dem ein LangChain-Agent erstellt und bereitgestellt wird.

1. Fügen Sie diesen Code in die erste Zelle des neuen Notebooks ein, um das Notebook in Ihre JupyterLab-Instanz zu kopieren:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Wählen Sie die Zelle aus und führen Sie sie aus, indem Sie im Zellenmenü auf Ausführen klicken:

   

   Durch den Befehl wird das Notebook aus Cloud Storage in Ihre JupyterLab-Instanz kopiert. Nachdem der Befehl ausgeführt wurde, wird die Notebookdatei im obersten Stammordner aufgeführt.

   

3. Doppelklicken Sie zum Öffnen des Notebooks in der Ordnerliste auf die Notebookdatei. Es wird ein separater Tab mit dem Inhalt des Notebooks erstellt.

Reasoning-Engine-Agent erstellen und bereitstellen

1. Führen Sie alle Codezellen im Notebook in der angegebenen Reihenfolge aus. Um eine Zelle auszuführen, klicken Sie auf eine beliebige Stelle in der Zelle. Klicken Sie dann im Zellenmenü oder im oberen Notebook-Menü auf Ausführen.

   Hinweis: Wenn Sie den Befehl in einer Zelle ausführen, warten Sie, bis er abgeschlossen ist, bevor Sie zur nächsten Zelle wechseln. Nachdem ein Befehl ausgeführt wurde, wird der Stern (*) im Feld mit der Zellennummer durch die Nummer der Zelle ersetzt. Hinweis: Lesen Sie die unten stehenden zellspezifischen Anweisungen oder Schritte, bevor Sie eine Zelle ausführen. Diese Anweisungen sind mit dem Präfix CELL INSTR gekennzeichnet.

   a. [CELL INSTR] Aktuelle Laufzeit neu starten

   Wenn Sie dazu aufgefordert werden, klicken Sie im Dialogfeld Kernel neu starten auf OK.

   b. [CELL INSTR] Google Cloud-Projektinformationen festlegen und Agent Platform initialisieren:

   Aktualisieren Sie die Konfigurationswerte für PROJECT_ID, LOCATION und STAGING_BUCKET, bevor Sie diese Zelle ausführen, um die Agent Platform zu initialisieren:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Aktualisierte Zelle mit Beispielkonfiguration:

   

   c. [CELL INSTR] KI-Agenten definieren:

   Ersetzen Sie vor dem Ausführen dieser Zelle den Wert von GEMINI_MODEL_ID durch die neueste Modell-ID, die in diesem Notebook verwendet wird: .

   Hinweis: Sie können eine Zelle auch ausführen, indem Sie in der Notebook-Menüleiste auf Ausführen klicken.

2. Nachdem Sie die Zelle Agent in Agent Runtime bereitstellen ausgeführt haben, warten Sie, bis der Befehl ausgeführt und der LangChain-Agent bereitgestellt wurde. Kopieren Sie dann die KI-Agenten-ID:

   

   Sie verwenden diese ID, um die Backend-Anwendung in der nächsten Aufgabe zu konfigurieren und neu bereitzustellen.

   Hinweis: Das Ausführen dieser Zelle kann bis zu zehn Minuten dauern. Warten Sie, bis die endgültige Ausgabe angezeigt wird, die angibt, dass der KI-Agent bereitgestellt wurde, bevor Sie mit dem nächsten Schritt fortfahren.

3. Um zu testen, ob der LangChain-Agent korrekt funktioniert, führen Sie die nächsten beiden Zellen aus und beobachten die Ausgabe.

   Der LangChain-Agent ruft je nach Abfrage entweder den Wikipedia- oder den Agent Search-Datenspeicher auf.

Klicken Sie auf Fortschritt prüfen. LangChain-Agenten bereitstellen

Aufgabe 4: Backend-Anwendung erweitern

Wir erweitern jetzt die Backend-Anwendung, damit sie den LangChain-Agenten aufruft, den Sie in der vorherigen Aufgabe bereitgestellt haben.

Die erste Version der Backend-Anwendung ruft Ergebnisse nur direkt aus Agent Search ab. In der aktualisierten Version ruft sie auch den KI-Agenten auf, der anhand der Ausgaben von Gemini und der Tools des Agenten je nach Prompt mithilfe von Agent Search oder Wikipedia eine Antwort generiert.

In dieser Aufgabe aktualisieren Sie den Code der Backend-Anwendung und fügen einen Einstiegspunkt hinzu, über den der LangChain-Agent mit einer Abfrage aufgerufen und die Antwort des KI-Agenten zurückgegeben wird.

Backend-Anwendung aktualisieren

1. Im Terminalfenster der IDE hängen Sie an die Datei app.py den Code für den neuen Einstiegspunkt an. Führen Sie dazu folgenden Befehl aus:

   cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Construct the resource name for the project name = f"projects/{project_id}" # Get project metadata project = client.get_project(name=name) # The 'name' field in the response is in the format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Konfigurieren Sie die Backend-Anwendung so, dass sie den zuvor erstellten LangChain-Agenten verwendet.

   Ersetzen Sie den String {YOUR_LANGCHAIN_AGENT_ID} im folgenden Befehl durch die KI-Agenten-ID, die Sie in der vorherigen Aufgabe aus der Notebookzelle kopiert haben. Führen Sie dann den Befehl im Terminalfenster der IDE aus.

   Entfernen Sie die geschweiften Klammern im sed-Befehl.

   sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py

3. Klicken Sie im Navigationsmenü der IDE auf und wählen Sie die Datei IDE-DEV/ag-web/app/app.py aus, um den Code in der IDE anzusehen.

   In der erweiterten Version der Backend-Anwendung:

   • wird aus der Agent Runtime ein Handle für den Remote-Agenten mit der LANGCHAIN_AGENT_ID des KI-Agenten abgerufen, den Sie in der vorherigen Aufgabe erstellt haben.
   • wird ein neuer /ask_gemini-Endpunkt festgelegt, der die Funktion „ask_gemini()“ definiert.
   • übergibt die Funktion den von der Nutzerin bzw. vom Nutzer bereitgestellten query-Parameter aus der Anfrage an den LangChain-Agenten (remote_agent) und gibt die Antwort des Agenten zurück.

Backend-Anwendung erstellen und erneut in Cloud Run bereitstellen

1. Wechseln Sie in den Ordner der Backend-Anwendung:

   cd ~/ag-web/app

2. Führen Sie das Script aus, um die Anwendung in der angegebenen Cloud Run-Region erneut bereitzustellen:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Backend-Anwendung testen

Sie testen die Funktionen der Anwendung, indem Sie auf den Cloud Run-Endpunkt zugreifen.

1. Kopieren Sie die Endpunkt-URL der Anwendung, die im vorherigen Schritt generiert wurde, und rufen Sie diese URL in einem neuen Browsertab auf.

2. Wenn die Anwendung geladen wird, wird auf der Startseite Willkommen bei der Backend-Anwendung ag-web angezeigt.

3. Hängen Sie in der Browserleiste den folgenden Pfad an die URL an:

   /ask_gemini?query=where can I buy the chrome dino pin

   Die Anwendung antwortet mit Ergebnissen des KI-Agenten, die dieser aus dem zuvor erstellten Agent Search-Datenspeicher abgerufen hat.

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Ersetzen Sie in der Browserleiste den Pfad durch:

   /ask_gemini?query=what is fallingwater. Write the answer in plaintext.

   Die Anwendung antwortet mit Ergebnissen des KI-Agenten, der eine Antwort über die Wikipedia API abgerufen hat, die Sie im Notebook konfiguriert haben.

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. Hinweis: Die tatsächlichen Antworten, die Sie erhalten, können von den oben angezeigten Antworten abweichen.

Aufgabe 5: Flutter-Frontend-Anwendung erstellen

Flutter ist ein Open-Source-Framework zur Anwendungsentwicklung für mehrere Plattformen. Sie können eine Codebasis schreiben, die unter Android, iOS, macOS, Windows, Linux und im Web ausgeführt wird. Flutter-Anwendungen werden in der Programmiersprache Dart entwickelt.

In diesem Lab verwenden Sie Web als Zielplattform, damit die Flutter-Anwendung als Webanwendung bereitgestellt und über einen Browser aufgerufen werden kann.

In dieser Aufgabe erstellen Sie mit Flutter eine einfache Chatanwendung, aktualisieren den Code und erstellen und führen die Anwendung als Webanwendung aus.

Flutter-Anwendung erstellen

1. Wechseln Sie im IDE-Terminal zu Ihrem Basisverzeichnis und führen Sie den folgenden Befehl aus:

   cd ~; flutter create chat_app

   Mit dem Befehl flutter create werden alle erforderlichen Dateien, Ordner und Konfigurationen für ein neues ausführbares Flutter-Projekt erstellt.

2. Rufen Sie den Ordner IDE-DEV/chat_app auf, um den Code der Standard-Chatanwendung in der IDE anzusehen.

   Möglicherweise müssen Sie auf „Aktualisieren“ klicken, um den Inhalt des Ordnernavigationsbereichs in der IDE zu aktualisieren.

3. Wenn Sie gefragt werden, ob Sie den Erstellerinnen und Erstellern der Dateien in dem Ordner vertrauen, klicken Sie auf Ja, ich vertraue den Erstellern.

Code der Flutter-Anwendung prüfen

Hier ist eine kurze Übersicht über den Inhalt des Ordners chat_app:

Ordner/Datei	Beschreibung
chat_app	Stammordner des Projekts, der die Unterordner und Dateien enthält, aus denen die Flutter-Anwendung besteht
android/ios/linux/macos/web/windows	Enthält plattformspezifische Dateien, die zum Ausführen der Flutter-Anwendung auf den unterstützten Plattformen erforderlich sind
lib	Enthält die zentralen Dart-Anwendungsdateien für die Funktionen und die Benutzeroberfläche
test	Enthält Dart-Tests, die zum Testen der Anwendungs-Widgets verwendet werden
pubspec.yaml	Enthält die Abhängigkeiten der Anwendung, die Flutter-Version und andere Konfigurationseinstellungen
analysis_options.yaml	Enthält Konfigurationseinstellungen für die statische Analyse der Anwendung

Sehen wir uns die Einstiegspunktdatei main.dart der Flutter-Anwendung an.

• Klicken Sie im Explorer-Menü auf die Datei IDE-DEV/chat_app/lib/main.dart, um sie zu öffnen.

  Dies ist der Einstiegspunkt für die Flutter-Anwendung. Nach dem Ausführen der Initialisierungsaufgaben wird durch den Code in dieser Datei die Benutzeroberfläche der Anwendung anhand von Material-Komponenten erstellt und Titel, Design und andere Konfigurationen werden festgelegt.

  Hinweis: Eine Material-Anwendung beginnt mit dem MaterialApp-Widget, das eine Reihe nützlicher Widgets im Stammverzeichnis der Anwendung erstellt, einschließlich eines Navigators, der das Routing zu verschiedenen Bildschirmen der Anwendung verwaltet.

  Flutter verwendet Widgets. Dies sind deklarative Klassen, über die die Anwendung erstellt wird. In Flutter erstellen Sie ein Layout, indem Sie Widgets zu komplexeren Widgets zusammenstellen, die einen Widget-Baum bilden. Weitere Informationen zum Erstellen von Benutzeroberflächen in Flutter finden Sie in der Dokumentation.

  Diese Datei enthält die Klassen, die die Widgets der Anwendung erstellen. Dazu gehören:

  • Die Klasse MyApp, das Stamm-Widget der Chatanwendung
  • Die Klasse MyHomePage, die die Hauptseite der Anwendung mit der Klasse _MyHomePageState erstellt
  • Die Klasse _MyHomePageState, die die Benutzeroberfläche der Anwendung erstellt und für die Aktualisierung des UI-Status verantwortlich ist

  Wir ersetzen den standardmäßig generierten Code in diesen Klassen in den nächsten Unteraufgaben, während Sie die Chatanwendung erstellen.

Code der Flutter-Anwendung aktualisieren

1. Aktualisieren Sie zuerst den Titel der Anwendung. Ändern Sie in der Klasse MyApp in Zeile 14 den Wert des Attributs title:

   title: 'Gemini Chat App',

   

2. Löschen Sie in der Klasse _MyHomePageState in Zeile 58 die Zeile int _counter = 0; und die Funktion _incrementCounter() und fügen Sie die folgenden Attribute hinzu:

   final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';

   Diese Attribute werden verwendet, um Nutzereingaben für den Text-Prompt zu akzeptieren, die Nutzereingaben und die Antworten der Backend-Anwendung zur Anzeige zu speichern und den Hostnamen des Cloud Run-Diensts der Backend-Anwendung zu speichern.

3. Fügen Sie der Klasse die Methode initState() hinzu:

   @override void initState() { super.initState(); _loadConfig(); }

   Diese Methode führt Initialisierungsfunktionen aus, wenn das State-Objekt erstellt wird. In der Chatanwendung laden wir den Inhalt einer Datei durch Aufrufen der Methode _loadConfig(), die wir als Nächstes implementieren.

4. Fügen Sie der Klasse die Methode _loadConfig() hinzu:

   Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }

   Diese Methode ruft den Inhalt der Konfigurationsdatei der Chatanwendung ab, in der der Wert des Hostnamens Ihrer Cloud Run-Backend-Anwendung in einem JSON-Objekt gespeichert ist. Diese Datei erstellen wir später im Lab. Die Methode speichert den Wert im internen Attribut _cloudRunHost, das zuvor erstellt wurde, und erstellt die Widget-UI.

5. Fügen Sie der Klasse die Methode _sendMessage() hinzu:

   Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }

   Diese Methode ruft den eingegebenen Prompt-Text ab und fügt ihn der Liste der im Chatbereich angezeigten Nachrichten hinzu. Sie sendet eine HTTP-GET-Anfrage mit dem Eingabe-Prompt an die Endpunkt-URL des Cloud Run-Backend-Diensts und zeigt die Antwort des Diensts an.

   Der Code erstellt eine URL zum Endpunkt des Cloud Run-Backend-Hosts, die den Prompt-Text in einem Suchparameter enthält. Die HTTP-GET-Anfrage wird dann an den Endpunkt gesendet. Sobald die Antwort mit dem Statuscode 200 empfangen wurde, wird sie decodiert und der Nachrichtenliste hinzugefügt, um sie im Chatbildschirm anzuzeigen. Wenn die Antwort nicht erfolgreich ist oder eine Ausnahme auftritt, wird der Statuscode oder die Ausnahmenachricht der Nachrichtenliste hinzugefügt und angezeigt.

6. Ersetzen Sie zum Erstellen der Benutzeroberfläche der Chatanwendung die vorhandene build-Methode durch den folgenden Code in der Klasse _MyHomePageState:

   @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }

   Die Methode build beschreibt die Benutzeroberfläche der Chatanwendung. Sie erstellt einen Widget-Baum mit der Konfiguration und dem aktuellen Status, den das Flutter-Framework dann auf dem Bildschirm rendert. In dieser Chatanwendungs-UI zeigt der Code die Chatnachrichten in einer Spalte zusammen mit einem Textfeld und einem Button zum Senden des Nutzer-Prompts an. Eingegebene Nachrichten (Prompts) werden in einem blauen Feld dargestellt, während Antwort- oder Fehlermeldungen der Anwendung (des Bots) in einem grauen Feld angezeigt werden.

   Wenn die Nutzerin bzw. der Nutzer in der Chatanwendung auf Send klickt oder nach der Eingabe eines Prompts im Textfeld die Eingabetaste drückt, wird die Callback-Methode _sendMessage() aufgerufen.

Importe hinzufügen

Der hinzugefügte Code hängt von bestimmten Bibliotheken oder Paketen aus den Dart- und Flutter-SDKs ab.

1. Fügen Sie die folgenden import-Anweisungen am Anfang der Datei main.dart unterhalb der vorhandenen import-Anweisung hinzu, um diese Pakete zu importieren:

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • Das Paket http.dart enthält eine Reihe von High-Level-Funktionen und Klassen, die die Nutzung von HTTP-Ressourcen erleichtern.
   • Die Bibliothek dart:convert enthält Funktionen für gängige Datenkonvertierungen wie JSON-Serialisierung und UTF-8-Codierung/Decodierung.
   • Das Attribut rootBundle ist ein globales statisches Objekt, das Zugriff auf das Haupt-Asset-Bundle Ihrer Flutter-Anwendung bietet.

2. Klicken Sie im Navigationsmenü der IDE auf Datei > Speichern, um die Änderungen an der Anwendung zu speichern.

Abhängigkeiten aktualisieren

In der Datei pubspec.yaml sind die Projektmetadaten, Paketabhängigkeiten und Assets für Ihre Flutter-Anwendung angegeben.

1. Bearbeiten Sie die Datei „pubspec.yaml“, indem Sie sie im Bereich „Explorer“ in der IDE auswählen. Die Datei befindet sich im Ordner chat_app.

2. Fügen Sie im Abschnitt dependencies die Paketabhängigkeit http unter der Schriftartenbibliothek cupertino_icons hinzu:

   http: ^1.6.0 Achten Sie darauf, dass der Einzug mit Leerzeichen erhalten bleibt.

   

3. Scrollen Sie im Abschnitt flutter der Datei pubspec.yaml zu Zeile 63 und entfernen Sie das Kommentarzeichen. Fügen Sie den Ordner assets unter assets hinzu und achten Sie dabei auf den Einzug mit Leerzeichen:

   assets: - assets/

   

   Dadurch wird der Ordner „assets“ konfiguriert, in dem wir die Datei config.json für die Anwendung speichern.

4. Klicken Sie im Navigationsmenü der IDE auf Datei > Speichern, um die Änderungen an der Datei pubspec.yaml zu speichern.

Flutter-Anwendung in das Cloud Run-Backend einbinden

Die Flutter-Anwendung wird in den Reasoning-Engine-Agenten eingebunden, den Sie zuvor in diesem Lab bereitgestellt haben. Die Einbindung erfolgt durch die Verbindung der Flutter-Anwendung mit dem Endpunkt der Backend-Anwendung, die Sie ebenfalls erstellt und in Cloud Run bereitgestellt haben.

In der Methode _sendMessage() haben Sie vielleicht Code bemerkt, der prüft, ob das Attribut _cloudRunHost leer ist oder nicht in der Datei assets/config.json konfiguriert wurde. In dieser Teilaufgabe fügen wir diese Datei unserer Flutter-Anwendung hinzu.

1. Rufen Sie zuerst den Hostnamen des Cloud Run-Endpunkts der Backend-Anwendung ab und speichern Sie den Wert in einer Umgebungsvariablen.

   Führen Sie im Terminalfenster der IDE den folgenden Befehl aus:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Erstellen Sie das Verzeichnis /assets im Stammverzeichnis Ihrer Flutter-Chatanwendung:

   mkdir ~/chat_app/assets

3. Erstellen Sie die Datei config.json im Verzeichnis /assets:

   cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF

4. Aktualisieren Sie zum Überprüfen der Änderung den Inhalt im Explorer-Menü der IDE und klicken Sie auf die Datei IDE-DEV/chat_app/assets/config.json, um sie zu öffnen. Prüfen Sie, ob der Wert des Konfigurationseintrags cloudRunHost mit dem Wert des Hostnamens Ihrer Cloud Run-Backend-Anwendung aktualisiert wurde.

   Hinweis: Der Wert sollte mit dem Wert der Umgebungsvariablen BACKEND_APP_HOST übereinstimmen, die Sie in einem vorherigen Schritt festgelegt haben.

Flutter-Anwendung bereitstellen

Da die Konfiguration der Flutter-Anwendung nun abgeschlossen ist, können Sie sie erstellen und bereitstellen. Für dieses Lab verwenden wir fwr, einen Entwicklungsserver für Flutter Web, um die Anwendung als Webanwendung auszuführen.

1. Achten Sie darauf, dass Sie sich im Ordner der Flutter-Anwendung befinden. Führen Sie im Terminalfenster der IDE den folgenden Befehl aus:

   cd ~/chat_app

2. Führen Sie den folgenden Befehl aus, um die Projektabhängigkeiten der Anwendung abzurufen:

   flutter pub get

3. Mit diesem Befehl erstellen Sie das Projekt und starten den Webserver:

   fwr

   Warten Sie, bis der Server gestartet wurde und die Flutter-Anwendung bereitstellt. Nach dem Start sollte die Ausgabe des Befehls in etwa so aussehen:

   

Aufgabe 6: Flutter-Anwendung testen

Nun testen wir die Funktionen der Flutter-Anwendung.

Anwendung testen

1. Kopieren Sie die Live-Server-URL aus dem Bereich mit den Lab-Anmeldedaten und öffnen Sie sie in einem neuen Tab Ihres Inkognito-Browserfensters, um auf die Flutter-Anwendung zuzugreifen.

   Es dauert einige Sekunden, bis die Chatanwendung geladen ist.

2. Geben Sie als Nachricht unten Folgendes ein:

   What is fallingwater? Write the answer in plaintext.

   Nach einigen Sekunden wird die Antwort des Backend-Agenten in der Anwendung angezeigt.

3. Geben Sie zum Testen der Anwendung und des Agenten als Nachricht Folgendes ein:

   Where can I buy the Chrome dino pin?

   Nach einigen Sekunden wird die Antwort des Backend-Agenten in der Anwendung angezeigt.

   Die Chatanwendung ruft den Cloud Run-Endpunkt /ask_gemini der Backend-Anwendung auf, die dann den LangChain-Agenten aufruft. Dieser gibt mithilfe von Gemini eine Antwort aus dem Agent Search-Datenspeicher zurück.

4. Wenn Sie das für Mobilgeräte optimierte Layout der Flutter-Anwendung sehen möchten, verkleinern Sie das Browserfenster auf die ungefähre Größe eines Mobilgeräts.

   

   Dies zeigt, dass die Flutter-Anwendung auf Änderungen der Bildschirm- oder Fenstergröße reagieren kann. Flutter bietet Widgets und Pakete, mit denen Sie Ihre Anwendung responsiv und an die Gerätekonfiguration anpassbar machen können.

Klicken Sie auf Fortschritt prüfen. Flutter-Chatanwendung entwickeln und testen

Lab beenden

Wenn Sie das Lab abgeschlossen haben, klicken Sie auf Lab beenden. Google Skills entfernt daraufhin die von Ihnen genutzten Ressourcen und bereinigt das Konto.

Anschließend erhalten Sie die Möglichkeit, das Lab zu bewerten. Wählen Sie die entsprechende Anzahl von Sternen aus, schreiben Sie einen Kommentar und klicken Sie anschließend auf Senden.

Die Anzahl der Sterne hat folgende Bedeutung:

• 1 Stern = Sehr unzufrieden
• 2 Sterne = Unzufrieden
• 3 Sterne = Neutral
• 4 Sterne = Zufrieden
• 5 Sterne = Sehr zufrieden

Wenn Sie kein Feedback geben möchten, können Sie das Dialogfeld einfach schließen.

Verwenden Sie für Feedback, Vorschläge oder Korrekturen den Tab Support.

Das wars! Sie haben das Lab erfolgreich abgeschlossen.

Diese Aufgaben haben Sie bearbeitet:

• Mit KI-Anwendungen in der Google Cloud Console einen Suchdatenspeicher und eine Suchanwendung erstellen
• Mit Agent Platform Workbench einen LangChain-Agenten bereitstellen
• Eine Python-Anwendung erstellen, die in Agent Search und den LangChain-Agenten eingebunden ist
• Die Anwendung in Cloud Run bereitstellen und als Backend für eine Flutter-Anwendung verwenden
• Eine Flutter-Chatanwendung entwickeln und in den Backend-Dienst einbinden, um mit Gemini zu interagieren

Weitere Informationen

• Gemini für Google Cloud – Übersicht
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

© 2026 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.