Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Vibe Coding mit AlloyDB: Mit Antigravity von 0 zu Prod

1. Einführung

Vibe Coding hat die Geschwindigkeit und die Art und Weise, wie wir Frontends entwickeln, revolutioniert, stößt aber oft an seine Grenzen, wenn es um die Datenbank geht. Bisher mussten Entwickler den Kontext wechseln, komplexe SQL-Schemas schreiben, Verbindungspools verwalten und Datenbankerweiterungen manuell konfigurieren.

In diesem Codelab lernen Sie einen reibungslosen, dialogorientierten Workflow für die Datenbankentwicklung kennen. Mithilfe des Model Context Protocol (MCP) und einer agentenbasierten IDE können Sie Ihren Editor wie einen erfahrenen Data Engineer behandeln. So können Sie in wenigen Minuten aus einer einfachen Idee eine vollständig verbundene, optimierte und KI-fähige Datenbankanwendung erstellen, ohne Ihren Arbeitsbereich zu verlassen.

Umfang

In diesem Codelab erstellen und stellen Sie einen KI-Gastronomie-Guide bereit, eine moderne Next.js-Anwendung, die von AlloyDB unterstützt wird. Die Anwendung unterstützt:

Dynamische Katalogaufnahme: Restaurantdaten werden automatisch aus unstrukturierten CSV-Dateien importiert und strukturiert.
Keyword-basierte Suche: Die Datenbank wird dynamisch mithilfe der Volltextsuche abgefragt.
KI-basierte semantische Suche: Restaurants finden, indem Sie die „Atmosphäre“ beschreiben, z. B. „gemütlicher Ort für ein Date“ oder „schneller Snack für die späte Nacht“. Dazu werden Agent Platform-Einbettungen verwendet.

Lerninhalte

Bereitstellung einer Google Cloud AlloyDB-Instanz mit Konfigurationen für öffentliche IP-Adressen und VPC-Netzwerke.
Antigravity IDE direkt über die MCP Toolbox (Model Context Protocol) mit AlloyDB verbinden
Verbinden eines Next.js-Frontends mit einer Live-Datenbank mithilfe von Umgebungsvariablen und sicheren SSL-Verbindungen.
Aktivieren der In-Database-Integration der Agent Platform, um Vektoreinbettungen mit text-embedding-004 zu generieren.
Mit dem Kosinusdistanz-Operator (<=>) nach Vektorähnlichkeiten suchen.
Optimierung der Datenbankleistung für die Produktionsskalierung mithilfe von HNSW-Indexierung und Tabellenpartitionierung – fungiert als virtueller DBA.

Voraussetzungen

Für dieses Codelab benötigen Sie Folgendes:

Die Antigravity Desktop-IDE ist auf Ihrem Computer installiert.
Google Cloud-Projekt mit aktivierter Abrechnungsfunktion
Google Cloud CLI (gcloud) und Git sind auf Ihrem lokalen Computer installiert und authentifiziert.
Ein Webbrowser (Chrome wird empfohlen).

Dieses Codelab richtet sich an Entwickler aller Erfahrungsstufen, auch an Anfänger.

2. Hinweis

In diesem Abschnitt wird die Ersteinrichtung beschrieben, die in Ihrem Google Cloud-Projekt erforderlich ist, bevor Sie mit der Entwicklung des KI-Gastronomieführers für Berlin beginnen können.

Projekt erstellen

Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist .

Lokale Voraussetzungen installieren

Prüfen Sie, ob auf Ihrem lokalen Computer die folgenden Tools installiert sind:

Antigravity IDE:Installieren Sie die Antigravity Desktop IDE.
Google Cloud SDK: Laden Sie die Google Cloud CLI herunter und installieren Sie sie.
Git: Laden Sie Git herunter und installieren Sie es.

Projekt authentifizieren und festlegen

Sie führen alle Befehlszeilenanweisungen direkt in Ihrer IDE aus.

Öffnen Sie die Antigravity-IDE auf Ihrem lokalen Computer.
Öffnen Sie das Terminal von Antigravity und klonen Sie das Projekt-Repository:

git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git

Öffnen Sie den Projektordner:
Wählen Sie „Datei“ > „Ordner öffnen“ (oder „Öffnen…“).
Rufen Sie den neu geklonten Ordner vibe-coding-postgres-mcp auf und wählen Sie ihn aus.
Wenn der Projektordner geöffnet wird, starten Sie ein neues integriertes Terminal in Antigravity. Legen Sie die Umgebungsvariable PROJECT_ID fest und konfigurieren Sie die gcloud CLI so, dass sie verwendet wird. Ersetzen Sie [YOUR_PROJECT_ID] durch Ihre tatsächliche GCP-Projekt-ID:

export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID

Melden Sie sich in der Google Cloud CLI an:

gcloud auth login

So bestätigen Sie Ihr aktives Konto:

gcloud auth list

Erforderliche APIs aktivieren

Führen Sie den folgenden Befehl in Ihrem Antigravity-Terminal aus, um die erforderlichen Google Cloud-Dienste zu aktivieren:

gcloud services enable alloydb.googleapis.com \
                       compute.googleapis.com \
                       servicenetworking.googleapis.com \
                       aiplatform.googleapis.com \
                       run.googleapis.com \
                       artifactregistry.googleapis.com \
                       cloudbuild.googleapis.com

3. AlloyDB-Instanz erstellen

In diesem Abschnitt führen Sie ein automatisiertes Skript in Ihrem Antigravity-Terminal aus, um Ihren AlloyDB-Cluster und Ihre AlloyDB-Instanz in Google Cloud bereitzustellen.

Führen Sie im aktiven integrierten Antigravity-Terminal (das sich bereits im Projektverzeichnis „vibe-coding-postgres-mcp“ befindet) das AlloyDB-Bereitstellungsskript aus:

source database/deploy_alloydb.sh --region us-central1 --public-ip

Hinweis:Die Bereitstellung dauert etwa 10 bis 15 Minuten.

Das Bereitstellungsskript wird:

Erstellen Sie ein VPC-Netzwerk mit dem Namen „default“, falls es in Ihrem Projekt noch nicht vorhanden ist.
Richten Sie den Zugriff auf private Dienste für AlloyDB ein.
Stellen Sie einen AlloyDB-Cluster und eine primäre Instanz mit aktivierter privater und öffentlicher IP-Adresse bereit.
Gewähren Sie dem AlloyDB-Dienst-Agent die erforderlichen Berechtigungen für die Agent-Plattform.

Die Ausgabe sollte in etwa so aussehen:

----------------------------------------
Deployment Process Completed
Cluster:  alloydb-aip-01 (STANDARD)
Instance: alloydb-aip-01-pr
Region:   us-central1
Private IP: XX.XX.XX.XX
Public IP:  XX.XX.XX.XX
Initial Password: XXXXXXXXXX (if new cluster)
----------------------------------------

Bitte kopieren und speichern Sie diese Informationen:

Private IP-Adresse von AlloyDB: Wird von der Cloud Run-Anwendung verwendet, um eine sichere Verbindung innerhalb der VPC herzustellen.
Öffentliche AlloyDB-IP-Adresse: Wird von Ihrer lokalen Antigravity-IDE verwendet, um eine direkte Verbindung herzustellen.
Datenbankpasswort: Das automatisch generierte Passwort für den Postgres-Nutzer.

4. Frontend bereitstellen

In diesem Abschnitt stellen Sie das Next.js-Baseline-Frontend (Status 0) mit dem integrierten Terminal von Antigravity in Google Cloud Run bereit. In dieser ersten Version werden Mock-Daten verwendet und es wird noch keine Verbindung zur Datenbank hergestellt.

Führen Sie zuerst die folgenden Befehle direkt in Ihrem Antigravity-Terminal aus, um dem Compute Engine-Standarddienstkonto die erforderlichen IAM-Rollen zuzuweisen:

PROJECT_NUMBER=$(gcloud projects describe $(gcloud config get-value project) --format="value(projectNumber)")
# Grant Storage Object Viewer (to read source code)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/storage.objectViewer"
# Grant Log Writer (to write build logs)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/logging.logWriter"
# Grant Artifact Registry Writer (to push container images)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/artifactregistry.writer"

Führen Sie im Antigravity-Terminal im Stammverzeichnis Ihres vibe-coding-postgres-mcp-Verzeichnisses den folgenden Befehl aus, um die Next.js-Anwendung zu kompilieren und in Ihrem VPC-Netzwerk bereitzustellen:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
  --allow-unauthenticated \
  --region=us-central1

Nach Abschluss der Bereitstellung wird die Dienst-URL ausgegeben.

Building using Dockerfile and deploying container to Cloud Run service [berlin-gastronomy-guide] in project [vibe-coding-postgres-mcp] region [us-central1]
Building and deploying...
  Validating configuration...done
  Uploading sources...done
  Building Container... Logs are available at [ https://console.cloud.google.com/cloud-build/builds;region=us-central1/46a6e834-d5e9-4dfd-885e-d39e2790f72d?project=734791203988 ]....done
  Setting IAM Policy...done
  Creating Revision...done
  Routing traffic...done
Done.
Service [berlin-gastronomy-guide] revision [berlin-gastronomy-guide-00002-n6k] has been deployed and is serving 100 percent of traffic.
Service URL: https://berlin-gastronomy-guide-[YOUR_PROJECT_NUMBER].us-central1.run.app

Kopieren Sie die URL und öffnen Sie sie in Ihrem Browser.

Prüfen Sie, ob die Webseite „Berlin AI Gastronomy Guide“ mit den Beispielkarten für Restaurants angezeigt wird.

5. Antigravity mit Google Cloud verbinden

Damit der KI-Agent in Ihrer IDE (Antigravity), der lokal ausgeführt wird, mit der Datenbank interagieren kann, verwenden wir den offiziellen Google Cloud AlloyDB MCP-Server.

Da wir beim Bereitstellen die öffentliche IP-Adresse für die AlloyDB-Instanz aktiviert haben, kann Ihre lokale IDE direkt über das Internet eine Verbindung zu ihr herstellen. Die Verbindung wird mit SSL und der Passwortauthentifizierung gesichert. Der MCP-Server verwendet Ihre lokalen Google Cloud-Anmeldedaten, um die Verbindung zu autorisieren.

MCP-Server in Antigravity konfigurieren

Klicken Sie in Antigravity IDE rechts oben im Chatfenster auf das Dreipunkt-Menü (...).
Wählen Sie „MCP-Server“ aus und klicken Sie dann auf „Verwaltete MCP-Server“ (oder „Rohkonfiguration ansehen“ / „Konfigurationsdatei bearbeiten“).
Fügen Sie den folgenden JSON-Block in das Objekt „mcpServers“ ein. Ersetzen Sie [YOUR_PROJECT_ID] und [YOUR_ALLOYDB_PASSWORD] durch Ihre tatsächliche Projekt-ID und das Datenbankpasswort, das Sie beim Bereitstellen von AlloyDB gespeichert haben:

"alloydb-postgres": {
  "command": "npx",
  "args": [
    "-y",
    "@toolbox-sdk/server@latest",
    "--prebuilt",
    "alloydb-postgres",
    "--stdio"
  ],
  "env": {
    "ALLOYDB_POSTGRES_PROJECT": "[YOUR_PROJECT_ID]",
    "ALLOYDB_POSTGRES_REGION": "us-central1",
    "ALLOYDB_POSTGRES_CLUSTER": "alloydb-aip-01",
    "ALLOYDB_POSTGRES_INSTANCE": "alloydb-aip-01-pr",
    "ALLOYDB_POSTGRES_DATABASE": "postgres",
    "ALLOYDB_POSTGRES_USER": "postgres",
    "ALLOYDB_POSTGRES_PASSWORD": "[YOUR_ALLOYDB_PASSWORD]"
  }
}

Konfigurationsdatei speichern
Die IDE startet den MCP-Server automatisch. Im MCP-Panel sollte neben „alloydb-postgres“ ein grüner Punkt zu sehen sein, der angibt, dass die Verbindung hergestellt wurde.

6. Vibe Coding: Datenbankaufnahme

Nachdem Ihre Antigravity IDE über den MCP-Server mit Ihrer AlloyDB-Instanz verbunden ist, können Sie mit dem Vibe-Coding beginnen.

In diesem Schritt weisen Sie den KI-Agenten an, eine lokale CSV-Datei mit dem Gastronomiekatalog von Berlin zu lesen und in Ihre AlloyDB-Datenbank zu laden.

Die Aufgabe

Sie verwenden den Agent-Chat in Antigravity. Der Agent liest die Datei autonom, analysiert die Datentypen, stellt eine Verbindung zu Ihrer Datenbank her, erstellt die Tabelle und fügt die Datensätze ein.

Öffnen Sie in Antigravity das Feld „Agent Chat“ (normalerweise auf der rechten Seite des Editors).

Kopieren Sie dann den folgenden Prompt und fügen Sie ihn in den Chat ein. Drücken Sie die Eingabetaste:

Read the headers of database/seed_data_berlin.csv to determine column data types and create the restaurants table using the MCP tool execute_sql. Then, read the CSV rows locally and insert all 100 records into remote AlloyDB using a single batched multi-row INSERT INTO ... VALUES (...), (...), ...; statement via execute_sql. Do not print the CSV contents, row payloads, or SQL statements to the chat transcript.

Überprüfung

Der KI-Agent wird:

Lesen Sie die CSV-Datei-Header und einige Beispielzeilen, um das passende Schema zu ermitteln.
Rufen Sie das AlloyDB MCP-Tool auf, um die Tabelle „restaurants“ zu erstellen.
Fügen Sie die 100 Restaurantdatensätze aus der CSV-Datei im Batchverfahren in die Datenbank ein.

7. Vibe Coding: Frontend mit Datenbank verbinden

In diesem Abschnitt verbinden Sie das Next.js-Frontend mit Ihrer aktiven AlloyDB-Datenbank. Sie weisen den Agenten an, die Mock-Daten durch eine Live-Datenbankabfrage zu ersetzen und die Keyword-Suche zu implementieren.

Die Aufgabe

Sie fordern den Agenten auf, den Verbindungscode zu schreiben und die Startseite zu aktualisieren. Da wir die SSL-Regel für die Datenbank in .agents/AGENTS.md festgelegt haben, konfiguriert der Agent den Verbindungspool automatisch für die Verwendung von SSL für Cloud-Verbindungen, ohne dass Sie dies in Ihrem Prompt angeben müssen.

Kopieren Sie im Antigravity Agent-Chat den folgenden Prompt und fügen Sie ihn ein. Drücken Sie dann die Eingabetaste. Ersetzen Sie [YOUR_PASSWORD] durch Ihr tatsächliches Datenbankpasswort:

Connect our Next.js frontend to the restaurants table in the database using the pg library. Use a connection pool configured with environment variables: DB_HOST, DB_USER (postgres), DB_PASS (password is '

[YOUR_PASSWORD]

'), and DB_NAME (postgres). Replace the mock data in page.tsx with a live query, and implement keyword search on the name, category, and description. When testing or verifying queries, always use LIMIT 3 and suppress quiet npm/build logs.

Beobachtet den Agenten bei der Ausführung der Aufgabe:

Dadurch werden das pg-Paket und seine TypeScript-Typen (@types/pg) installiert.
Dadurch wird eine Datenbankverbindungsdatei (oder eine Next.js-Serveraktion) erstellt und der Verbindungspool konfiguriert.
Die AGENTS.md-Regeln werden gelesen und die SSL-Konfiguration für nicht lokale Hosts wird automatisch hinzugefügt.
Die Datei „page.tsx“ wird neu geschrieben, um die Datenbank abzufragen und die Ergebnisse anhand der Suchanfrage zu filtern.

Überprüfung

Damit die Änderungen wirksam werden, müssen Sie das Frontend in Cloud Run noch einmal bereitstellen. Da wir den „Cloud-Only“-Ablauf verwenden, wird der neue Code so bereitgestellt.

Öffnen Sie das integrierte Terminal in Antigravity (achten Sie darauf, dass Sie sich im Stammverzeichnis befinden).

Führen Sie den Bereitstellungsbefehl aus und übergeben Sie die private IP-Adresse und das Passwort für AlloyDB als Umgebungsvariablen. Ersetzen Sie die Platzhalter durch Ihre tatsächlichen Werte:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Öffnen Sie nach Abschluss der Bereitstellung die Dienst-URL in Ihrem Browser.

Suchen Sie z. B. nach „Burgermeister“ oder „Kebab“. Die echten Restaurants sollten aus der Datenbank geladen werden.

Auf den Restaurantkarten werden jetzt die tatsächlichen GCS-Bilder angezeigt, da die Datenbankeinträge die öffentlichen GCS-URLs enthalten, die wir zuvor hochgeladen haben.

8. Vibe Coding: Semantische Suche aktivieren

In diesem Abschnitt führen Sie ein Upgrade Ihrer Anwendung durch, um die KI-basierte semantische Vektorsuche zu unterstützen. Nutzer können nicht nur nach genauen Keywords suchen, sondern auch die gewünschte Atmosphäre oder das gewünschte Erlebnis beschreiben, z.B. „romantisches Abendessen“ oder „schneller Snack nach dem Clubbing“.

Die Aufgabe

Sie weisen den KI-Agent an, die semantische Suche für die Tabelle „restaurants“ zu aktivieren. Der Agent nutzt die benutzerdefinierte Funktion „add-vector-search-alloydb“ im Repository, um die Datenbankerweiterungen, die Modellregistrierung der Agent Platform, die Einbettungserstellung und die Aktualisierung von Anfragen automatisch zu verarbeiten.

Kopieren Sie im Antigravity Agent-Chat den folgenden Prompt und fügen Sie ihn ein. Drücken Sie dann die Eingabetaste:

Upgrade our database to support Semantic Vector Search on the restaurants table based on the description column. Then, update our frontend search query to use vector similarity search. Execute embedding generation quietly without printing embedding vectors or SQL progress logs to chat.

Beobachtet den Agenten bei der Ausführung der Aufgabe:

Es wird eine Verbindung zu AlloyDB hergestellt und die Erweiterungen „vector“ (pgvector) und „google_ml_integration“ werden aktiviert.
Dadurch wird das Agent Platform-Einbettungsmodell (text-embedding-004) in der Datenbank registriert.
Dadurch wird der Tabelle „restaurants“ eine neue Spalte für Einbettungen hinzugefügt.
Es wird eine In-Database-Abfrage ausgeführt, um Einbettungen für alle 100 Restaurantbeschreibungen zu generieren.
Der Frontend-Code wird aktualisiert, um eine Einbettung für die Suchanfrage des Nutzers zu generieren und eine Suche nach Vektorähnlichkeit mit dem Kosinus-Distanzoperator (<=>) durchzuführen.

Überprüfung

Stellen Sie den aktualisierten Code noch einmal in Cloud Run bereit.

Führen Sie im integrierten Antigravity-Terminal den Bereitstellungsbefehl aus und ersetzen Sie die Platzhalter durch Ihre tatsächlichen Werte:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Öffnen Sie nach Abschluss der Bereitstellung die Dienst-URL in Ihrem Browser.

Testen Sie die semantische Suche, indem Sie eine Beschreibung in natürlicher Sprache eingeben, z. B.:

„ein romantisches Restaurant“
„schneller Snack nach dem Clubbing“

Es werden sehr relevante Restaurants wie das Clärchens oder der Burgermeister zurückgegeben, auch wenn die genauen Wörter „romantisch“ oder „Clubbing“ nicht in ihrem Namen oder ihrer Beschreibung enthalten sind.

9. Vibe Coding: Datenbankoptimierung

Wenn Ihre Anwendung wächst, muss die Datenbank für die Verarbeitung großer Datenmengen (über 100.000 Zeilen) und hohen gleichzeitigen Suchtraffic optimiert werden. In diesem letzten Schritt behandeln Sie Ihren Agent als virtuellen Datenbankadministrator (DBA), um Ihr Datenbankschema zu analysieren und zu optimieren.

Die Aufgabe

Sie bitten den Agent, als Principal Database Architect zu fungieren, das aktuelle Schema zu analysieren und Optimierungen zu empfehlen. Nachdem Sie die Empfehlungen geprüft und genehmigt haben, wendet der Agent sie mithilfe seines benutzerdefinierten Skills „optimize-database-alloydb“ automatisch an.

Act as my Principal Database Architect! Our semantic search is feeling great, but let's level up our backend to effortlessly scale to 100K+ rows and handle high concurrent traffic. Inspect our restaurants schema quietly, and work your magic by immediately applying your top 2 production optimizations—an HNSW vector index and list partitioning by neighborhood—right now in this turn. No need to wait for approval! Keep the SQL logs clean and hit me with a crisp 3-bullet summary of how we just supercharged our database.

Überprüfung

Der Agent analysiert autonom Ihr Datenbankschema und wendet zwei wichtige Produktionsoptimierungen an:

HNSW (Hierarchical Navigable Small World): Beschleunigt die Suche nach Vektorähnlichkeiten um Größenordnungen, ohne die gesamte Tabelle zu scannen.
Deklarative Listenpartitionierung: Partitioniert die Tabelle „Restaurants“ nach Stadtteil, um eine effiziente Skalierung und Wartung zu ermöglichen.

Zum Schluss erhalten Sie eine kurze Zusammenfassung mit drei Stichpunkten, in denen die architektonischen Vorteile dieser Produktions-Upgrades erläutert werden.

10. Herausforderung: Rezensionen und Bewertungen hinzufügen

Jetzt sind Sie an der Reihe, Ihre Vibe-Coding-Fähigkeiten unter Beweis zu stellen. In dieser Challenge erweitern Sie den Gastronomieführer für Berlin, um Kundenrezensionen und Sternebewertungen zu unterstützen.

Die Aufgabe

Anstatt einem Copy-and-Paste-Prompt zu folgen, schreiben Sie Ihren eigenen Prompt im Antigravity Agent Chat, um die folgenden Funktionen zu implementieren:

Datenbankschema: Erstellen Sie eine neue reviews-Tabelle, die mit der restaurants-Tabelle verknüpft ist. Sie sollte eine Bewertung (eine Ganzzahl von 1 bis 5) und einen kurzen Textkommentar enthalten.
Datengenerierung: Generieren Sie 3–4 realistische Kundenrezensionen für jedes der 100 Restaurants in der Datenbank.
Frontend-Integration: Aktualisieren Sie das Next.js-Frontend, um die durchschnittliche Sternebewertung (z.B. ⭐⭐⭐⭐☆) auf jeder Restaurantkarte zu berechnen und anzuzeigen.
Filtern:Fügen Sie oben auf der Seite einen Drop-down-Filter hinzu, um Restaurants nach ihrer Bewertung zu filtern (z.B. „Alle anzeigen“, „4+ Sterne“, „3+ Sterne“).

Überprüfung

Sobald der Agent die Aufgabe abgeschlossen hat, stellen Sie Ihre Anwendung in Cloud Run noch einmal bereit. Ersetzen Sie dazu die Platzhalter durch Ihre tatsächlichen Werte:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Aktualisieren Sie nach Abschluss der Bereitstellung Ihren Browser und prüfen Sie, ob die Sternebewertung auf den Karten

11. Ergebnisse

Nachdem Sie die Schritte ausgeführt haben, haben Sie erfolgreich eine KI-Anwendung der nächsten Generation mit Datenbankunterstützung mithilfe von Vibe Coding erstellt und optimiert. In diesem Abschnitt werden die wichtigsten architektonischen Funktionen beschrieben, die Sie implementiert haben:

Agentic Database Integration (Model Context Protocol)

Das Schreiben von Datenbankcode ist traditionell ein manueller Prozess, bei dem Sie zwischen Ihrer IDE, der Dokumentation und Datenbankclients wechseln müssen.

In diesem Lab haben Sie die MCP-Toolbox (Model Context Protocol) verwendet, um diese Lücke zu schließen. Da die Prüfung des Datenbankschemas und die SQL-Ausführung als Tools direkt für den KI-Agenten verfügbar gemacht wurden, konnte der Agent Folgendes tun:

Roh-CSV-Daten prüfen und das Datenbankschema entwerfen
Generieren und führen Sie die DDL zum Erstellen von Tabellen aus.
Verbinden Sie den Verbindungspool mit der Next.js-Anwendung.

Das zeigt, wie MCP die Datenbankentwicklung zu einer konversationellen, schnellen Erfahrung macht, während der Entwickler die volle Kontrolle in der IDE behält.

In-Database AI (Agent Platform & Semantic Search)

Ihre Anwendung nutzt die native Integration von AlloyDB in die Agent Platform von Google Cloud, um Vektoreinbettungen direkt in der Datenbank mit SQL zu generieren:

Online-Generierung von Einbettungen: Anstatt Daten in einen externen Python-Dienst zu übertragen, ruft AlloyDB das Modell „text-embedding-004“ in der Datenbank über SQL-Funktionen auf.
Semantische Vektorsuche: Mithilfe der pgvector-Erweiterung und des Kosinus-Abstandsoperators (<=>) kann der Agent die „Stimmung“ der Nutzeranfrage in natürlicher Sprache (z.B. „romantisches Abendessen“) mit der nächstgelegenen Vektordarstellung im Restaurantkatalog abgleichen und semantisch relevante Ergebnisse in Millisekunden zurückgeben.

Datenbankoptimierung für die Produktion (HNSW und Partitionierung)

Damit die Anwendung auf mehr als 100.000 Zeilen skaliert und hohes Traffic-Aufkommen bewältigen kann, haben Sie als virtueller DBA zwei erweiterte Datenbankoptimierungen vorgenommen:

HNSW-Index (Hierarchical Navigable Small World): Sie haben einen HNSW-Index für die Vektorspalte erstellt. Im Gegensatz zu Flat-Indizes wird bei HNSW ein mehrschichtiges Diagramm erstellt, das extrem schnelle ANN-Suchen (Approximate Nearest Neighbor) mit hohem Recall ermöglicht.
Deklarative Tabellenpartitionierung: Sie haben die Tabelle „restaurants“ nach Stadtteil partitioniert. So wird sichergestellt, dass bei Abfragen, die auf einen bestimmten Bereich ausgerichtet sind, nur die relevante Partition und nicht die gesamte Tabelle gescannt wird. Dadurch werden die E/A-Vorgänge auf der Festplatte und die Abfragelatenz drastisch reduziert.

Als Anwendungsentwickler scheuen wir uns oft vor komplexen Datenbankkonfigurationen, Vektormathematik und ausgefeilten Indexierungsstrategien, da sie spezielles DBA-Know-how erfordern. Durch die Nutzung von Vibe Coding mit einer agentischen IDE schließen wir diese Lücke. Wir können jetzt mit natürlicher Sprache Datenbankanwendungen in Produktionsqualität entwerfen, entwickeln und optimieren. Das beschleunigt unseren Entwicklungszyklus erheblich und wir können uns auf das konzentrieren, was am wichtigsten ist: eine optimale Nutzererfahrung.

12. Bereinigen

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

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf „Löschen“.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf „Beenden“, um das Projekt zu löschen.

13. Glückwunsch

Sie haben erfolgreich eine datengesteuerte, KI-basierte Anwendung mit Vibe Coding erstellt und bereitgestellt.

Die Aufgaben in diesem Lab:

Sie haben eine AlloyDB-Datenbank mit privatem und öffentlichem IP-Zugriff bereitgestellt.
Sie haben Ihre Antigravity IDE über die MCP-Toolbox (Model Context Protocol) direkt mit der Datenbank verbunden.
Natürliche Sprache wurde verwendet, um einen CSV-Katalog aufzunehmen, ein Next.js-Frontend mit der Datenbank zu verbinden und in Cloud Run bereitzustellen.
Die In-Database-Integration der Agent Platform wurde aktiviert, um Vektoreinbettungen zu generieren und semantische Suchen durchzuführen.
Als virtueller DBA wurde die Datenbank mithilfe von HNSW-Indexierung und Tabellenpartitionierung für die Produktionsskalierung optimiert.

All das wurde durch natürliche Unterhaltung mit Ihrem KI-Agenten erreicht, ohne dass Sie eine einzige Zeile manuellen SQL-Codes schreiben oder externe Datenbankclients öffnen mussten.

Weitere Informationen finden Sie in der Produktdokumentation: