Einen eigenen „Bargaining Shopkeeper“-Agenten mit Gemini 3 und dem ADK erstellen

1. Übersicht

In diesem Codelab entwickeln wir etwas, das Spaß macht. Stellen Sie sich einen digitalen Basar vor, auf dem Ihr KI-Agent der klügste und witzigste Ladenbesitzer ist.

Raju – Ihr neuer KI‑Shopinhaber Er verkauft tolle digitale Artefakte, aber du musst mit ihm verhandeln, um sie zu bekommen.

Wir verwenden Gemini 3 (das Gehirn), das ADK (das Agent Development Kit – der Körper) und Google Cloud Run (der Standort des Geschäfts), um Raju zum Leben zu erwecken.

Lerninhalte

Wir entwickeln den gesamten Stack für eine moderne agentische Anwendung:

• Der Shop (Cloud Run): Hier ist Ihre App im Internet zu finden.
• Das Gehirn (Gemini 3): Die Intelligenz, die Raju antreibt.
• The Body (ADK): Das Framework, das das Gehirn mit den Tools verbindet.
• Inventar (Tools): Python-Code, mit dem Raju den Lagerbestand prüft.
• Storefront (Benutzeroberfläche): Die Oberfläche, die Ihre Kunden sehen.

Nach Abschluss können Sie:

• Richten Sie Ihren „Digital Dukaan“ (Google Cloud-Umgebung) ein.
• „Hire“ Raju (Get Gemini 3 API Keys).
• Bringe Raju bei, wie man verhandelt (Systemanweisungen und Personas).
• Raju ein Inventar geben (ADK-Tools)
• Erstellen Sie ein Schaufenster (Frontend-Benutzeroberfläche).
• Geöffnet (In Cloud Run bereitstellen)

Voraussetzungen

• Ein Google Cloud-Projekt.
• Humor (für Verhandlungen).
• Grundlegende Python-Kenntnisse

2. Dukaan (Cloud-Projekt) einrichten

Bevor wir Raju erstellen können, benötigen wir einen Shop-Standort. In der Cloud bedeutet das ein Projekt mit einem Rechnungskonto.

Testrechnungskonto

Von Kursleiter geleiteter Workshop:Wenn Sie an einem Workshop teilnehmen, können Sie den Einlösungslink verwenden, den Sie von Ihrem Kursleiter erhalten haben.

Selbststudium:Wenn Sie ein Selbststudium-Nutzer sind, können Sie ein Testabrechnungskonto einlösen, um dieses Lab auszuführen.

Benötigen Sie eine detaillierte Anleitung? Anleitung zu Cloud-Codelab-Guthaben

Schritt 1: Abrechnung aktivieren

1. Öffnen Sie den Einlösungslink in einem Inkognitofenster.
2. Melden Sie sich mit Ihrem privaten Gmail-Konto an.
3. Klicken Sie auf die Schaltfläche Auf Credits zugreifen.
4. Bestätigen Sie Ihre E‑Mail-Adresse und akzeptieren Sie die Nutzungsbedingungen, um Ihre Testversion zu aktivieren.

Schritt 2: Projekt erstellen

1. Rufen Sie die Seite zum Erstellen von Projekten auf.
2. Geben Sie einen eindeutigen Projektnamen ein, z.B. raju-shop-agent).
3. Wählen Sie im Drop-down-Menü „Rechnungskonto“ Ihr Testrechnungskonto aus.
4. Klicken Sie auf ERSTELLEN und warten Sie, bis das Projekt bereit ist.

Schritt 3: Abrechnungslink bestätigen

1. Rufen Sie die Seite „Verknüpftes Rechnungskonto“ auf.
2. Wenn die Option „Rechnungskonto verknüpfen“ angezeigt wird, klicken Sie darauf.
3. Achten Sie darauf, dass das Test-Rechnungskonto ausgewählt ist.
4. Jetzt können Sie loslegen!

Zusammenfassung

In diesem Schritt richten Sie Ihr Google Cloud-Projekt und Ihr Rechnungskonto ein und schaffen so die Grundlage für Ihre Anwendung.

Als Nächstes richten wir den Arbeitsbereich ein, in dem Sie den Code erstellen. Weitere Informationen finden Sie unter Umgebung vorbereiten.

3. Stand aufbauen (Umgebung einrichten)

Sie benötigen einen Ort, an dem Sie Ihren Code ausführen können. Sie haben zwei Möglichkeiten:

Option 1: Google Cloud Shell (empfohlen)

Cloud Shell ist ein browserbasiertes Terminal, in dem alles, was Sie benötigen, vorinstalliert ist (Python, gcloud CLI, git). Es bietet nichtflüchtigen Speicher und kann von überall aus verwendet werden.

1. Cloud Shell aktivieren

Klicken Sie rechts oben in der Kopfzeile der Google Cloud Console auf das Symbol „Cloud Shell aktivieren“ (ein Terminalsymbol).

Cloud Shell wird jetzt initialisiert. Das umfasst:

• Autorisieren:Wenn Sie dazu aufgefordert werden, klicken Sie auf Autorisieren, damit Cloud Shell in Ihrem Namen Aufrufe an Google Cloud APIs ausführen kann.
• Bereitstellung:Cloud Shell stellt eine temporäre virtuelle Maschine für Ihre Sitzung bereit.
• Verbinden:Es wird eine Verbindung zu dieser VM hergestellt. Der gesamte Vorgang kann ein bis zwei Minuten dauern.

Warten Sie, bis die Eingabeaufforderung (user@cloudshell:~ $) angezeigt wird.

2. Projekteinrichtung überprüfen

In Cloud Shell wird Ihr aktuelles Projekt in der Regel automatisch ausgewählt. Sicherheitshalber sollten Sie Folgendes prüfen:

gcloud config get-value project

Wenn Ihre Projekt-ID (raju-shop-agent) nicht zurückgegeben wird, legen Sie sie manuell fest:

gcloud config set project raju-shop-agent

Option 2: Lokales Terminal

Wenn Sie das Terminal Ihres eigenen Laptops (iTerm, PowerShell usw.) bevorzugen, müssen Sie etwas mehr einrichten.

1. Erforderliche Komponenten installieren

Prüfen Sie, ob Folgendes installiert ist:

• Python 3.10+
• Google Cloud SDK (gcloud CLI)

2. Bei gcloud anmelden und gcloud konfigurieren

Initialisieren Sie die Google Cloud CLI und melden Sie sich in Ihrem Konto an:

gcloud auth login

Legen Sie Ihr Projekt fest (ersetzen Sie raju-shop-agent durch Ihre tatsächliche Projekt-ID):

gcloud config set project raju-shop-agent

Standardanmeldedaten für Anwendungen einrichten (damit lokale Tools mit Google Cloud kommunizieren können):

gcloud auth application-default login

Zusammenfassung

In diesem Schritt haben Sie Ihre Entwicklungsumgebung (Cloud Shell oder lokal) ausgewählt und konfiguriert.

Als Nächstes stellen wir Ihnen das Tool vor, mit dem Sie schneller entwickeln können: Meeting Gemini CLI.

4. Ihr Assistent (Gemini CLI)

Gemini CLI ist Ihr neuer bester Freund für die KI-Entwicklung.

Die Gemini CLI ist eine leistungsstarke Befehlszeile, mit der Sie Folgendes tun können:

• Workflows automatisieren:KI-Projekte effizient verwalten.
• Codegenerierung:Code, Benutzeroberfläche und sogar ganze Dateien generieren.
• Erweiterungs-Ökosystem:Die Funktionen können mit verschiedenen Erweiterungen erweitert werden, z. B. mit der Cloud Run-Erweiterung, die wir später verwenden.

Du möchtest ein Profi werden? Einen umfassenden Überblick über alle Funktionen der Gemini-Befehlszeile finden Sie im Codelab zur Gemini-Befehlszeile. Sie können sich auch die vollständige Dokumentation zur Gemini CLI ansehen.

1. Gemini CLI installieren (nur lokales Terminal)

Wenn Sie das lokale Laptop-Terminal verwenden:

Hinweis:Für die Gemini CLI müssen Node.js (Version 20 oder höher) und npm auf Ihrem System installiert sein.

npm install -g @google/gemini-cli

Wenn Sie Google Cloud Shell verwenden:

Die Gemini CLI ist in Cloud Shell vorinstalliert. Sie müssen also nichts installieren.

2. Starten und authentifizieren

Öffnen Sie in Ihrer Cloud Shell (oder Ihrem lokalen Terminal) ein neues Terminalfenster (oder einen neuen Tab) und starten Sie die Gemini CLI:

gemini

Einrichtung beim ersten Ausführen:Wenn Sie die CLI zum ersten Mal ausführen, werden Sie durch einen kurzen Einrichtungsvorgang geführt.

• Authentifizierung:Sie werden aufgefordert, sich anzumelden. Wir empfehlen, Ihr privates Gmail-Konto zu verwenden, um die großzügigen kostenlosen Kontingente für Gemini-Modelle zu nutzen.
• Projektkontext:Es wird empfohlen, gemini in Ihrem Projektordner auszuführen, damit der Codekontext berücksichtigt wird. Da wir den Ordner noch nicht erstellt haben, ist es vorerst in Ordnung, das Skript über Ihr Home-Verzeichnis auszuführen.

3. Hallo sagen

Wenn Sie die Aufforderung gemini> sehen, führen Sie einen Test durch, um sicherzugehen, dass Ihr Gehirn verbunden ist:

Hi

Sie sollten eine freundliche Antwort vom Modell erhalten.

4. Wichtige Befehle

• /quit: Geben Sie dies ein, um die Gemini CLI zu beenden und zu Ihrem Standardterminal zurückzukehren.
• /help: Eine Liste aller verfügbaren Befehle aufrufen.

Profitipp:Lassen Sie dieses „Gemini-Terminal“ in einem separaten Tab geöffnet. Sie verwenden es, um Code zu generieren und Ihre App bereitzustellen, während auf dem anderen Terminal der App-Server ausgeführt wird.

Zusammenfassung

In diesem Schritt haben Sie die Gemini-Befehlszeile installiert, authentifiziert und überprüft.

Als Nächstes verwenden wir das Agent Development Kit (ADK), um das Gerüst unseres Shops in Opening Shop (The Code) zu erstellen.

5. Regale füllen (Projekteinrichtung)

Wir fangen nicht bei Null an, denn clevere Shopbetreiber sparen Zeit. Wir verwenden das Agent Development Kit (ADK).

Was ist das ADK?

Das ADK ist Ihr „Shop-Verwaltungssystem“. Es ist ein flexibles Framework, das Folgendes abdeckt:

• Orchestrierung: Verwaltung komplexer Aufgaben (z. B. wenn Raju während eines Gesprächs mit einem Kunden den Lagerbestand prüft).
• Statusverwaltung: Der Name des Kunden und seine Frage vor 5 Minuten werden gespeichert.
• Tools: Verbindung zu externen Systemen wie Ihrer Inventardatenbank herstellen.

Wir verwenden das Starterpaket für KI-Agenten, um sofort eine produktionsreife „Dukaan“-Instanz einzurichten. So haben wir eine sichere, skalierbare Grundlage und können uns auf den Verkauf konzentrieren.

Führen Sie im Cloud Shell-Terminal (oder im lokalen Terminal) diesen Befehl aus, um den Agenten zu generieren:

uvx agent-starter-pack create raju-shop

Die CLI stellt Ihnen einige Fragen, um Ihren Shop zu konfigurieren. Wählen Sie die folgenden Optionen aus (geben Sie die Nummer ein und drücken Sie die Eingabetaste):

1. Agent-Typ:Wählen Sie 1 (adk_base – ein einfacher ReAct-Agent) aus.
2. Deployment Target (Bereitstellungsziel): Wählen Sie 2 (Cloud Run – Serverless container execution) aus.
3. Sitzungstyp:Wählen Sie 1 (In-memory session – einfach und schnell) aus.
4. CI/CD-Runner:Wählen Sie 3 (Skip – Wir stellen vorerst manuell bereit) aus.

Warten Sie, bis der Vorgang abgeschlossen ist. Wechseln Sie dann in Ihr Shop-Verzeichnis und installieren Sie die Abhängigkeiten:

cd raju-shop
make install
source .venv/bin/activate

Agent ansehen und konfigurieren

Nachdem das Starter-Pack eingerichtet ist, sehen Sie sich die Struktur an.

1. Ordnerstruktur prüfen

Führen Sie den folgenden Befehl aus, um zu sehen, wie Ihr Shop organisiert ist:

tree .

Die Struktur sollte so aussehen:

.
├── app
│   ├── __init__.py
│   ├── agent.py
│   ├── app_utils
│   │   ├── telemetry.py
│   │   └── typing.py
│   └── fast_api_app.py
├── Dockerfile
├── GEMINI.md
├── Makefile
├── pyproject.toml
├── README.md
├── tests
│   ├── integration
│   │   ├── test_agent.py
│   │   └── test_server_e2e.py
│   └── unit
│       └── test_dummy.py
└── uv.lock

Die wichtigste Datei ist app/agent.py. Hier befindet sich das Gehirn von Raju.

2. Code durchgehen

Öffnen Sie app/agent.py im Cloud Shell-Editor (oder in Ihrer lokalen IDE) und sehen Sie sich den Inhalt kurz an:

• root_agent = Agent(...): Hier wird Ihre KI definiert. Es hat ein model (Gehirn) und tools (Hände).
• Tools: Hier sehen Sie Python-Funktionen wie get_weather. Dies sind Tools, die der Agent verwenden kann.
• app = App(...): Damit wird Ihr Agent in einen Webserver eingebunden, damit wir mit ihm kommunizieren können.

Möchten Sie mehr erfahren? Weitere Informationen finden Sie im ADK Python Guide und in der Dokumentation zu LLM-Agents.

Lokal testen

Führen Sie den Agenten in Ihrem Cloud Shell-Terminal (oder lokalen Terminal) aus:

adk web

Mit diesem Befehl wird ein lokaler Webserver auf Port 8000 gestartet.

Bei Verwendung von Cloud Shell:

1. Klicken Sie rechts oben auf die Schaltfläche Webvorschau (sieht aus wie ein Auge).
2. Wählen Sie Port ändern aus.
3. Geben Sie 8000 ein und klicken Sie auf Ändern und Vorschau.

Bei Verwendung des lokalen Terminals:

1. Öffnen Sie Ihren Browser und rufen Sie http://localhost:8000 auf.

Wenn die Benutzeroberfläche geöffnet wird:

1. „App“ auswählen: Achten Sie darauf, dass Sie im Drop-down-Menü oben links den Agenten mit dem Namen app auswählen. Ignorieren Sie root_agent oder test_agent, falls sie angezeigt werden.
2. Hallo sagen: Geben Sie „Hallo!“ ein und prüfen Sie, ob der Bot reagiert.

Drücken Sie im Terminal Ctrl+C, um den adk web-Server zu beenden.

Zusammenfassung

In diesem Schritt haben Sie Ihr Projekt eingerichtet, für die Gemini API konfiguriert und Ihren ersten Agenten lokal ausgeführt.

Als Nächstes geben wir unserem KI-Agenten in Training Raju (The Persona) eine Persönlichkeit und einen Namen.

6. Raju trainieren (die Persona)

Der Agent ist momentan langweilig. Wir geben ihm eine Persönlichkeit!

Anstatt Code zu schreiben, sagen wir Gemini einfach, was wir möchten.

1. Persona definieren

Führen Sie diesen Befehl in Ihrem Terminal aus, um Raju zu „erklären“, wer er ist:

gemini "In agent.py, update the root_agent instruction. You are Raju, a bargaining shopkeeper in a digital bazaar. You sell: Brass Lamp (50 coins), Silk Scarf (500 coins). Your goal is to sell high and be funny. Speak with an Indian-English flair."

2. Code bestätigen

Öffnen Sie app/agent.py. Sie sollten sehen, dass Gemini die Systemanweisung für Sie geschrieben hat.

3. Lokal testen

Jetzt können Sie mit Raju chatten. Führen Sie im Cloud Shell-Terminal (oder im lokalen Terminal) folgende Schritte aus:

adk web

Öffnen Sie die Web-UI (Webvorschau-Port 8000 oder localhost:8000), wählen Sie den App-Agent aus und probieren Sie die folgenden Prompts aus:

• „Ich möchte die Messinglampe, aber 50 Münzen sind zu viel.“
• „Was verkaufst du, mein Freund?“

Sehen Sie, wie er reagiert. Er sollte lustig und dramatisch sein, aber sich weigern, zu billig zu verkaufen.

Zusammenfassung

In diesem Schritt haben Sie die Systemanweisungen des Agenten angepasst, um „Raju“ zu erstellen, einen feilschenden Ladenbesitzer mit einer einzigartigen Persönlichkeit.

Als Nächstes geben wir Raju die Möglichkeit, seinen tatsächlichen Lagerbestand in The Inventory (Adding Tools) zu prüfen.

7. Inventar (Tools hinzufügen)

Raju muss wissen, was er tatsächlich auf Lager hat. Wir geben ihm eine „Datenbank“ und ein Tool, mit dem er sie überprüfen kann.

1. Tool erstellen

Führen Sie diesen einzelnen Befehl aus, um das Inventar und das Tool zu erstellen und es mit Raju zu verbinden:

gemini "In agent.py, create a dictionary INVENTORY with items: Brass Lamp (price 50, stock 5), Silk Scarf (price 500, stock 2), Taj Mahal (price 2000, stock 0). Then create a tool function check_inventory(item_name) that checks this dict. Finally, update the root_agent to use this tool and remove the default weather tools."

2. Magic-Funktion bestätigen

Öffnen Sie app/agent.py noch einmal. Sie sehen, dass Gemini:

1. Das Wörterbuch INVENTORY wurde erstellt.
2. Die Python-Funktion check_inventory wurde geschrieben.
3. Die Liste tools=[...] in der Agent-Definition wurde aktualisiert.

3. Inventar testen

1. Starten Sie den Server neu (Strg+C, dann adk web).
2. Raju fragen
   • „Hast du Bilder vom Tadsch Mahal?“ (Er sollte NEIN sagen, da der Lagerbestand 0 ist.)
   • „Wie viel kostet das Seidentuch?“ (Er sollte den tatsächlichen Preis prüfen.)

Profitipp:Sehen Sie sich beim Chatten Ihre Terminal-Logs an. Sie sollten DEBUG: Checking inventory... jedes Mal sehen, wenn Raju das Tool verwendet.

Zusammenfassung

In diesem Schritt haben Sie ein check_inventory-Tool implementiert, den Standard-Clutter entfernt und das Tool mit Ihrem Agent verbunden.

Als Nächstes werden wir Raju in Raju's Shop Goes Live (Deploying the Backend) in die Cloud verlagern.

8. Raju's Shop Goes Live (Deploying the Backend)

Zeit, sich der Welt zu öffnen! Bevor wir die Shopfront erstellen, werden das Gehirn und das Inventar von Raju (Ihr Agent) in der Cloud bereitgestellt.

Wichtig: Terminalverwaltung

Möglicherweise wird adk web im aktuellen Terminal aus dem vorherigen Schritt ausgeführt.

• Keep it running (Weiter ausführen), wenn Sie weiterhin lokal testen möchten.
• Öffnen Sie ein NEUES Terminalfenster oder einen NEUEN Tab für die folgenden Bereitstellungsschritte.
• Hinweis:Wenn Sie agent.py ändern, müssen Sie adk web beenden (Strg+C) und neu starten, damit die Änderungen wirksam werden.

1. Gemini CLI vorbereiten

Führen Sie im NEUEN Terminalfenster folgende Schritte aus:

1. Prüfen Sie, ob Sie sich bereits in der Gemini CLI befinden (suchen Sie nach dem Prompt gemini>).
2. Wenn ja, geben Sie /quit ein, um zur Standardshell zurückzukehren.
3. Prüfen Sie, ob Sie sich im Projektordner befinden:

   cd raju-shop
   

2. Cloud Run-Erweiterung installieren

Installieren Sie die Cloud Run-Erweiterung für die Gemini CLI in Ihrem Cloud Shell-Terminal (oder lokalen Terminal):

gemini extensions install https://github.com/GoogleCloudPlatform/cloud-run-mcp

3. Gemini CLI neu starten

Starten Sie die Gemini CLI noch einmal, um die neue Erweiterung zu verwenden:

gemini

Nun sollten Sie die Gemini CLI-Eingabeaufforderung sehen.

4. Agent bereitstellen

Es gibt zwei Möglichkeiten, Gemini CLI-Erweiterungen zu verwenden:

Option 1: Slash-Befehl (manuell) Sie können den Befehl und die Flags explizit eingeben:

/deploy --source . --name raju-agent --region us-central1 --allow-unauthenticated

Option 2: Natürliche Sprache (empfohlen): Dies ist die einfachere und leistungsstärkere Methode. Sie können Gemini einfach darum bitten, und Gemini verwendet den MCP-Server, um die richtigen Tools aufzurufen.

Fügen Sie diesen Prompt in die Gemini CLI ein:

Projekt-ID prüfen:Ersetzen Sie im folgenden Prompt raju-shop-agent durch Ihre tatsächliche Google Cloud-Projekt-ID. Sie finden ihn oben links im Drop-down-Menü der Google Cloud Console oder durch Ausführen von gcloud config get-value project in Ihrem Standardterminal.

Deploy this agent app to cloud run on google cloud using the cloud-run MCP server.
Use project raju-shop-agent in us-central1 region.
Name the service raju-agent.
IMPORTANT: Make sure to allow unauthenticated invocations so my frontend can talk to it.

Die CLI fordert Sie möglicherweise auf, die Verwendung des cloud-run-Tools zu bestätigen. Drücken Sie Enter (oder geben Sie y ein), um die Zahlung zu genehmigen.

Warten Sie, bis die Magie passiert ist:Das dauert 2–3 Minuten. Anschließend wird eine Erfolgsmeldung wie diese angezeigt:

✦ I've successfully deployed your agent app to Cloud Run.

  Service Details:
   * Service Name: raju-agent
   * Project: raju-shop-agent
   * Region: us-central1
   * URL: https://raju-agent-xyz123-uc.a.run.app
   * Console: View in Google Cloud Console (...)

Fehlerbehebung:Wenn etwas schiefgeht, können Sie Gemini CLI einfach in natürlicher Sprache nach dem Fehler fragen. Beispiel: „Es ist ein Berechtigungsfehler aufgetreten. Wie kann ich das Problem beheben?“

5. Deployment prüfen

Nach Abschluss der Bereitstellung stellt Gemini CLI eine Service-URL bereit. Kopieren Sie diese URL.

Browser Check (Is it alive?) Fügen Sie die URL in Ihren Browser ein.

• Erfolg:Sie sollten die FastAPI-Dokumentation (Swagger UI) oder eine generische ADK-Landingpage sehen. Damit wird bestätigt, dass Ihr Cloud Run-Dienst ausgeführt wird und darauf zugegriffen werden kann.
• Fehler:Wenn Sie den Fehler „403 Forbidden“ erhalten, haben Sie möglicherweise vergessen, in der Bereitstellungsaufforderung „nicht authentifizierte Aufrufe“ zuzulassen.

Im nächsten Schritt testen wir die eigentliche Verhandlungslogik, indem wir ein geeignetes Frontend erstellen.

Zusammenfassung

In diesem Schritt haben Sie das Backend Ihres Agents mit der Gemini CLI-Erweiterung in Google Cloud Run bereitgestellt, sodass es über eine öffentliche URL zugänglich ist.

Als Nächstes erstellen wir eine ansprechende Benutzeroberfläche für Kunden, um mit Raju zu interagieren. Das wird im Abschnitt Shopfront erstellen (Frontend-UI) beschrieben.

9. Shop dekorieren (Frontend-Benutzeroberfläche)

Ein Textterminal ist langweilig. Wir möchten ein lebendiges Schaufenster!

Funktionsweise der ADK API

Wenn Sie eine benutzerdefinierte Benutzeroberfläche erstellen möchten, müssen Sie wissen, wie Sie mit dem Backend Ihres Agents kommunizieren. Der Ablauf besteht aus zwei Schritten:

1. Sitzung initialisieren:Bevor Sie mit dem Chatten beginnen, müssen Sie eine Sitzungs-ID erstellen (wie einen Einkaufswagen).
   • POST /apps/app/users/{user_id}/sessions/{session_id}
2. Nachricht senden:Wenn Sie sprechen möchten, senden Sie Ihren Text an den Laufzeitendpunkt.
   • POST /run (Die Nutzlast enthält appName, userId, sessionId und Ihre text.)
3. Weitere Informationen:Sehen Sie sich die Dokumentation zur ADK Runtime API und zur Python API-Referenz an.

Wir verwenden diese Logik, um unser Frontend zu erstellen.

Sie haben zwei Möglichkeiten, diese Schnittstelle zu erstellen:

Option 1: Google Antigravity (empfohlen – nur lokal)

Wenn Sie auf Ihrem lokalen Computer arbeiten, ist Google Antigravity die beste Option. Es handelt sich um eine KI-basierte IDE, mit der Sie die gesamte Benutzeroberfläche „vibe coden“ können.

Hinweis:Antigravity ist eine Desktopanwendung. Wenn Sie Cloud Shell verwenden, fahren Sie mit Option 2 fort.

1. Herunterladen und installieren

Laden Sie das Installationsprogramm für Ihr Betriebssystem von der Google Antigravity-Downloadseite herunter und installieren Sie es.

2. Arbeitsbereich öffnen

Öffnen Sie Antigravity. Öffnen Sie den Ordner raju-shop als Workspace. So erhält die KI Kontext zu Ihrem gesamten Projekt.

3. Benutzeroberfläche mit Agent Manager generieren

Anstatt den Code Zeile für Zeile zu schreiben, bitten wir einen KI-Agenten, das für uns zu erledigen. Dazu verwenden wir den Agent Manager.

1. Suchen Sie die Chat-Oberfläche von Agent Manager (normalerweise auf der rechten Seite).
2. Fügen Sie den folgenden Prompt in den Chat ein:

Create a single file HTML chat interface named `index.html`. It should have a colorful header that says 'Raju's Royal Artifacts'. It should look like an Indian market stall with orange and pink colors.

**Backend Integration:**
The chat should send messages to my deployed agent at: <YOUR_DEPLOYED_AGENT_URL>

**API Logic:**
1. **On Load:** Generate a random userId and sessionId. Call `POST /apps/app/users/{userId}/sessions/{sessionId}` to initialize.
2. **On Send:** Call `POST /run` with a JSON payload containing `appName: "app"`, `userId`, `sessionId`, and `newMessage: { role: "user", parts: [{ text: userInput }] }`.
3. **Display:** Show the user's message and the agent's response (from `content.parts[0].text`).

Ersetzen Sie die Platzhalter-URL durch die tatsächliche Dienst-URL aus dem Bereitstellungsschritt.

1. Sehen Sie zu, wie der Agent den Code für Sie schreibt. Sie können zur Editoransicht wechseln, um zu sehen, wie die Datei in Echtzeit erstellt wird.

4. Schaufenster testen

Google Antigravity bietet integrierte Vorschaufunktionen. Klicken Sie auf die Schaltfläche „Vorschau“ (oft ein Augensymbol), um Ihre Shopfront live zu sehen. Alternativ können Sie sie lokal mit python3 -m http.server 8000 bereitstellen.

Wenn Sie diese leistungsstarke IDE wirklich beherrschen möchten, empfehlen wir Ihnen, das Codelab „Erste Schritte mit Google Antigravity“ durchzuarbeiten.

Option 2: Gemini CLI (Cloud Shell-kompatibel)

Wenn Sie Cloud Shell verwenden, können Sie das Frontend mit der Gemini CLI in Sekundenschnelle erstellen.

Führen Sie im Terminal den folgenden Befehl aus:

gemini "Create a single file HTML chat interface named index.html. Header: 'Raju\'s Royal Artifacts', Indian market theme (orange/pink). Backend: <YOUR_DEPLOYED_AGENT_URL>. Logic: On load, generate random user/session IDs and POST to /apps/app/users/{uid}/sessions/{sid}. On chat, POST to /run with appName='app', userId, sessionId, and newMessage structure. Parse the JSON response to show the agent text." > index.html

Denken Sie daran,

mit Ihrer tatsächlichen Cloud Run-URL

Zusammenfassung

In diesem Schritt haben Sie Google Antigravity verwendet, um ein benutzerdefiniertes HTML-Frontend zu „vibe codieren“, das eine Verbindung zu Ihrem Live-Agent-Backend herstellt.

Als Nächstes wird das Bild vervollständigt, indem wir diese Shopfront im Web hosten. Weitere Informationen finden Sie unter Shopfront online stellen.

10. Große Eröffnung (Frontend bereitstellen)

Raju ist online (Backend), aber sein Geschäft braucht eine öffentliche Adresse (Frontend). Bitten Sie Google Antigravity, unsere Benutzeroberfläche in der Cloud bereitzustellen.

1. Agent Manager bitten, den Agent bereitzustellen

Wir müssen die IDE nicht verlassen. Bitten Sie den Agent Manager einfach, die Bereitstellung für Sie zu übernehmen.

Fügen Sie diesen Prompt in den Chat ein:

„Stelle meine index.html als statische Website in Google Cloud Run bereit. Geben Sie einen Namen für den Dienst ein: raju-shop-frontend. Achten Sie darauf, dass es öffentlich zugänglich ist.“

2.

Der Kundenservicemitarbeiter wird wahrscheinlich Folgendes tun:

1. Erstellen Sie eine Dockerfile-Datei oder eine Konfiguration zum Bereitstellen statischer Dateien (z. B. mit nginx oder Python).
2. Erstellen Sie das Container-Image.
3. Führen Sie den Befehl gcloud run deploy für Sie aus.

3. Jetzt Shop besuchen

Wenn der Agent fertig ist, wird eine URL ausgegeben (z.B. https://raju-shop-frontend-xyz.run.app). Klicken Sie darauf.

Glückwunsch! Sie haben jetzt eine vollständig bereitgestellte, KI‑basierte App für einen Verhandlungsführer. Senden Sie den Link an Ihre Freunde und sehen Sie, ob sie einen Rabatt erhalten können.

Zusammenfassung

In diesem Schritt haben Sie den Antigravity Agent Manager verwendet, um Ihre Frontend-Anwendung zu containerisieren und in Cloud Run bereitzustellen.

Sie haben jetzt den gesamten Stack erstellt. Im Abschnitt Geschäftsschluss (Fazit) fassen wir alles noch einmal zusammen.

11. Geschäftsschluss (Fazit)

Glückwunsch! Sie haben die Agent Challenge „Bargaining Shopkeeper“ erfolgreich abgeschlossen. Sie haben Raju von einer bloßen Idee zu einem vollständig bereitgestellten, interaktiven KI-Ladenbesitzer auf dem digitalen Basar gemacht. Sie haben die Leistungsfähigkeit der Entwicklung mit KI-Unterstützung selbst erlebt.

Zusammenfassung Ihrer Reise:

• Google Cloud:Sie haben Ihr Projekt und Ihr Rechnungskonto eingerichtet und Ihren Agent in Cloud Run bereitgestellt.
• Gemini 3:Das intelligente Gehirn, das Rajus Persönlichkeit und Verhandlungsgeschick unterstützt.
• Agent Development Kit (ADK): Das Framework, das eine produktionsbereite Grundlage mit integrierter Observability (Telemetrie) bietet, sodass Ihr Agent von Anfang an robust ist.
• Gemini-Befehlszeile:Ihr Befehlszeilenassistent für schnelle Aufgaben, Tests und Erweiterungen.
• Google Antigravity:Die IDE der nächsten Generation, in der Sie die Benutzeroberfläche „vibe coded“ haben und die Bereitstellung orchestriert wird.

Nächste Schritte für Ihr Digital Dukaan:

• Fehlerhafte Tests korrigieren:Sie haben den Code geändert, aber was ist mit den Tests? Bei den Standardtests (tests/unit/test_agent.py) wird weiterhin nach dem Wetter gesucht. Mit der Gemini CLI können Sie sie automatisch aktualisieren. Versuchen Sie es mit: gemini "Update the tests in tests/unit/test_agent.py to test the new check_inventory tool instead of weather."
• Dynamisches Inventar:Die Inventarmengen von Raju werden aktualisiert, wenn ein Artikel „verkauft“ wird. Kannst du Logik hinzufügen, um stock in deinem INVENTORY-Wörterbuch nach einem erfolgreichen Kauf zu verringern?
• Payment Gateway Tool:Implementieren Sie ein process_payment-Mock-Tool. Raju könnte dieses Tool dann aufrufen, wenn ein Deal abgeschlossen wird.
• Antigravity kennenlernen:Hier finden Sie weitere Informationen zum Agent Manager und zu Arbeitsbereichen von Antigravity. Kannst du den Kundenservicemitarbeiter bitten, deine index.html zu verfeinern, um einen Live-Beleg zu erhalten?
• Shop teilen:Der Shop von Raju ist jetzt im Internet verfügbar. Teile die Frontend-URL mit deinen Freunden und sieh nach, ob sie ein besseres Angebot als du erhalten.

Ressourcen

• Google Antigravity
• Google Cloud Run
• ADK-Dokumentation
• Gemini CLI

12. Bereinigen

Mit den folgenden Schritten vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden.

Mit der kostenlosen Stufe von Google Cloud weiterlernen

Viele Google Cloud-Produkte, darunter Cloud Run, bieten eine kostenlose Stufe, mit der Sie Ressourcen bis zu einem bestimmten Limit kostenlos nutzen können.

Wenn Sie sich noch in der kostenlosen Testversion von Google Cloud befinden, haben Sie noch mehr Flexibilität.

Sie können Ihr aktuelles Google Cloud-Projekt (raju-shop-agent) weiterhin verwenden und Ihren Agenten weiterentwickeln, ohne dass Ihre Fortschritte verloren gehen, solange Ihre Nutzung innerhalb der Limits des kostenlosen Kontingents bleibt.

1. Cloud Run-Dienste bereitstellen (optionale Kosteneinsparung)

Wenn Sie potenzielle Gebühren für Ihre bereitgestellten Dienste vermeiden möchten, ohne Ihr Projekt und andere Konfigurationen zu ändern, können Sie die Bereitstellung Ihrer Cloud Run-Dienste aufheben.

Öffnen Sie Ihr Cloud Shell-Terminal (oder lokales Terminal) und führen Sie die folgenden gcloud-Befehle aus:

# Undeploy the backend agent

gcloud run services delete raju-agent --region us-central1

# Undeploy the frontend shop (if you deployed it)

gcloud run services delete raju-shop-frontend --region us-central1

Wenn Sie diese Befehle auf Ihrem lokalen Computer ausführen, muss die Google Cloud CLI (gcloud) installiert und konfiguriert sein.

2. Google Cloud-Projekt löschen (vollständige Einstellung der Kosten)

Wenn Sie sichergehen möchten, dass keine weiteren Kosten anfallen, und alle in diesem Codelab erstellten Ressourcen vollständig entfernen möchten, ist es am besten, das gesamte Google Cloud-Projekt zu löschen.

1. Rufen Sie die Seite „Projekte“ in der Google Cloud Console auf.
2. Wählen Sie Ihr Projekt (raju-shop-agent) aus und klicken Sie auf Löschen.
3. Folgen Sie der Anleitung, um das Löschen des Projekts zu bestätigen.