1. Lerninhalte
AI Agent Vibe Full Stack
Willkommen! Sie lernen nun die nächste wichtige Fähigkeit in der Softwareentwicklung: 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 nicht mehr Zeile für Zeile Code schreiben, sondern zum technischen Leiter werden – ein Architekt mit einer Vision und ein 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 Unittests, 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.
Schritt 2: Neues GCP-Projekt erstellen
- Rufen Sie die Google Cloud Console auf und erstellen Sie ein neues Projekt.
- 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 verwenden Sie in den nächsten Schritten.
GitHub-Authentifizierung
Öffnen Sie Cloud Shell, indem Sie in der Google Cloud Console 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 oben im Cloud Shell-Bereich hat die Form eines Terminals), .
👉 Klicken Sie auf die Schaltfläche „Editor öffnen“ (sie sieht aus wie ein geöffneter Ordner mit einem Stift). Dadurch wird der Cloud Shell-Codeeditor im Fenster geöffnet. Auf der linken Seite sehen Sie einen Datei-Explorer.
👉 Google Cloud-Projekt-ID suchen:
- Öffnen Sie die Google Cloud Console: https://console.cloud.google.com
- 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.
👉 Öffnen Sie das Terminal in der Cloud-IDE.
👉💻 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:
👉💻
gh auth login
Kopieren Sie den Code auf die Seite zur Bestätigung der Anmeldung.
Repository forken und klonen 👉💻
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
- Klicken Sie rechts oben auf „Cloud Assist-Chat öffnen“.
Cloud Assist aktivieren
- Klicken Sie auf
Get Gemini Assist
und dann aufEnable Cloud Assist at no cost
. - Und los gehts!
Geben Sie den folgenden detaillierten Prompt für 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.
Wichtige Erkenntnis:KI eignet sich hervorragend für das Systemdesign auf hoher Ebene. Es kann Anforderungen in einfacher Sprache sofort in eine professionelle, visuelle Architektur übersetzen.
4. Entwicklung: ADK mit der Gemini-Befehlszeile erstellen
Ersteinrichtung
Achten Sie darauf, dass wir die Gemini CLI verwenden, um das Repository zu forken und den Arbeitsbereich vorzubereiten:
Umgebung konfigurieren
Klicken Sie in Cloud Shell auf die Schaltfläche „Terminal öffnen“.
- Kopieren Sie die Umgebungsvorlage:
cd ~/storygen-learning cp ~/storygen-learning/env.template ~/storygen-learning/.env
Versteckte Dateien im Editor ansehen, wenn Sie die Datei „.env“ nicht finden
- Klicken Sie in der oberen Menüleiste auf Ansicht.
- Wählen Sie Ausgeblendete Dateien ein-/ausblenden aus.
.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-Befehlszeile:**
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, deaktivieren Sie das Gemini CLI-Terminal mit Control+C
.
—————————————— 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
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
Die ADK-Benutzeroberfläche wird angezeigt. Dort können Sie dem Agent Fragen stellen.
Drücken Sie Strg + C, um den Vorgang zu beenden, bevor Sie mit dem nächsten Abschnitt fortfahren.
5. Entwicklung: Benutzerdefinierten Agenten mit Imagen erstellen
Imagen-Tool (zweiter Agent) generieren
cd ~/storygen-learning/02a_Image_Agent_Ready
Gemini CLI zum Erstellen des Agents für die Bildgenerierung 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
Die ADK-Benutzeroberfläche wird angezeigt. Dort können Sie dem Agent Fragen stellen:
Drücken Sie Strg + C, um den Vorgang zu beenden, bevor Sie mit dem nächsten Abschnitt fortfahren.
6. 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
Gemini-Befehlszeile zum Schreiben umfassender Tests verwenden:
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 persistente Tests 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 finden Sie auf dem Tab Eval
:
Hier können Sie die Messwerte anpassen:
Hier können Sie sich das Ergebnis des Bewertungsdurchlaufs ansehen:
7. Infrastruktur als Code (IaC): Ein Zuhause in der Cloud schaffen
Unser Code ist getestet, aber er braucht einen produktionsreifen Ort. Wir verwenden „Infrastructure as Code“, um unsere Umgebung zu definieren.
Aktionen
cd ~/storygen-learning/04a_Manual_Deployment_Ready
Dockerfile für das Backend mit der Gemini-Befehlszeile erstellen:Öffnen Sie die Gemini-Befehlszeile.
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
8. Automatisierung (CI/CD): Das digitale Fließband
Die manuelle Bereitstellung unserer App ist langsam und birgt Risiken. Wir bitten unsere KI, eine vollständige CI/CD-Pipeline mit GitHub Actions zu schreiben.
Aktionen
cd ~/storygen-learning/05a_CICD_Pipeline_Ready
Gemini CLI zum Erstellen Ihrer CI/CD-Pipeline mit GitHub verwenden:
Gemini-Befehlszeile ö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. 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 automatische Bereitstellung zu verfolgen.
Wichtige Erkenntnis:Die gesamte CI/CD-Pipeline, ein komplexer und wichtiger Teil von DevOps, kann von KI generiert werden.
9. Betrieb: Der AI Control Tower
Wir sind live! Aber die Reise ist noch nicht vorbei. Das ist „Tag 2“ – der Betrieb. Kehren wir zu Cloud Assist zurück, um unsere laufende Anwendung zu verwalten.
Aktionen
- Rufen Sie in der Google Cloud Console Ihren Cloud Run-Dienst auf. Interagieren Sie mit Ihrer Live-App, um Traffic und Logs zu generieren.
- Öffnen Sie den Cloud Assist-Bereich und verwenden Sie ihn als operativen Copilot mit Prompts wie diesen:
Loganalyse:
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 das Monitoring, die Fehlerbehebung und die Optimierung in der Produktion.