End-to-End-Workshop zu KI-Agents

1. Lerninhalte

AI Agent Vibe Full Stack

Willkommen! Sie werden nun die nächste wichtige Fähigkeit in der Softwareentwicklung kennenlernen: wie Sie künstliche Intelligenz effektiv anleiten, um Software in Produktionsqualität zu entwickeln, zu testen und bereitzustellen. Generative KI ist kein „Autopilot“, sondern ein leistungsstarker Copilot, der einen erfahrenen Regisseur braucht.

In diesem Workshop wird eine strukturierte, wiederholbare Methodik für die Zusammenarbeit mit KI in jeder Phase des professionellen Softwareentwicklungszyklus (SDLC) vorgestellt. Sie werden vom Zeile für Zeile schreibenden Programmierer zum technischen Leiter – einem Architekten mit einer Vision und einem Generalunternehmer, der KI nutzt, um diese Vision präzise umzusetzen. 🚀

Am Ende dieser Anleitung haben Sie Folgendes:

• Eine allgemeine Idee mithilfe von KI in eine Cloud-Architektur umgewandelt.
• Es wurde ein vollständiges Python-Backend mit gezielten, spezifischen Prompts generiert.
• KI als Co-Programmierer zum Debuggen und Korrigieren von Code verwendet.
• Die Erstellung von Einheitentests, einschließlich Mocks, wurde an KI delegiert.
• Produktionsreife Infrastruktur als Code (IaC) mit Terraform generiert.
• Sie haben mit einem einzigen Prompt eine vollständige CI/CD-Pipeline in GitHub Actions erstellt.
• Sie haben Ihre Live-Anwendung mit KI-gestützten Betriebstools überwacht und verwaltet.

Sie erhalten nicht nur eine funktionierende App, sondern auch einen Plan für die KI-gestützte Entwicklung. Fangen wir an!

2. Voraussetzungen und Einrichtung

Bevor wir beginnen, müssen wir Ihre Umgebung vorbereiten. Dieser Schritt ist entscheidend für einen reibungslosen Ablauf des Workshops.

Neues GCP-Konto erstellen und Abrechnung verknüpfen

Für unsere KI-Agents benötigen wir zwei Dinge: ein Google Cloud-Projekt als Grundlage und einen Gemini API-Schlüssel für den Zugriff auf die leistungsstarken Modelle von Google.

Schritt 1: Rechnungskonto aktivieren

• Sie müssen Ihr Rechnungskonto mit einem Guthaben von 5 $ in Anspruch nehmen, da Sie es für die Bereitstellung benötigen. Melden Sie sich in Ihrem Gmail-Konto an.

Keine Kreditkarte oder Zahlung erforderlich: Sie erhalten 5 $Guthaben. Das dauert weniger als 2 Minuten. Geben Sie einfach Ihren Namen ein und akzeptieren Sie die Credits.

Schritt 2: Neues GCP-Projekt erstellen

• Rufen Sie die Google Cloud Console auf und erstellen Sie ein neues Projekt.

• Öffnen Sie den linken Bereich, klicken Sie auf Billing und prüfen Sie, ob das Rechnungskonto mit diesem GCP-Konto verknüpft ist.

Wenn Sie diese Seite sehen, prüfen Sie manage billing account, wählen Sie Google Cloud Trial One aus und verlinken Sie darauf.

Schritt 3: Gemini API-Schlüssel generieren

Bevor Sie den Schlüssel sichern können, müssen Sie einen haben.

• Rufen Sie Google AI Studio auf : https://aistudio.google.com/.
• Melden Sie sich mit Ihrem Gmail-Konto an.
• Klicken Sie auf die Schaltfläche API-Schlüssel abrufen, die sich normalerweise im linken Navigationsbereich oder oben rechts befindet.
• Klicken Sie im Dialogfeld API-Schlüssel auf „API-Schlüssel in neuem Projekt erstellen“. 
• Wählen Sie das neue Projekt aus, das Sie erstellt haben und für das ein Rechnungskonto eingerichtet ist.

• Ein neuer API-Schlüssel wird für Sie generiert.

Kopieren Sie diesen Schlüssel sofort und speichern Sie ihn vorübergehend an einem sicheren Ort, z. B. in einem Passwortmanager oder in einer sicheren Notiz. Diesen Wert benötigen Sie in den nächsten Schritten.

GitHub-Authentifizierung

Verwenden Sie für Ihr GitHub-Konto und Ihr Google Cloud-Projekt dasselbe Gmail-Konto.

Öffnen Sie Cloud Shell, indem Sie die Google Cloud Console aufrufen und rechts oben auf die Schaltfläche „Cloud Shell aktivieren“ klicken.

Schritt 1: Cloud Shell öffnen

👉 Klicken Sie oben in der Google Cloud Console auf „Cloud Shell aktivieren“ (das Symbol mit der Terminalform oben im Cloud Shell-Bereich),

👉 Klicken Sie auf die Schaltfläche „Editor öffnen“ (sie sieht aus wie ein geöffneter Ordner mit einem Stift). Dadurch wird der Cloud Shell-Code-Editor im Fenster geöffnet. Auf der linken Seite wird ein Datei-Explorer angezeigt.

👉 Öffnen Sie das Terminal in der Cloud-IDE, nachdem Sie den Editor geöffnet haben.

👉💻 Prüfen Sie im Terminal mit dem folgenden Befehl, ob Sie bereits authentifiziert sind und das Projekt auf Ihre Projekt-ID festgelegt ist:

gcloud auth list

Schritt 2: Mit GitHub authentifizieren und forken

Mit GitHub authentifizieren:

👉💻 Kopieren Sie den Befehl und fügen Sie ihn in Ihr Cloud-Terminal ein:

gh auth login

• Wählen Sie unter „Where do you use GitHub“ (Wo verwenden Sie GitHub?) die Option „GitHub.com“ aus.
• Wählen Sie bei der Frage „What is you preferred protocol for Git operations on this host?“ (Welches Protokoll bevorzugen Sie für Git-Vorgänge auf diesem Host?) „HTTPS“ aus.
• Wählen Sie bei der Frage „Git mit Ihren GitHub-Anmeldedaten authentifizieren?“ die Option „Ja“ aus.
• Wählen Sie bei der Frage „How would you like to authenticate GitHub CLI?“ (Wie möchten Sie die GitHub-Befehlszeile authentifizieren?) die Option „Login with a web browser“ (Mit einem Webbrowser anmelden) aus.

Wichtig: Noch nicht die Eingabetaste drücken

Hinweis: Sie müssen den Link aus dem Terminal kopieren und einfügen, um die GitHub-Authentifizierungsseite zu öffnen.

Kopieren Sie den Code aus dem Terminal auf die Seite zur Bestätigung der Anmeldung.

Wenn Sie den Code eingegeben haben, kehren Sie zum Cloud Shell-Terminal zurück und drücken Sie die Eingabetaste, um fortzufahren.

Schritt 4: Repository forken und klonen:

👉💻 Kopieren Sie den Befehl und fügen Sie ihn in Ihr Cloud-Terminal ein:

gh repo fork cuppibla/storygen-learning --clone=true

3. Architektur: Von der Idee zum Blueprint mit Cloud Assist

Jedes großartige Projekt beginnt mit einer klaren Vision. Wir verwenden unseren KI-Copiloten Cloud Assist, um die Architektur unserer App zu entwerfen.

Aktionen

• Öffnen Sie die Google Cloud Console: [https://console.cloud.google.com](Google Cloud Console)
• Klicken Sie rechts oben auf „Cloud Assist-Chat öffnen“.

Cloud Assist aktivieren

• Klicken Sie auf Get Gemini Assist und dann auf Enable Cloud Assist at no cost.
• Und los gehts!

 Geben Sie den folgenden detaillierten Prompt in Cloud Assist ein:

Idee eingeben

Generate a Python web application that uses AI to generate children's stories and illustrations. It has Python backend and React frontend host separately on Cloudrun. They communicate through Websocket. It needs to use a generative model for text and another for images. The generated images must be used by Imagen from Vertex AI and stored in a Google Cloud Storage bucket so that frontend can fetch from the bucket to render images. I do not want any load balancer or a database for the story text. We need a solution to store the API key.

App-Blueprint erstellen

• Klicken Sie auf „App-Design bearbeiten“, um das Diagramm aufzurufen. Klicken Sie oben rechts auf das Feld „<> Code abrufen“, um den Terraform-Code herunterzuladen.
• Cloud Assist generiert ein Architekturdiagramm. Das ist unser visueller Bauplan.

Mit diesem Code müssen Sie nichts unternehmen. Weitere Informationen finden Sie unten.

Generierten Terraform-Code verstehen Sie haben gerade einen vollständigen Satz von Terraform-Dateien von Cloud Assist erhalten. Mit diesem Code ist vorerst keine Aktion erforderlich. Wir möchten Ihnen aber kurz erklären, was er ist und warum er so leistungsstark ist.

Was ist Terraform? Terraform ist ein IaC-Tool (Infrastructure as Code). Sie ist quasi ein Entwurf für Ihre Cloud-Umgebung, der in Code geschrieben ist. Anstatt manuell in der Google Cloud Console auf die Schaltflächen zu klicken, um Dienste, Speicher und Berechtigungen zu erstellen, definieren Sie alle diese Ressourcen in diesen Konfigurationsdateien. Terraform liest dann Ihren Blueprint und erstellt automatisch genau diese Umgebung für Sie.

Vom visuellen Plan zum ausführbaren Code. Das von Cloud Assist bereitgestellte Architekturdiagramm ist Ihr visueller Plan. Der Terraform-Code ist die maschinenlesbare Version dieses Plans. Sie ist das entscheidende Bindeglied, das ein Designkonzept in eine reproduzierbare, automatisierte Realität verwandelt. Wenn Sie Ihre Infrastruktur im Code definieren, haben Sie folgende Vorteile:

• Erstellung automatisieren: Dieselbe Umgebung immer wieder zuverlässig erstellen.
• Versionsverwaltung verwenden: Änderungen an Ihrer Infrastruktur in Git verfolgen, genau wie Ihren Anwendungscode.
• Fehler vermeiden: Manuelle Fehler, die beim Klicken durch eine Weboberfläche auftreten können, werden vermieden.

Für diesen Workshop müssen Sie diesen Terraform-Code nicht selbst ausführen. Sie ist quasi der professionelle Entwurf – der „Lösungsschlüssel“ – für die Infrastruktur, die Sie in den nächsten Schritten erstellen und bereitstellen werden.

4. Entwicklung: Einführung in die Gemini CLI

👉💻 Wechseln Sie in Ihrem Cloud Shell-Terminal zu Ihrem persönlichen Verzeichnis.

cd ~/storygen-learning

👉💻 Gemini zum ersten Mal ausprobieren

clear
gemini --model=gemini-2.5-flash

Wenn Sie gefragt werden, ob Sie Do you want to connect Cloud Shell editor to Gemini CLI?, wählen Sie NEIN aus.

👉✨ Jedes Gemini-Tool hat eine Beschreibung. Jetzt lesen. Geben Sie im Gemini-Prompt Folgendes ein:

In der Gemini CLI

/help

👉✨ Die Gemini CLI hat eigene integrierte Funktionen. So prüfen Sie sie:

In der Gemini CLI

/tools

Sie sehen eine Liste mit ReadFile, WriteFile und GoogleSearch. Das sind die Standardtechniken, die Sie ohne externe Quellen nutzen können.

👉✨ Das Gemini-Blade kann „taktisches Bewusstsein“ (Kontext) speichern, um seine Aktionen zu steuern.

In der Gemini CLI

/memory show

Sie ist derzeit leer.

👉✨ Fügen Sie dem Arbeitsspeicher des Agents zuerst eine Persona hinzu. Dadurch wird das Fachgebiet definiert:

In der Gemini CLI

/memory add "I am master at python development"

Führen Sie /memory show noch einmal aus, um zu bestätigen, dass Ihr Blade dieses Wissen aufgenommen hat.

👉✨ Um zu zeigen, wie Dateien mit dem @-Symbol referenziert werden, erstellen wir zuerst eine Datei mit einem „Missionsbriefing“.

Öffnen Sie ein neues Terminal und führen Sie den folgenden Befehl aus, um die Missionsdatei zu erstellen:

!echo "## Mission Objective: Create Imagen ADK Agent for Story Book" > mission.md

👉✨ Weisen Sie Gemini CLI an, das Briefing zu analysieren und die Ergebnisse zu präsentieren:

In der Gemini CLI

Explain the contents of the file @mission.md

Ihre Primärwaffe kennt jetzt ihr Ziel.

👉💻 Drücken Sie zweimal Ctrl+C, um die Gemini CLI zu beenden.

Lernprozess:

So erhält die Gemini CLI ihre Superkräfte: gemini.md Bevor wir fortfahren, ist es wichtig zu verstehen, wie die Gemini CLI an ein bestimmtes Projekt angepasst werden kann. Sie können die Gemini CLI als allgemeines Chat-Tool verwenden, aber ihre eigentliche Stärke liegt in einer speziellen Konfigurationsdatei: gemini.md.

Wenn Sie den Befehl „gemini“ ausführen, wird automatisch im aktuellen Verzeichnis nach einer Datei namens „gemini.md“ gesucht. Diese Datei dient als projektspezifische Bedienungsanleitung für die KI. Damit können drei wichtige Dinge definiert werden:

• Persona: Sie können der KI sagen, wer sie sein soll. Zum Beispiel: „Du bist ein erfahrener Python-Entwickler, der sich auf Google Cloud spezialisiert hat.“ Dadurch werden die Antworten und der Stil fokussiert.
• Tools: Sie können dem Modell Zugriff auf bestimmte Dateien (@file.py) oder sogar auf die Google Suche (@google) gewähren. So erhält die KI den Kontext, den sie braucht, um Fragen zum Code Ihres Projekts zu beantworten.
• Gedächtnis: Sie können Fakten oder Regeln angeben, die sich die KI für dieses Projekt immer merken soll, um die Konsistenz zu wahren.

Durch die Verwendung einer gemini.md-Datei wird aus dem generischen Gemini-Modell ein Spezialisten-Assistent, der bereits über die Ziele Ihres Projekts informiert ist und Zugriff auf die richtigen Informationen hat.

5. Entwicklung: ADK mit der Gemini CLI erstellen

Umgebung konfigurieren

Klicken Sie in Cloud Shell auf die Schaltfläche „Terminal öffnen“.

1. Kopieren Sie die Umgebungsvorlage:

   cd ~/storygen-learning
   cp ~/storygen-learning/env.template ~/storygen-learning/.env
   

Versteckte Dateien im Editor ansehen, wenn Sie die .env-Datei nicht finden

• Klicken Sie in der oberen Menüleiste auf Ansicht.
• Wählen Sie Versteckte Dateien einblenden aus.

👉 Google Cloud-Projekt-ID suchen:

• Öffnen Sie die Google Cloud Console: Link
• Wählen Sie oben auf der Seite im Drop-down-Menü das Projekt aus, das Sie für diesen Workshop verwenden möchten.
• Ihre Projekt-ID wird im Dashboard auf der Karte „Projektinformationen“ angezeigt.

👉 GitHub-Nutzername finden:

• Rufen Sie GitHub auf und suchen Sie nach Ihrem GitHub-Nutzernamen.

.env-Datei bearbeiten 2. Ersetzen Sie die folgenden Werte in .env:

GOOGLE_API_KEY=[REPLACE YOUR API KEY HERE]
GOOGLE_CLOUD_PROJECT_ID=[REPLACE YOUR PROJECT ID]
GITHUB_USERNAME=[REPLACE YOUR USERNAME]
GENMEDIA_BUCKET=[REPLACE YOUR PROJECT ID]-bucket

Wenn Ihre Projekt-ID beispielsweise testproject lautet, sollten Sie GOOGLE_CLOUD_PROJECT_ID=testproject und GENMEDIA_BUCKET=testproject-bucket eingeben.

Einrichtungsskripts

Zu 00_Starting_Here wechseln Öffnen Sie ein neues Terminal (nicht in der Gemini CLI).

cd ~/storygen-learning/00_Starting_Here

Führen Sie die vollständige Einrichtung aus:

./setup-complete.sh

Die Einrichtungsergebnisse sollten im Terminal angezeigt werden.

Ersten Agenten erstellen

Zu 01a_First_Agent_Ready Wir erstellen den ADK-Agenten mit der Gemini CLI:**

cd ~/storygen-learning/01a_First_Agent_Ready

Gemini CLI öffnen

gemini

Geben Sie im Gemini CLI-Fenster den folgenden Prompt ein:

I need you to help me create a Google ADK (Agent Development Kit) agent for story generation. I'm working on a children's storybook app that generates creative stories with visual scenes.

Please create a complete `agent.py` file that implements an LlmAgent using Google's ADK framework. The agent should:

**Requirements:**
1. Use the `google.adk.agents.LlmAgent` class
2. Use the "gemini-2.5-flash" model (supports streaming)
3. Be named "story_agent"
4. Generate structured stories with exactly 4 scenes each
5. Output valid JSON with story text, main characters, and scene data
6. No tools needed (images are handled separately)

**Agent Specifications:**
- **Model:** gemini-2.5-flash
- **Name:** story_agent  
- **Description:** "Generates creative short stories and accompanying visual keyframes based on user-provided keywords and themes."
**Story Structure Required:**
- Exactly 4 scenes: Setup → Inciting Incident → Climax → Resolution
- 100-200 words total
- Simple, charming language for all audiences
- Natural keyword integration
**JSON Output Format:**

{
  "story": "Complete story text...",
  "main_characters": [
    {
      "name": "Character Name",
      "description": "VERY detailed visual description with specific colors, features, size, etc."
    }
  ],
  "scenes": [
    {
      "index": 1,
      "title": "The Setup",
      "description": "Scene action and setting WITHOUT character descriptions",
      "text": "Story text for this scene"
    }
    // ... 3 more scenes
  ]
}


**Key Instructions for the Agent:**
- Extract 1-2 main characters maximum
- Character descriptions should be extremely detailed and visual
- Scene descriptions focus on ACTION and SETTING only
- Do NOT repeat character appearance in scene descriptions
- Always respond with valid JSON

Please include a complete example in the instructions showing the exact format using keywords like "tiny robot", "lost kitten", "rainy city".

The file should start with necessary imports, define an empty tools list, include a print statement for initialization, and then create the LlmAgent with all the detailed instructions.

Can you create this agent in backend/story_agent/agent.py

Wenn Sie fertig sind, schalten Sie das Gemini CLI-Terminal mit Control+C aus.

—————————————— Optional, du kannst direkt zum Abschnitt Lösung springen——————————————–

Änderung in ADK Web bestätigen

cd ~/storygen-learning/01a_First_Agent_Ready/backend

source ../../.venv/bin/activate

adk web --port 8080

Um fortzufahren, benötigen Sie eine Eingabeaufforderung.

Sie können entweder ein neues Terminalfenster öffnen oder den aktuellen ADK-Webserver beenden, indem Sie Strg+C drücken.

Website erstellen

cd ~/storygen-learning/01a_First_Agent_Ready

./start.sh

Wenn Ihre Änderung nicht funktioniert, sollten in der ADK Web-UI und auf der Website Fehler angezeigt werden.

——————————————– Lösung ab hier ——————————————–

Lösung

Beenden Sie den vorherigen Prozess mit Control+C oder öffnen Sie ein anderes Terminal:

cd ~/storygen-learning/01b_First_Agent_Done

Website erstellen:

./start.sh

Die Website wird angezeigt:

ADK-Benutzeroberfläche ausprobieren:Öffnen Sie ein weiteres Terminal:

cd ~/storygen-learning/01b_First_Agent_Done/backend

source ../../.venv/bin/activate

adk web --port 8080

Sie sehen die ADK-Benutzeroberfläche, in der Sie dem Agenten Fragen stellen können.

Drücken Sie Strg + C, um den Vorgang zu beenden, bevor Sie mit dem nächsten Abschnitt fortfahren.

6. Entwicklung: ADK mit der Gemini CLI erstellen – (Kontext-Engineering)

Ersteinrichtung

Löschen Sie die zuvor generierte Agent-Datei in 01a_First_Agent_Ready/backend/story_agent/agent.py:

Zu 01a_First_Agent_Ready Wir erstellen den ADK-Agenten mit der Gemini CLI:**

cd ~/storygen-learning/01a_First_Agent_Ready/backend

Gemini CLI öffnen

gemini

Geben Sie im Gemini CLI-Fenster den folgenden Prompt ein:

Summarize the design doc @design.md for me, do not attempt to create file just yet. 

👉💻 Drücken Sie zweimal Ctrl+C, um Gemini vorübergehend zu schließen.

👉💻 Führen Sie im Terminal den folgenden Befehl aus, um die Richtliniendatei zu schreiben.

cat << 'EOF' > GEMINI.md
  ### **Coding Guidelines**
  **1. Python Best Practices:**

  *   **Type Hinting:** All function and method signatures should include type hints for arguments and return values.
  *   **Docstrings:** Every module, class, and function should have a docstring explaining its purpose, arguments, and return value, following a consistent format like reStructuredText or 
  Google Style.
  *   **Linter & Formatter:** Use a linter like `ruff` or `pylint` and a code formatter like `black` to enforce a consistent style and catch potential errors.
  *   **Imports:** Organize imports into three groups: standard library, third-party libraries, and local application imports. Sort them alphabetically within each group.
  *   **Naming Conventions:**
      *   `snake_case` for variables, functions, and methods.
      *   `PascalCase` for classes.
      *   `UPPER_SNAKE_CASE` for constants.
  *   **Dependency Management:** All Python dependencies must be listed in a `requirements.txt` file.

  **2. Web APIs (FastAPI):**

  *   **Data Validation:** Use `pydantic` models for request and response data validation.
  *   **Dependency Injection:** Utilize FastAPI's dependency injection system for managing resources like database connections.
  *   **Error Handling:** Implement centralized error handling using middleware or exception handlers.
  *   **Asynchronous Code:** Use `async` and `await` for I/O-bound operations to improve performance.
EOF
cat GEMINI.md

Nachdem die Gesetze eingetragen wurden, rufen wir unseren KI-Partner noch einmal auf und sehen uns das Ergebnis an.

👉💻 Starten Sie die Gemini CLI über das Verzeichnis „shadowblade“ neu:

cd ~/storygen-learning/01a_First_Agent_Ready/backend
clear
gemini

👉✨ Bitten Sie Gemini, Ihnen zu zeigen, woran es gerade denkt. Die Runen wurden gelesen.

/memory show 

👉✨ Dies ist der einzige, leistungsstarke Befehl, mit dem Ihr Agent erstellt wird. Jetzt ausstellen:

You are an expert Python developer specializing in the Google Agent Development Kit (ADK). Your task is to write the complete, production-quality code for `agent.py` by following the technical specifications outlined in the provided design document verbatim.

Analyze the design document at `@design.md` and generate the corresponding Python code for `agent.py`.

I need you to generate a Python script based on the provided design document and reference examples. Follow these requirements:

Read the design document carefully - it contains the complete technical specification for the code you need to write
Follow the structure and patterns shown in the reference context files
Adhere to all Python best practices specified in the coding standards document
Implement every requirement mentioned in the design document exactly as specified
Use the exact variable names, function names, and string values mentioned in the specifications

The design document describes the complete architecture, dependencies, configuration, and logic flow. Your generated code must match these specifications precisely while following professional Python coding standards.
Generate clean, production-ready Python code that can be used immediately without modifications.

Wenn Sie fertig sind, schalten Sie das Gemini CLI-Terminal mit Control+C aus.

—————————————— Optional, du kannst direkt zum Abschnitt Lösung springen——————————————–

Änderung in ADK Web bestätigen

cd ~/storygen-learning/01a_First_Agent_Ready/backend

source ../../.venv/bin/activate

adk web --port 8080

Um fortzufahren, benötigen Sie eine Eingabeaufforderung.

Sie können entweder ein neues Terminalfenster öffnen oder den aktuellen ADK-Webserver beenden, indem Sie Strg+C drücken.

Website erstellen

cd ~/storygen-learning/01a_First_Agent_Ready

./start.sh

Wenn Ihre Änderung nicht funktioniert, sollten in der ADK Web-UI und auf der Website Fehler angezeigt werden.

——————————————– Lösung ab hier ——————————————–

Lösung

Beenden Sie den vorherigen Prozess mit Control+C oder öffnen Sie ein anderes Terminal:

cd ~/storygen-learning/01b_First_Agent_Done

Website erstellen:

./start.sh

Die Website wird angezeigt:

ADK-Benutzeroberfläche ausprobieren:Öffnen Sie ein weiteres Terminal:

cd ~/storygen-learning/01b_First_Agent_Done/backend

source ../../.venv/bin/activate

adk web --port 8080

Sie sehen die ADK-Benutzeroberfläche, in der Sie dem Agenten Fragen stellen können.

Drücken Sie Strg + C, um den Vorgang zu beenden, bevor Sie mit dem nächsten Abschnitt fortfahren.

7. Entwicklung: Benutzerdefinierten Agent mit Imagen erstellen

Imagen-Tool generieren (zweiter Agent)

cd ~/storygen-learning/02a_Image_Agent_Ready

Gemini CLI zum Erstellen des Bildgenerierungs-Agents verwenden:

gemini generate "I need you to help me create a custom Google ADK (Agent Development Kit) agent for image generation. This is different from the story agent - this one handles image generation directly using the BaseAgent pattern for full control over tool execution.

Please create a complete `agent.py` file that implements a custom image generation agent. The agent should:

**Requirements:**
1. Use the `google.adk.agents.BaseAgent` class (NOT LlmAgent)
2. Be named "custom_image_agent" 
3. Directly execute the ImagenTool without LLM intermediation
4. Handle JSON input with scene descriptions and character descriptions
5. Store results in session state for retrieval by main.py
6. Use async generators and yield Events

**Key Specifications:**
- **Class Name:** CustomImageAgent (inherits from BaseAgent)
- **Agent Name:** "custom_image_agent"
- **Tool:** Uses ImagenTool for direct image generation
- **Purpose:** Bypass LLM agent limitations and directly call ImagenTool

**Input Format:**
The agent should handle JSON input like:
{
  "scene_description": "Scene action and setting",
  "character_descriptions": {
    "CharacterName": "detailed visual description"
  }
}


**Core Method:** `async def _run_async_impl(self, ctx: InvocationContext) -> AsyncGenerator[Event, None]:`
   - Extract user message from `ctx.user_content.parts`
   - Parse JSON input or fallback to plain text
   - Extract scene_description and character_descriptions
   - Build image prompt with style prefix: "Children's book cartoon illustration with bright vibrant colors, simple shapes, friendly characters."
   - Include character descriptions for consistency
   - Call `await self.imagen_tool.run()` directly
   - Store results in `ctx.session.state["image_result"]`
   - Yield Event with results


 **Session State:**
   - Store JSON results in `ctx.session.state["image_result"]`
   - Include success/error status
   - Store actual image URLs or error messages

Expected Output Structure:
- Successful results stored as JSON with image URLs
- Error results stored as JSON with error messages
- Results accessible via session state in main.py

Can you create this agent in backend/story_image_agent/agent.py

"

—————————————— Optional, du kannst direkt zum Abschnitt Lösung springen——————————————–

Änderung in ADK Web bestätigen

cd ~/storygen-learning/02a_Image_Agent_Ready/backend

source ../../.venv/bin/activate

adk web --port 8080

Website erstellen

cd ~/storygen-learning/02a_Second_Agent_Ready

./start.sh

Wenn Ihre Änderung nicht funktioniert, sollten in der ADK Web-UI und auf der Website Fehler angezeigt werden.

—————————————— Lösung ab hier ——————————————–

Lösung

Beenden Sie den vorherigen Prozess mit Control+C oder öffnen Sie ein anderes Terminal:

# Open new terminal
cd ~/storygen-learning/02b_Image_Agent_Done

Website erstellen:

./start.sh

Die Website wird angezeigt:

ADK-Benutzeroberfläche ausprobieren:Öffnen Sie ein weiteres Terminal:

# Open new terminal
cd ~/storygen-learning/02b_Image_Agent_Done/backend

source ../../.venv/bin/activate

adk web --port 8080

Sie sehen die ADK-Benutzeroberfläche, in der Sie dem Agenten Fragen stellen können:

Drücken Sie Strg + C, um den Vorgang zu beenden, bevor Sie mit dem nächsten Abschnitt fortfahren.

Lernen

Unser erster Agent hat sich hervorragend zum Generieren von Texten geeignet, aber jetzt müssen wir Bilder generieren. Für diese Aufgabe benötigen wir mehr direkte Kontrolle. Wir möchten nicht, dass das LLM entscheidet, ob ein Bild erstellt werden soll, sondern es direkt dazu auffordern. Das ist der perfekte Job für einen BaseAgent.

Im Gegensatz zum deklarativen LlmAgent ist ein BaseAgent imperativ. Das bedeutet, dass Sie als Entwickler die genaue Schritt-für-Schritt-Python-Logik in die Methode „_run_async_impl“ schreiben. Sie haben die volle Kontrolle über den Ausführungsablauf.

Sie sollten einen BaseAgent auswählen, wenn Sie Folgendes benötigen:

Deterministische Logik: Der Agent muss einer bestimmten, unveränderlichen Abfolge von Schritten folgen.

Direkte Toolausführung: Sie möchten ein Tool direkt aufrufen, ohne dass ein LLM eingreift.

Komplexe Workflows: Der Prozess umfasst benutzerdefinierte Datenbearbeitung, API-Aufrufe und Logik, die zu komplex ist, als dass ein LLM sie zuverlässig aus einem Prompt allein ableiten könnte.

Für unsere App verwenden wir einen BaseAgent, um die Szenenbeschreibungen vom ersten Agent zu empfangen und das Imagen-Tool direkt aufzurufen. So wird garantiert, dass für jede Szene ein Bild generiert wird.

8. Testen: Agent-Bewertung

Unsere App funktioniert, aber wir brauchen ein automatisches Sicherheitsnetz aus Tests. Das ist eine perfekte Aufgabe für unseren KI-Copiloten.

Aktionen

cd ~/storygen-learning/03a_Agent_Evaluation_Ready/backend

Umfassende Tests mit der Gemini CLI schreiben:

Gemini CLI öffnen

gemini

Geben Sie im Gemini CLI-Fenster den folgenden Prompt ein:

I need you to create comprehensive test files for my backend/story_agent in Google ADK. I need three specific JSON files that match the testing structure used in ADK evaluation.

**Context:** 
- The story agent generates structured JSON stories with exactly 4 scenes
- It uses LlmAgent with no tools, just direct LLM responses
- Input: Keywords
- Output: JSON with story, main_characters, and scenes arrays

**Files to Create:**

### 1. `story_agent_eval.evalset.json` (Comprehensive Integration Tests)
Create a comprehensive evaluation set with:
- **eval_set_id**: "story_agent_comprehensive_evalset"
- **name**: "Story Agent Comprehensive Evaluation Set" 
- **description**: "Comprehensive evaluation scenarios for story_agent covering various keyword combinations, edge cases, and story quality metrics"


Each eval_case should include:
- Full conversation arrays with invocation_id, user_content, final_response
- Complete expected JSON responses with detailed stories, characters, and 4 scenes
- session_input with app_name "story_agent"
- All fields: story (narrative text), main_characters (with detailed visual descriptions), scenes (with index, title, description, text)

### 2. `story_generation.test.json` (Unit Tests)
Create basic generation tests with:
- **eval_set_id**: "story_agent_basic_generation_tests"
- **name**: "Story Agent Basic Generation Tests"
- **description**: "Unit tests for story_agent focusing on JSON structure compliance, scene generation, and keyword integration"

### 3. `test_config.json` (Evaluation Configuration)
Create test configuration with:
- **criteria**: response_match_score: 0.7, tool_trajectory_avg_score: 1.0
- **custom_evaluators**: 
  - json_structure_validator (validates required fields, scene count, character fields)
  - story_quality_metrics (word count 80-250, keyword integration threshold 0.8)
- **evaluation_notes**: Story agent specifics and trajectory expectations

**Important Requirements:**
1. All responses must be valid, parseable JSON
2. Stories must have exactly 4 scenes with indices 1-4
3. Each scene must have: index, title, description, text
4. Main characters must have detailed visual descriptions
5. No tool_uses expected (empty arrays) since story agent uses direct LLM
6. Word count should be 100-200 words total
7. Keywords must be naturally integrated into the narrative

Please generate all three files with realistic example stories and comprehensive test coverage matching the ADK evaluation format.

—————————————— Optional, du kannst direkt zum Abschnitt Lösung springen——————————————–

So rufen Sie die Bewertung auf:

./run_adk_web_persistent.sh

Rufen Sie in der ADK-Benutzeroberfläche den Tab eval auf.

Sie sollten die ADK-Web-UI mit Funktionen für persistentes Testen sehen.

Wichtige Erkenntnis:KI ist ein leistungsstarker Partner bei der Automatisierung der Qualitätssicherung. Es kann sich um das Boilerplate des Testschreibens kümmern, sodass Sie sich auf die Entwicklung von Funktionen konzentrieren können.

——————————————– Lösung ab hier ——————————————–

Lösung

• Wechseln Sie zum Lösungsordner:

cd ~/storygen-learning/03b_Agent_Evaluation_Done/backend

• ADK-Web-UI öffnen

./run_adk_web_persistent.sh

Die Testläufe sind auf dem Tab Eval zu sehen:

Hier können Sie die Messwerte anpassen:

Hier können Sie sich das Ergebnis der Bewertungsausführung ansehen:

Lernen

Ein Agent kann „funktionieren“, indem er ohne Fehler ausgeführt wird. Aber woher wissen wir, ob er die richtige Ausgabe erzeugt? Ist die Geschichte gut? Ist das JSON-Format korrekt? Hier kommt das Bewertungs-Framework des ADK ins Spiel.

Die Agent-Bewertung ist ein automatisiertes Testsystem, mit dem die Qualität und Richtigkeit der Antworten Ihres Agenten gemessen werden kann. Anstatt nur nach Codefehlern zu suchen, wird geprüft, ob das Verhalten des Agents Ihren Erwartungen entspricht. Das Framework verwendet hauptsächlich einige wichtige Dateien:

evalset.json: Dies ist Ihre Master-Testsuite. Jeder „eval case“ in dieser Datei enthält eine Beispielunterhaltung (z.B. einen Nutzerprompt) und die ideale, „goldene“ Antwort, die der Agent liefern soll.

test_config.json: In dieser Datei werden die Regeln für den Erfolg definiert. Hier legen Sie Kriterien fest, z. B.:

response_match_score: Wie genau muss die Antwort des Agents mit der „goldenen“ Antwort übereinstimmen? Eine Punktzahl von 1,0 bedeutet, dass sie identisch sein muss.

custom_evaluators: Sie können eigene Regeln erstellen, z. B. „Die Antwort muss gültiges JSON enthalten“ oder „Die Geschichte muss mehr als 100 Wörter enthalten“.

Wenn Sie eine Auswertung durchführen, können Sie Ihren Agent automatisch anhand von Dutzenden von Szenarien testen und so sicherstellen, dass Änderungen an Ihrem Prompt oder Ihren Tools die Kernfunktionen nicht versehentlich beeinträchtigen. Es ist ein leistungsstarkes Sicherheitsnetz für die Entwicklung produktionsreifer KI-Agents.

9. Infrastructure as Code (IaC): Ein Zuhause in der Cloud schaffen

Unser Code ist getestet, aber er braucht eine produktionsreife Umgebung. Wir verwenden „Infrastructure as Code“, um unsere Umgebung zu definieren.

Was ist Docker?

Docker ist eine Plattform zum Erstellen und Ausführen von Anwendungen in Containern. Stellen Sie sich einen Container wie einen standardisierten Versandcontainer für Software vor. Es bündelt alles, was Ihre Anwendung zum Ausführen benötigt, in einem einzelnen, isolierten Paket:

• Der Anwendungscode selbst
• Die erforderliche Laufzeitumgebung (z.B. die spezifische Version von Python)
• Alle Systemtools und ‑bibliotheken

Diese containerisierte Anwendung kann dann auf jedem Computer ausgeführt werden, auf dem Docker installiert ist. So wird das klassische Problem „Auf meinem Computer funktioniert es“ gelöst.

In diesem Abschnitt fordern wir Gemini auf, ein Dockerfile zu generieren. Das ist einfach das Rezept oder die Blaupause zum Erstellen des Container-Images unserer Anwendung.

Aktionen

cd ~/storygen-learning/04a_Manual_Deployment_Ready

Dockerfile für das Backend mit der Gemini CLI erstellen:Öffnen Sie die Gemini CLI.

Gemini

Probieren Sie in der Gemini CLI den folgenden Prompt aus:

Create a manual deployment plan for my StoryGen app with Google Cloud Platform. I have a Next.js frontend, Python backend, and Terraform infrastructure.

Generate these deployment files:
1. **01-setup.sh** - Environment setup and authentication
2. **02-build-images.sh** - Build and push Docker images to Google Container Registry
3. **03-deploy-infrastructure.sh** - Deploy with Terraform and configure services
4. **load-env.sh** - Load environment variables for deployment

**Requirements:**
- Use Google Cloud Run for both frontend and backend
- Configure Imagen API and storage buckets
- Set up proper IAM permissions
- Use environment variables from .env file
- Include error handling and status checks

Keep scripts simple, well-commented, and production-ready for manual execution.

Lösung:

cd ~/storygen-learning/04b_Manual_Deployment_Done

Ausführen:

source ../.venv/bin/activate
./01-setup.sh

./02-build-images.sh

./03-deploy-infrastructure.sh

Bereitstellungsergebnisse und Infrastrukturerstellung ansehen

10. Automatisierung (CI/CD): Die digitale Produktionslinie

Die manuelle Bereitstellung unserer Anwendung ist eine gute Möglichkeit, die einzelnen Komponenten kennenzulernen. Sie ist jedoch langsam, erfordert manuellen Aufwand und kann zu menschlichen Fehlern führen. In der professionellen Softwareentwicklung wird dieser gesamte Prozess mit einer Methode namens CI/CD automatisiert.

CI/CD steht für Continuous Integration (kontinuierliche Integration) und Continuous Deployment (kontinuierliche Bereitstellung). Es ist eine Methode zum automatischen Erstellen, Testen und Bereitstellen von Code bei jeder Änderung.

• Continuous Integration (CI): Dies ist die Phase „Build and Test“. Sobald ein Entwickler eine Codeänderung an ein freigegebenes Repository (z. B. GitHub) überträgt, wird ein automatisiertes System gestartet. Dabei wird die Anwendung erstellt und alle Tests (z. B. die von uns erstellten Agent-Bewertungen) werden ausgeführt, um sicherzustellen, dass der neue Code korrekt integriert wird und keine Fehler enthält.
• Continuous Deployment (CD): Dies ist die Release-Phase. Wenn die CI-Phase erfolgreich durchlaufen wird, stellt das System die neue, getestete Version der Anwendung automatisch in der Produktion bereit, sodass sie für Nutzer verfügbar ist.

Diese automatisierte Pipeline bildet ein „digitales Fließband“, das Code schnell, sicher und zuverlässig von der Maschine eines Entwicklers in die Produktionsumgebung überträgt. In diesem Abschnitt bitten wir unseren KI-Assistenten, diese Montagelinie für uns mit GitHub Actions und Google Cloud Build zu erstellen.

Aktionen

cd ~/storygen-learning/05a_CICD_Pipeline_Ready

CI/CD-Pipeline mit der Gemini CLI und GitHub erstellen:

Gemini CLI öffnen

Gemini

Probieren Sie in der Gemini CLI den folgenden Prompt aus:

Create a CI/CD pipeline for my StoryGen app using Google Cloud Build and GitHub integration.

Generate these automation files:
1. **cloudbuild.yaml** (for backend) - Automated build, test, and deploy pipeline
2. **GitHub Actions workflow** - Trigger builds on push/PR
3. **Deployment automation scripts** - Streamlined deployment process

**Requirements:**
- Auto-trigger on GitHub push to main branch
- Build and push Docker images
- Run automated tests if available
- Deploy to Google Cloud Run
- Environment-specific deployments (staging/prod)
- Notification on success/failure

Focus on fully automated deployment with minimal manual intervention. Include proper secret management and rollback capabilities.

——————————————– Lösung ab hier ——————————————–

Lösung:

cd ~/storygen-learning/06_Final_Solution/
# Copy the GitHub workflow to parent folder
cp -r 06_Final_Solution/.GitHub ../../../.GitHub

Kehren Sie zum Ordner „06_Final_Solution“ zurück und führen Sie das Skript aus:

cd ~/storygen-learning/06_Final_Solution/

./setup-cicd-complete.sh

Sie sollten sehen, dass die Einrichtung der CI/CD-Pipeline abgeschlossen ist.

Workflow auslösen:Führen Sie ein Commit durch und übertragen Sie Ihren Code per Push in den Hauptzweig. Hinweis: Sie müssen Ihre GitHub-E-Mail-Adresse und Ihren Namen einrichten, um die Berechtigung zu erteilen.

git add .
git commit -m "feat: Add backend, IaC, and CI/CD workflow"
git push origin main

Rufen Sie den Tab „Actions“ (Aktionen) in Ihrem GitHub-Repository auf, um die Ausführung Ihrer automatisierten Bereitstellung zu beobachten.

11. Betrieb: Der AI Control Tower

Wir sind live! Aber die Reise ist noch nicht zu Ende. Das ist „Tag 2“ – der Betrieb. Kehren wir zu Cloud Assist zurück, um unsere laufende Anwendung zu verwalten.

Aktionen

1. Rufen Sie in der Google Cloud Console Ihren Cloud Run-Dienst auf. Interagieren Sie mit Ihrer Live-App, um Traffic und Logs zu generieren.
2. Öffnen Sie den Cloud Assist-Bereich und verwenden Sie ihn als operativen Copilot mit Prompts wie diesen:

Protokollanalyse:

Summarize the errors in my Cloud Run logs for the service 'genai-backend' from the last 15 minutes.

Leistungsoptimierung:

My Cloud Run service 'genai-backend' has high startup latency. What are common causes for a Python app and how can I investigate with Cloud Trace?

Kostenoptimierung:

Analyze the costs for my 'genai-backend' service and its GCS bucket. Are there any opportunities to save money?

Wichtige Erkenntnis:Der KI-SDLC ist ein kontinuierlicher Kreislauf. Derselbe KI-Copilot, der beim Erstellen der Anwendung geholfen hat, ist ein unverzichtbarer Partner für die Überwachung, Fehlerbehebung und Optimierung in der Produktion.