1. परिचय
वाइब कोडिंग ने, फ़्रंटएंड को डेवलप करने के तरीके और उसकी स्पीड में काफ़ी बदलाव किया है. हालांकि, डेटाबेस तक पहुंचने पर अक्सर इसमें रुकावट आती है. आम तौर पर, डेवलपर को कॉन्टेक्स्ट स्विच करना पड़ता है, जटिल एसक्यूएल स्कीमा लिखने पड़ते हैं, कनेक्शन पूल मैनेज करने पड़ते हैं, और डेटाबेस एक्सटेंशन को मैन्युअल तरीके से कॉन्फ़िगर करना पड़ता है.
इस कोडलैब में, आपको बातचीत वाले डेटाबेस डेवलपमेंट वर्कफ़्लो का अनुभव मिलेगा. मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) और एजेंटिक आईडीई का इस्तेमाल करके, अपने एडिटर को एक अनुभवी डेटा इंजीनियर के तौर पर इस्तेमाल किया जा सकता है. इससे आपको कुछ ही मिनटों में, एक सामान्य आइडिया से लेकर पूरी तरह से कनेक्टेड, ऑप्टिमाइज़्ड, और एआई की सुविधा वाला डेटाबेस ऐप्लिकेशन बनाने में मदद मिलेगी. इसके लिए, आपको अपने वर्कस्पेस से बाहर जाने की ज़रूरत नहीं होगी.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको एआई गैस्ट्रोनॉमी गाइड बनाने और उसे डिप्लॉय करने का तरीका बताया जाएगा. यह AlloyDB पर आधारित एक आधुनिक Next.js ऐप्लिकेशन है. यह ऐप्लिकेशन इन सुविधाओं के साथ काम करेगा:
- डाइनैमिक कैटलॉग इनजेस्शन: इसमें, रेस्टोरेंट के डेटा को रॉ CSV फ़ाइलों से अपने-आप इंपोर्ट किया जाता है और उसे व्यवस्थित किया जाता है.
- कीवर्ड के आधार पर खोज: फ़ुल-टेक्स्ट सर्च का इस्तेमाल करके, डेटाबेस को डाइनैमिक तरीके से क्वेरी करना.
- एआई की मदद से सिमैंटिक सर्च: एजेंट प्लैटफ़ॉर्म एम्बेडिंग का इस्तेमाल करके, रेस्टोरेंट की "वाइब" (जैसे, "डेट के लिए आरामदायक जगह" या "देर रात खाने के लिए कुछ हल्का-फुल्का") के बारे में बताकर रेस्टोरेंट ढूंढना.

आपको क्या सीखने को मिलेगा
- सार्वजनिक आईपी और वीपीसी नेटवर्क कॉन्फ़िगरेशन के साथ Google Cloud AlloyDB इंस्टेंस को प्रोविज़न करना.
- मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) टूलबॉक्स का इस्तेमाल करके, Antigravity आईडीई को सीधे तौर पर AlloyDB से कनेक्ट करना.
- एनवायरमेंट वैरिएबल और सुरक्षित एसएसएल कनेक्शन का इस्तेमाल करके, Next.js फ़्रंटएंड को लाइव डेटाबेस से कनेक्ट करना.
- टेक्स्ट-एंबेडिंग-004 का इस्तेमाल करके वेक्टर एंबेडिंग जनरेट करने के लिए, डेटाबेस में एजेंट प्लैटफ़ॉर्म इंटिग्रेशन चालू करना.
- कोसाइन दूरी ऑपरेटर (<=>) का इस्तेमाल करके, वेक्टर सिमिलैरिटी सर्च करना.
- एचएनएसडब्ल्यू इंडेक्सिंग और टेबल पार्टिशनिंग का इस्तेमाल करके, प्रोडक्शन स्केल के लिए डेटाबेस की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना—वर्चुअल डीबीए के तौर पर काम करना.
आपको इन चीज़ों की ज़रूरत होगी
इस कोडलैब को पूरा करने के लिए, आपके पास ये चीज़ें होनी चाहिए:
- आपके कंप्यूटर पर Antigravity Desktop IDE इंस्टॉल हो.
- बिलिंग की सुविधा वाला Google Cloud प्रोजेक्ट.
- आपके कंप्यूटर पर Google Cloud CLI (gcloud) और Git इंस्टॉल होना चाहिए. साथ ही, इनकी पुष्टि होनी चाहिए.
- वेब ब्राउज़र (Chrome का सुझाव दिया गया है).
यह कोडलैब, सभी लेवल के डेवलपर के लिए बनाया गया है. इसमें कोडिंग शुरू करने वाले डेवलपर भी शामिल हैं.
2. शुरू करने से पहले
इस सेक्शन में, एआई बर्लिन गैस्ट्रोनॉमी गाइड बनाने से पहले, Google Cloud प्रोजेक्ट में ज़रूरी शुरुआती सेटअप के बारे में बताया गया है.
प्रोजेक्ट बनाना
- Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर जाकर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Cloud प्रोजेक्ट के लिए बिलिंग की सुविधा चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें .
लोकल प्रमोशन के लिए ज़रूरी शर्तें पूरी करना
पक्का करें कि आपके कंप्यूटर पर ये टूल इंस्टॉल हों:
- Antigravity IDE: Antigravity Desktop IDE इंस्टॉल करें
- Google Cloud SDK: Google Cloud CLI को डाउनलोड और इंस्टॉल करें.
- Git: Git को डाउनलोड और इंस्टॉल करें.
पुष्टि करना और प्रोजेक्ट सेट करना
आपको कमांड-लाइन से जुड़े सभी निर्देशों को सीधे तौर पर अपने आईडीई में लागू करना होगा.
- अपने कंप्यूटर पर Antigravity IDE खोलें
- Antigravity का टर्मिनल खोलें और प्रोजेक्ट रिपॉज़िटरी को क्लोन करें:
git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git
- प्रोजेक्ट फ़ोल्डर खोलें:
- फ़ाइल > फ़ोल्डर खोलें (या खोलें...) पर जाएं.
- नेविगेट करके, हाल ही में क्लोन किए गए vibe-coding-postgres-mcp फ़ोल्डर को चुनें.
- प्रोजेक्ट फ़ोल्डर खुलने के बाद, Antigravity में नया इंटिग्रेटेड टर्मिनल लॉन्च करें. PROJECT_ID एनवायरमेंट वैरिएबल सेट करें और gcloud CLI को इसे इस्तेमाल करने के लिए कॉन्फ़िगर करें. इसके लिए, [YOUR_PROJECT_ID] की जगह अपना असल GCP प्रोजेक्ट आईडी डालें:
export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID
- Google Cloud CLI में लॉग इन करें:
gcloud auth login
- अपने चालू खाते की पुष्टि करें:
gcloud auth list
ज़रूरी एपीआई चालू करना
ज़रूरी Google Cloud सेवाएं चालू करने के लिए, Antigravity टर्मिनल में यह कमांड चलाएं:
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 इंस्टेंस बनाना
इस सेक्शन में, आपको अपने Antigravity टर्मिनल में एक ऑटोमेटेड स्क्रिप्ट चलानी होगी. इससे Google Cloud में आपका AlloyDB क्लस्टर और इंस्टेंस उपलब्ध हो जाएगा
Antigravity के इंटिग्रेट किए गए चालू टर्मिनल में, AlloyDB प्रोविज़निंग स्क्रिप्ट चलाएं. यह टर्मिनल, vibe-coding-postgres-mcp प्रोजेक्ट डायरेक्ट्री में पहले से मौजूद है:
source database/deploy_alloydb.sh --region us-central1 --public-ip
ध्यान दें: इस कॉन्फ़िगरेशन को जोड़ने में करीब 10 से 15 मिनट लगते हैं
प्रोविज़निंग स्क्रिप्ट::
- डिफ़ॉल्ट नाम का वीपीसी नेटवर्क बनाएं. अगर यह आपके प्रोजेक्ट में मौजूद नहीं है, तो इसे बनाएं.
- AlloyDB के लिए Private Services Access सेट अप करें.
- AlloyDB क्लस्टर और प्राइमरी इंस्टेंस को डिप्लॉय करें. इसके लिए, Private IP और Public IP, दोनों चालू होने चाहिए.
- AlloyDB सेवा एजेंट को, Agent Platform की ज़रूरी अनुमतियां दें.
आउटपुट कुछ इस तरह का होना चाहिए:
----------------------------------------
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)
----------------------------------------
कृपया इस जानकारी को कॉपी करके सेव कर लें:
- AlloyDB का प्राइवेट आईपी: इसका इस्तेमाल Cloud Run ऐप्लिकेशन, वीपीसी में सुरक्षित तरीके से कनेक्ट करने के लिए करता है.
- AlloyDB का सार्वजनिक आईपी पता: इसका इस्तेमाल आपका लोकल Antigravity IDE सीधे तौर पर कनेक्ट करने के लिए करता है.
- डेटाबेस का पासवर्ड: postgres उपयोगकर्ता के लिए अपने-आप जनरेट हुआ पासवर्ड.
4. फ़्रंटएंड डिप्लॉय करना
इस सेक्शन में, Antigravity के इंटिग्रेटेड टर्मिनल का इस्तेमाल करके, Next.js के बुनियादी फ़्रंटएंड (स्टेट 0) को Google Cloud Run पर डिप्लॉय किया जाएगा. इस शुरुआती वर्शन में मॉक डेटा का इस्तेमाल किया गया है और यह अब तक डेटाबेस से कनेक्ट नहीं हुआ है.
सबसे पहले, Compute Engine के डिफ़ॉल्ट सेवा खाते को ज़रूरी आईएएम भूमिकाएं देने के लिए, Antigravity टर्मिनल में सीधे तौर पर ये निर्देश चलाएं:
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"
Antigravity टर्मिनल में, vibe-coding-postgres-mcp डायरेक्ट्री के रूट से, Next.js ऐप्लिकेशन को अपने वीपीसी नेटवर्क में कंपाइल और डिप्लॉय करने के लिए, यह कमांड चलाएं:
gcloud run deploy berlin-gastronomy-guide \
--source frontend/ \
--network=default \
--subnet=default \
--allow-unauthenticated \
--region=us-central1
डिप्लॉयमेंट पूरा होने के बाद, यह सेवा का यूआरएल प्रिंट करेगा.
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
यूआरएल को कॉपी करें और उसे अपने ब्राउज़र में खोलें.
पुष्टि करें कि आपको बर्लिन की एआई गैस्ट्रोनॉमी गाइड का वेब पेज दिख रहा हो. इसमें मॉक रेस्टोरेंट कार्ड दिख रहे हों.

5. Antigravity को Google Cloud से कनेक्ट करना
हम Google Cloud AlloyDB MCP Server का इस्तेमाल करेंगे, ताकि आपके IDE (Antigravity) में स्थानीय तौर पर चल रहा एआई एजेंट, डेटाबेस के साथ इंटरैक्ट कर सके.
हमने प्रोविज़निंग के दौरान AlloyDB इंस्टेंस पर सार्वजनिक आईपी चालू किया था. इसलिए, आपका लोकल IDE सीधे तौर पर इंटरनेट से कनेक्ट हो सकता है. कनेक्शन को एसएसएल और पासवर्ड की पुष्टि करने की सुविधा का इस्तेमाल करके सुरक्षित किया जाता है. साथ ही, एमसीपी सर्वर आपके स्थानीय Google Cloud क्रेडेंशियल का इस्तेमाल करके कनेक्शन को अनुमति देता है.
Antigravity में एमसीपी सर्वर को कॉन्फ़िगर करना
- Antigravity IDE में, चैट विंडो के सबसे ऊपर दाएं कोने में मौजूद तीन बिंदुओं वाले मेन्यू (...) पर क्लिक करें.
- एमसीपी सर्वर चुनें. इसके बाद, मैनेज किए गए एमसीपी सर्वर (या रॉ कॉन्फ़िगरेशन देखें / कॉन्फ़िगरेशन फ़ाइल में बदलाव करें) पर क्लिक करें.
- mcpServers ऑब्जेक्ट में, यहां दिया गया JSON ब्लॉक जोड़ें. [YOUR_PROJECT_ID] और [YOUR_ALLOYDB_PASSWORD] को अपने असल प्रोजेक्ट आईडी और AlloyDB प्रोविज़निंग के चरण में सेव किए गए डेटाबेस के पासवर्ड से बदलना न भूलें:
"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]"
}
}
- कॉन्फ़िगरेशन फ़ाइल सेव करें
- आईडीई, एमसीपी सर्वर को अपने-आप शुरू कर देगा. आपको एमसीपी पैनल में alloydb-postgres के बगल में हरे रंग का बिंदु दिखेगा. इससे पता चलता है कि यह कनेक्ट हो गया है.
6. वाइब कोडिंग: डेटाबेस से डेटा इकट्ठा करना
अब आपका Antigravity IDE, एमसीपी सर्वर के ज़रिए आपके AlloyDB इंस्टेंस से कनेक्ट हो गया है. अब वाइब-कोडिंग शुरू की जा सकती है.
इस चरण में, आपको एआई एजेंट को यह निर्देश देना होगा कि वह बर्लिन के रेस्टोरेंट के कैटलॉग वाली स्थानीय CSV फ़ाइल को पढ़े और उसे आपके AlloyDB डेटाबेस में लोड करे.
टास्क
आपको Antigravity में एजेंट चैट का इस्तेमाल करना होगा. एजेंट, फ़ाइल को अपने-आप पढ़ेगा, डेटा टाइप का विश्लेषण करेगा, आपके डेटाबेस से कनेक्ट होगा, टेबल बनाएगा, और रिकॉर्ड डालेगा.
Antigravity में, एजेंट चैट पैनल खोलें. यह आम तौर पर एडिटर के दाईं ओर होता है.
इसके बाद, यहां दिए गए प्रॉम्प्ट को कॉपी करके चैट में चिपकाएं और Enter दबाएं:
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.
पुष्टि करना
एजेंट ये काम करेगा:
- सही स्कीमा तय करने के लिए, CSV फ़ाइल के हेडर और कुछ सैंपल लाइनें पढ़ें.
- रेस्टोरेंट टेबल बनाने के लिए, AlloyDB एमसीपी टूल को कॉल करें.
- CSV फ़ाइल से, रेस्टोरेंट के 100 रिकॉर्ड को डेटाबेस में बैच-इंसर्ट करें.
7. वाइब कोडिंग: फ़्रंटएंड को डेटाबेस से कनेक्ट करना
इस सेक्शन में, Next.js फ़्रंटएंड को लाइव AlloyDB डेटाबेस से कनेक्ट किया जाएगा. आपको एजेंट को यह निर्देश देना होगा कि वह मॉक डेटा को लाइव डेटाबेस क्वेरी से बदल दे और कीवर्ड खोज को लागू करे.
टास्क
आपको एजेंट को कनेक्शन कोड लिखने और होम पेज को अपडेट करने के लिए कहना होगा. हमने .agents/AGENTS.md में डेटाबेस के एसएसएल नियम को लागू किया है. इसलिए, एजेंट क्लाउड कनेक्शन के लिए एसएसएल का इस्तेमाल करने के लिए, कनेक्शन पूल को अपने-आप कॉन्फ़िगर कर देगा. इसके लिए, आपको अपने प्रॉम्प्ट में इसे तय करने की ज़रूरत नहीं होगी!
Antigravity Agent चैट में, इस प्रॉम्प्ट को कॉपी करके चिपकाएं और Enter दबाएं. [YOUR_PASSWORD] को अपने डेटाबेस के असल पासवर्ड से बदलें:
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.
यह एजेंट को टास्क पूरा करते समय देखता है:
- इससे pg पैकेज और उसके TypeScript टाइप (@types/pg) इंस्टॉल हो जाएंगे.
- इससे एक डेटाबेस कनेक्शन फ़ाइल (या Next.js सर्वर ऐक्शन) बनेगी और कनेक्शन पूल कॉन्फ़िगर हो जाएगा.
- यह AGENTS.md फ़ाइल में दिए गए नियमों को पढ़ेगा और नॉन-लोकल होस्ट के लिए, एसएसएल कॉन्फ़िगरेशन अपने-आप जोड़ देगा.
- यह page.tsx को फिर से लिखेगा, ताकि डेटाबेस से क्वेरी की जा सके और खोज क्वेरी के आधार पर नतीजों को फ़िल्टर किया जा सके.
पुष्टि करना
बदलावों की जांच करने के लिए, आपको फ़्रंटएंड को Cloud Run पर फिर से डिप्लॉय करना होगा. हम "सिर्फ़ क्लाउड" फ़्लो का इस्तेमाल कर रहे हैं. इसलिए, नया कोड इस तरह से शिप किया जाता है.
Antigravity में इंटिग्रेटेड टर्मिनल खोलें. पक्का करें कि आप रूट डायरेक्ट्री में हों.
डप्लॉयमेंट कमांड चलाएं. इसमें अपने AlloyDB के निजी आईपी और पासवर्ड को एनवायरमेंट वैरिएबल के तौर पर पास करें. प्लेसहोल्डर को अपनी असल वैल्यू से बदलें:
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
डिप्लॉयमेंट पूरा होने के बाद, अपने ब्राउज़र में सेवा का यूआरएल खोलें.
"Burgermeister" या "Kebab" खोजकर देखें. आपको डेटाबेस से लोड किए गए असली रेस्टोरेंट दिखने चाहिए!
ध्यान दें कि रेस्टोरेंट के कार्ड अब उनकी असली GCS इमेज दिखाते हैं. ऐसा इसलिए, क्योंकि डेटाबेस रिकॉर्ड में, हमने पहले सार्वजनिक GCS यूआरएल अपलोड किए थे!
8. वाइब कोडिंग: सिमैंटिक सर्च की सुविधा चालू करना
इस सेक्शन में, आपको अपने ऐप्लिकेशन को अपग्रेड करना होगा, ताकि वह एआई की मदद से काम करने वाली सिमैंटिक वेक्टर सर्च की सुविधा के साथ काम कर सके. उपयोगकर्ता, सिर्फ़ सटीक कीवर्ड मैच करने के बजाय, अपनी पसंद के हिसाब से खोज कर पाएंगे. जैसे, "रोमांटिक डिनर के लिए जगह" या "क्लबिंग के बाद तुरंत कुछ खाने के लिए जगह".
टास्क
आपको एजेंट को, रेस्टोरेंट टेबल पर सिमैंटिक सर्च की सुविधा चालू करने का निर्देश देना होगा. एजेंट, डेटाबेस एक्सटेंशन, एजेंट प्लैटफ़ॉर्म मॉडल रजिस्ट्रेशन, एंबेडिंग जनरेशन, और क्वेरी अपडेट को अपने-आप मैनेज करने के लिए, रिपॉज़िटरी में add-vector-search-alloydb कस्टम स्किल का इस्तेमाल करेगा.
Antigravity Agent चैट में, यहां दिए गए प्रॉम्प्ट को कॉपी करके चिपकाएं और Enter दबाएं:
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.
यह एजेंट को टास्क पूरा करते समय देखता है:
- यह AlloyDB से कनेक्ट होगा और वेक्टर (pgvector) और google_ml_integration एक्सटेंशन चालू करेगा.
- यह डेटाबेस में, एजेंट प्लैटफ़ॉर्म एम्बेडिंग मॉडल (text-embedding-004) को रजिस्टर करेगा.
- इससे, रेस्टोरेंट की टेबल में एक नया एम्बेडिंग कॉलम जुड़ जाएगा.
- यह डेटाबेस में मौजूद क्वेरी को चलाएगा, ताकि रेस्टोरेंट के बारे में दी गई सभी 100 जानकारी के लिए एम्बेडिंग जनरेट की जा सकें.
- यह फ़्रंटएंड कोड को अपडेट करेगा, ताकि उपयोगकर्ता की खोज क्वेरी के लिए एम्बेडिंग जनरेट की जा सके. साथ ही, कोसाइन डिस्टेंस ऑपरेटर (<=>) का इस्तेमाल करके, वेक्टर सिमिलैरिटी सर्च की जा सके.
पुष्टि करना
अपडेट किए गए कोड को Cloud Run पर फिर से डिप्लॉय करें.
Antigravity के इंटिग्रेटेड टर्मिनल में, डिप्लॉयमेंट कमांड चलाएं. प्लेसहोल्डर को अपनी असल वैल्यू से बदलें:
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
डिप्लॉयमेंट पूरा होने के बाद, अपने ब्राउज़र में सेवा का यूआरएल खोलें.
सामान्य भाषा में ब्यौरा डालकर, सिमैंटिक सर्च की सुविधा आज़माएं. जैसे:
- "रोमांटिक डिनर के लिए अच्छी जगह"
- "क्लबिंग के बाद हल्का-फुल्का खाना"
ध्यान दें कि यह क्वेरी के लिए सबसे ज़्यादा काम के रेस्टोरेंट (जैसे, कैफ़े क्लार्चेन्स या बर्गरमाइस्टर) के बारे में जानकारी देती है. भले ही, उनके नाम या ब्यौरे में "रोमांटिक" या "क्लबिंग" जैसे शब्द मौजूद न हों!
9. वाइब कोडिंग: डेटाबेस ऑप्टिमाइज़ेशन
आपके ऐप्लिकेशन के बढ़ने के साथ-साथ, डेटाबेस को ऑप्टिमाइज़ किया जाना चाहिए, ताकि वह बड़ी मात्रा में डेटा (100 हज़ार से ज़्यादा लाइनें) और एक साथ कई खोजों से मिलने वाले ट्रैफ़िक को मैनेज कर सके. इस आखिरी चरण में, आपको अपने एजेंट को वर्चुअल डेटाबेस एडमिन (डीबीए) के तौर पर इस्तेमाल करना होगा. इससे, डेटाबेस स्कीमा का विश्लेषण और उसे ऑप्टिमाइज़ किया जा सकेगा.
टास्क
आपको एजेंट से प्रिंसिपल डेटाबेस आर्किटेक्ट की तरह काम करने के लिए कहना होगा. साथ ही, मौजूदा स्कीमा का विश्लेषण करने और ऑप्टिमाइज़ेशन के सुझाव देने के लिए कहना होगा. सुझावों की समीक्षा करने और उन्हें स्वीकार करने के बाद, एजेंट उन्हें अपने-आप लागू करने के लिए, डेटाबेस को ऑप्टिमाइज़ करने वाली AlloyDB की कस्टम स्किल का इस्तेमाल करेगा.
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.
पुष्टि करना
एजेंट, आपके डेटाबेस स्कीमा का विश्लेषण अपने-आप करेगा. साथ ही, प्रोडक्शन को ऑप्टिमाइज़ करने के लिए दो ज़रूरी बदलाव करेगा:
- HNSW (हायरार्किकल नेविगेबल स्मॉल वर्ल्ड) इंडेक्स: यह पूरी टेबल को स्कैन किए बिना, वेक्टर सिमिलैरिटी सर्च की प्रोसेस को कई गुना तेज़ कर देता है.
- डिक्लेरेटिव सूची के हिसाब से पार्टीशन करना: इससे रेस्टोरेंट की टेबल को इलाके के हिसाब से पार्टीशन किया जाता है, ताकि उसे आसानी से बढ़ाया और रखरखाव किया जा सके.
इसके बाद, आपको तीन बुलेट पॉइंट में एक खास जानकारी मिलेगी. इसमें, प्रोडक्शन अपग्रेड के आर्किटेक्चर से जुड़े फ़ायदों के बारे में बताया जाएगा!
10. चैलेंज: समीक्षाएं और रेटिंग जोड़ें
अब आपकी बारी है, वाइब कोडिंग की अपनी स्किल को टेस्ट करने की! इस चैलेंज में, आपको Berlin Gastronomy Guide को बेहतर बनाना होगा, ताकि खरीदार समीक्षाएं लिख सकें और स्टार रेटिंग दे सकें.
टास्क
कॉपी-पेस्ट किए गए प्रॉम्प्ट का इस्तेमाल करने के बजाय, Antigravity Agent Chat में अपना प्रॉम्प्ट लिखें. इससे आपको ये सुविधाएं मिलेंगी:
- डेटाबेस स्कीमा:
restaurantsटेबल से लिंक की गई नईreviewsटेबल बनाएं. यह कुकी, रेटिंग (1 से 5 तक की पूर्णांक संख्या) और कम शब्दों में की गई टिप्पणी को सेव करती है. - डेटा जनरेट करना: डेटाबेस में मौजूद 100 रेस्टोरेंट में से हर एक के लिए, खरीदारों की तीन से चार असली समीक्षाएं जनरेट करें.
- फ़्रंटएंड इंटिग्रेशन: हर रेस्टोरेंट कार्ड पर औसत स्टार रेटिंग (जैसे,
⭐⭐⭐⭐☆) का हिसाब लगाने और उसे दिखाने के लिए, Next.js फ़्रंटएंड को अपडेट करें. - फ़िल्टर करना: पेज के सबसे ऊपर एक ड्रॉपडाउन फ़िल्टर जोड़ें, ताकि रेस्टोरेंट को उनकी रेटिंग के हिसाब से फ़िल्टर किया जा सके. उदाहरण के लिए, "सभी दिखाएं", "चार या उससे ज़्यादा स्टार", "तीन या उससे ज़्यादा स्टार".
पुष्टि करना
एजेंट के टास्क पूरा करने के बाद, अपने ऐप्लिकेशन को Cloud Run पर फिर से डिप्लॉय करें. इसके लिए, प्लेसहोल्डर को अपनी असल वैल्यू से बदलें:
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
डप्लॉयमेंट पूरा होने के बाद, अपने ब्राउज़र को रीफ़्रेश करें और पुष्टि करें कि कार्ड पर स्टार रेटिंग दिख रही है
.
11. नतीजे
इन चरणों को पूरा करने के बाद, आपने वाइब कोडिंग का इस्तेमाल करके, डेटाबेस पर आधारित अगली जनरेशन का एआई ऐप्लिकेशन बना लिया है और उसे ऑप्टिमाइज़ कर लिया है. इस सेक्शन में, लागू की गई मुख्य आर्किटेक्चरल सुविधाओं को हाइलाइट किया गया है:
एजेंटिक डेटाबेस इंटिग्रेशन (मॉडल कॉन्टेक्स्ट प्रोटोकॉल)
आम तौर पर, डेटाबेस कोड लिखने की प्रोसेस में, आपको अपने आईडीई, दस्तावेज़, और डेटाबेस क्लाइंट के बीच मैन्युअल तरीके से स्विच करना पड़ता है.
इस लैब में, इस अंतर को कम करने के लिए मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) टूलबॉक्स का इस्तेमाल किया गया. डेटाबेस स्कीमा की जांच करने और एसक्यूएल को सीधे तौर पर एआई एजेंट के टूल के तौर पर इस्तेमाल करने से, एजेंट ये काम कर सका:
- कच्चे CSV डेटा की जांच करें और डेटाबेस स्कीमा डिज़ाइन करें.
- टेबल बनाने के लिए, डीडीएल जनरेट करना और उसे लागू करना.
- Next.js ऐप्लिकेशन में कनेक्शन पूल को वायर करें.
इससे पता चलता है कि एमसीपी, डेटाबेस डेवलपमेंट को बातचीत वाली और तेज़ प्रोसेस कैसे बनाता है. साथ ही, यह डेवलपर को आईडीई में पूरा कंट्रोल देता है.
इन-डेटाबेस एआई (एजेंट प्लैटफ़ॉर्म और सिमैंटिक सर्च)
आपका ऐप्लिकेशन, Google Cloud के एजेंट प्लैटफ़ॉर्म के साथ AlloyDB के नेटिव इंटिग्रेशन का फ़ायदा उठाता है. इससे एसक्यूएल का इस्तेमाल करके, डेटाबेस में सीधे तौर पर वेक्टर एम्बेडिंग जनरेट की जा सकती हैं:
- ऑनलाइन एंबेडिंग जनरेशन: AlloyDB, डेटा को किसी बाहरी Python सेवा में भेजने के बजाय, SQL फ़ंक्शन के ज़रिए डेटाबेस में मौजूद text-embedding-004 मॉडल को कॉल करता है.
- सिमैंटिक वेक्टर सर्च: pgvector एक्सटेंशन और कोसाइन डिस्टेंस ऑपरेटर (<=>) का इस्तेमाल करके, एजेंट उपयोगकर्ता की स्वाभाविक भाषा (जैसे, "रोमांटिक डिनर") को रेस्टोरेंट के कैटलॉग में मौजूद सबसे मिलते-जुलते वेक्टर से मैच कर सकता है. इससे, कुछ ही मिलीसेकंड में सिमैंटिक तौर पर काम के नतीजे मिलते हैं.
प्रोडक्शन-ग्रेड डेटाबेस ऑप्टिमाइज़ेशन (एचएनएसडब्ल्यू और पार्टिशनिंग)
आपने वर्चुअल डीबीए के तौर पर काम किया, ताकि यह पक्का किया जा सके कि ऐप्लिकेशन को 1,00,000 से ज़्यादा लाइनों तक बढ़ाया जा सके और वह ज़्यादा ट्रैफ़िक को मैनेज कर सके. इसके लिए, आपने डेटाबेस को ऑप्टिमाइज़ करने की दो बेहतर सुविधाएं लागू कीं:
- एचएनएसडब्ल्यू (हायरार्किकल नेविगेबल स्मॉल वर्ल्ड) इंडेक्स: आपने वेक्टर कॉलम पर एचएनएसडब्ल्यू इंडेक्स बनाया है. फ़्लैट इंडेक्स के उलट, HNSW एक मल्टी-लेयर्ड ग्राफ़ बनाता है. इससे, ज़्यादा रीकॉल के साथ बहुत तेज़ी से एएनएन खोज की जा सकती है.
- डेटा के हिसाब से टेबल को सेगमेंट में बांटना: आपने रेस्टोरेंट की टेबल को आस-पास के इलाके के हिसाब से सेगमेंट में बांटा है. इससे यह पक्का होता है कि किसी खास इलाके को टारगेट करने वाली क्वेरी, पूरी टेबल के बजाय सिर्फ़ काम के पार्टीशन को स्कैन करती हैं. इससे डिस्क I/O और क्वेरी में लगने वाला समय काफ़ी कम हो जाता है.
ऐप्लिकेशन डेवलपर के तौर पर, हम अक्सर जटिल डेटाबेस कॉन्फ़िगरेशन, वेक्टर गणित, और डीप इंडेक्सिंग की रणनीतियों से बचते हैं. ऐसा इसलिए, क्योंकि इनके लिए खास तौर पर डीबीए की विशेषज्ञता की ज़रूरत होती है. एजेंटिक आईडीई के साथ वाइब कोडिंग का इस्तेमाल करके, हम इस अंतर को कम करते हैं. अब हम नैचुरल लैंग्वेज का इस्तेमाल करके, प्रोडक्शन-ग्रेड डेटाबेस ऐप्लिकेशन को आसानी से डिज़ाइन, तैयार, और ऑप्टिमाइज़ कर सकते हैं. इससे डेवलपमेंट साइकल में काफ़ी तेज़ी आई है. साथ ही, हमें सबसे ज़रूरी काम पर फ़ोकस करने का मौका मिला है: उपयोगकर्ताओं को बेहतरीन अनुभव देना.
12. क्लीन अप करें
इस लैब में इस्तेमाल की गई संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, यह तरीका अपनाएं:
- Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
- प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
- डायलॉग बॉक्स में, प्रोजेक्ट आईडी टाइप करें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.
13. बधाई हो
आपने वाइब कोडिंग का इस्तेमाल करके, डेटा पर आधारित और एआई की मदद से काम करने वाला ऐप्लिकेशन बना लिया है और उसे डिप्लॉय कर दिया है!
इस लैब में, आपको ये काम करने होंगे:
- आपने Private और Public IP, दोनों के ऐक्सेस के साथ AlloyDB डेटाबेस को प्रोविज़न किया हो.
- मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) टूलबॉक्स का इस्तेमाल करके, Antigravity आईडीई को सीधे तौर पर डेटाबेस से कनेक्ट किया गया हो.
- नैचुरल लैंग्वेज का इस्तेमाल करके, CSV कैटलॉग को शामिल किया गया. साथ ही, Next.js फ़्रंटएंड को डेटाबेस से कनेक्ट किया गया और उसे Cloud Run पर डिप्लॉय किया गया.
- वेक्टर एम्बेडिंग जनरेट करने और सिमैंटिक सर्च करने के लिए, डेटाबेस में एजेंट प्लैटफ़ॉर्म इंटिग्रेशन की सुविधा चालू की गई.
- HNSW इंडेक्सिंग और टेबल पार्टिशनिंग का इस्तेमाल करके, प्रोडक्शन स्केल के लिए आपके डेटाबेस को ऑप्टिमाइज़ करने के लिए, वर्चुअल डीबीए के तौर पर काम किया.
यह सब आपके एआई एजेंट के साथ नैचुरल तरीके से बातचीत करके किया गया. इसके लिए, आपको मैन्युअल एसक्यूएल की एक भी लाइन नहीं लिखनी पड़ी और न ही बाहरी डेटाबेस क्लाइंट खोलने पड़े!
ज़्यादा जानकारी के लिए, प्रॉडक्ट के दस्तावेज़ देखें: