कोर्स
Google ADK के साथ AI एजेंट बनाना
1 घंटा
7.6K
Google Antigravity एक एजेंट-चालित IDE है जो Gemini 3 जैसे शक्तिशाली मॉडलों को एजेंट-प्रथम वर्कफ़्लो के साथ जोड़ता है। टूल्स, टर्मिनल्स और ब्राउज़र सेशंस को मैन्युअल रूप से कॉन्फ़िगर करने के बजाय, आप एक AI एजेंट के साथ सहयोग करते हैं जो कार्यों के रूप में काम की योजना बना सकता है, कमांड चला सकता है, कोड संपादित कर सकता है और यहां तक कि आपके ब्राउज़र के साथ इंटरैक्ट कर आपकी ऐप का परीक्षण और दस्तावेज़ीकरण भी कर सकता है।
इस ट्यूटोरियल में, मैं आपको Google Antigravity का उपयोग करके एक कार्यशील पर्सनल फ़ाइनेंस रिस्क डैशबोर्ड बनाना सिखाऊंगा। आप देखेंगे कि कैसे:
- एजेंट-असिस्टेड डेवलपमेंट के साथ Antigravity को इंस्टॉल और कॉन्फ़िगर करें
- एजेंट को Next.js, Tailwind और shadcn/ui एप्लिकेशन सेट अप करने के लिए प्रॉम्प्ट करें
- ऑटो-जनरेटेड इम्प्लीमेंटेशन प्लान की समीक्षा और परिष्करण करें
- Antigravity एक्सटेंशन का उपयोग करके एजेंट को ब्राउज़र में आपकी ऐप टेस्ट करने दें
- डार्क/लाइट मोड और कंप्यूटर यूज़ के साथ डीबगिंग जैसी फीचर्स पर इटरेट करें
अंत तक, आपके पास एक मल्टी-पेज डैशबोर्ड होगा जो Savings, Bonds, Index Funds और Crypto के लिए जोखिम स्तरों का विज़ुअलाइज़ेशन करता है, इंटरैक्टिव कंट्रोल्स और एक आधुनिक फिनटेक UI के साथ—वह भी एक ही प्रॉम्प्ट से बनाया गया। मैं यह भी सुझाऊंगा कि आप हमारा Gemini 3 API गाइड और Gemini 3 Flash ट्यूटोरियल देखें।
अस्वीकरण: यह ट्यूटोरियल केवल शैक्षिक उद्देश्यों के लिए है और वित्तीय सलाह नहीं है; निवेश संबंधी निर्णय लेने से पहले हमेशा अपना स्वयं का शोध करें या किसी योग्य वित्तीय पेशेवर से परामर्श लें।
Google Antigravity क्या है?
Google Antigravity एक एजेंट-प्रथम डेवलपमेंट प्लेटफ़ॉर्म है जो आपके IDE को AI एजेंट्स के लिए मिशन कंट्रोल में बदल देता है। मूल रूप से, यह एजेंट्स को आपके एडिटर, टर्मिनल और ब्राउज़र पर समकालिक नियंत्रण देता है, ताकि वे एक ही जगह से काम की योजना बना सकें, कोड बदल सकें, कमांड चला सकें और एंड-टू-एंड व्यवहार सत्यापित कर सकें।
स्क्रिप्ट्स और टूल्स को मैन्युअल रूप से जोड़ने के बजाय, आप वांछित परिणाम का वर्णन करते हैं और Antigravity के एजेंट्स भारी काम संभाल लेते हैं। वे कर सकते हैं:
- उच्च-स्तरीय अनुरोध को टास्क-लेवल प्लान या इम्प्लीमेंटेशन चेकलिस्ट में बदलना
- प्रोजेक्ट बनाने, डिपेंडेंसी इंस्टॉल करने और डेव सर्वर शुरू करने के लिए टर्मिनल कमांड चलाना
- आपके वर्कस्पेस में लेआउट फ़ाइलों से लेकर साझा कॉम्पोनेंट्स तक कोड संपादित करना
- एक ब्राउज़र एक्सटेंशन का उपयोग करके आपकी ऐप खोलना, फ़्लोज़ पर क्लिक करना, और आर्टिफैक्ट्स के रूप में स्क्रीनशॉट्स या वॉकथ्रू रिकॉर्डिंग कैप्चर करना।
Antigravity Google के Gemini 3 मॉडलों के इर्द-गिर्द बनाया गया है, लेकिन Claude Sonnet 4.5 और GPT-OSS जैसे अन्य प्रदाताओं का भी समर्थन करता है। इसमें दो मुख्य सतहें आती हैं, यानी, एक एडिटर व्यू जो IDE जैसा लगता है (यदि आपने कभी Cursor या VS Code इस्तेमाल किया है), और एक एजेंट मैनेजर व्यू जो लंबी अवधि और मल्टी-वर्कस्पेस कार्यों के लिए मिशन कंट्रोल की तरह कार्य करता है। साथ मिलकर, वे एजेंट्स को इम्प्लीमेंटेशन विवरण सँभालने देते हुए आपको टास्क-ओरिएंटेड स्तर पर काम करना आसान बनाते हैं।
Google Antigravity डेमो: फ़ाइनेंस रिस्क डैशबोर्ड बनाना
इस खंड में, हम Google Antigravity के साथ एक पर्सनल फ़ाइनेंस रिस्क डैशबोर्ड बनाएंगे। एजेंट एक ही नैचुरल-लैंग्वेज प्रॉम्प्ट को एक Next.js प्रोजेक्ट में बदलेगा जो विभिन्न निवेश उत्पादों और उनके जोखिम प्रोफाइल को मॉडल करता है।
अंत तक, आपके पास होगा:
- Savings, Bonds, Index Funds और Crypto के लिए एक मल्टी-पेज डैशबोर्ड
- टाइम होराइजन के लिए इंटरैक्टिव स्लाइडर्स
- एक परिष्कृत डार्क/लाइट मोड UI
- यह समझ कि Antigravity एजेंट्स किसी फ़ीचर की योजना, इम्प्लीमेंटेशन, टेस्टिंग और इटरेशन कैसे करते हैं
कदम 1: Google Antigravity इंस्टॉल करना
आइए आधिकारिक वेबसाइट से Google Antigravity डाउनलोड करके और अपनी मशीन की स्पेसिफ़िकेशंस के अनुसार इंस्टॉलर चुनकर शुरू करते हैं।
"Download for MacOS" (या आपके OS) पर क्लिक करें, और यह आपको प्लेटफ़ॉर्म चयन स्क्रीन पर ले जाएगा जहां आप अपनी मशीन के लिए उपयुक्त बाइनरी चुनकर इंस्टॉलेशन पूरा कर सकते हैं।
इस ट्यूटोरियल के लिए, मैंने इसे Apple Silicon वाले Mac पर चलाया, लेकिन किसी भी मशीन पर इंटरफ़ेस अलग नहीं होगा।
डाउनलोड होने के बाद, Google Antigravity को किसी अन्य एप्लिकेशन की तरह सेट अप करें और लॉन्च करें।
कदम 2: पहली बार सेटअप
पहली बार लॉन्च पर, Antigravity आपको एक ऑनबोर्डिंग विज़ार्ड के माध्यम से ले जाता है।
कदम 2.1: सेटअप फ़्लो चुनें
यदि आप Cursor या VS Code के पावर यूज़र हैं और Antigravity सेट करने के लिए उसकी सेटिंग्स का उपयोग करना चाहते हैं, तो उसी अनुसार विकल्प चुनें। हालांकि, मुझे नई शुरुआत पसंद है, इसलिए Start fresh चुनें और Next पर क्लिक करें।
कदम 2.2: Antigravity Agent सेट करें
अगले चरण में, आपको एजेंट उपयोग के बारे में एक स्क्रीन दिखाई देगी। इस ट्यूटोरियल के लिए, चुनें:
- Agent-assisted development (सुझावित): यह विकल्प एजेंट को अधिकांश काम करने देता है, लेकिन आपको बीच-बीच में समीक्षा के लिए लूप में रखता है ताकि आप इसकी योजना और बदलावों को देखते चलें।
- Terminal execution (Auto): यह एजेंट को सुरक्षित, रूटीन टर्मिनल कमांड्स बिना हर बार पूछे ऑटोमैटिक रूप से चलाने की अनुमति देता है।
- Review policy (Agent decides): एजेंट को चुनने दें कि कब उसे मानव की स्पष्ट समीक्षा चाहिए और कब वह स्वयं आगे बढ़ सकता है।
- ब्राउज़र के लिए डिफ़ॉल्ट अलाउलिस्ट का उपयोग करें: यह एजेंट की ब्राउज़र एक्सेस को सुरक्षा हेतु पूर्व-स्वीकृत सुरक्षित डोमेन्स और कार्रवाइयों के सेट तक सीमित करता है।
सेटअप पूरा करने के लिए Next पर क्लिक करें।
सेटअप पूरा होने पर, अगला चरण हमारे प्रयोग के लिए एक वर्कस्पेस बनाना है।
कदम 3: नया वर्कस्पेस बनाना
सेटअप पूरा होते ही, आप Antigravity होम स्क्रीन पर पहुंचेंगे। आगे बढ़ने के लिए, Open Folder पर क्लिक करें और इस प्रोजेक्ट के लिए एक नया डायरेक्टरी बनाएँ/चुनें। उदाहरण: ~/Antigravity/personal-finance-dashboard। यह फ़ोल्डर आपका Next.js ऐप बन जाएगा।
दाईं ओर, आपको एजेंट पैनल दिखना चाहिए जहां आप मॉडल चुन सकते हैं और प्रॉम्प्ट भेज सकते हैं।
कदम 4: ऐप बनाएं
वर्कस्पेस खुल जाने पर, एजेंट पैनल में एक मॉडल चुनें (उदाहरण के लिए, Gemini 3 Pro या Claude Sonnet 4.5, या GPT OSS 120B)। फिर, निम्न प्रॉम्प्ट पेस्ट करें:
Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page.
For every product, display risk level, volatility, and projected returns (with a slider for time horizon),
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboardनोट: इस ट्यूटोरियल को लिखते समय, मैंने Gemini 3 Pro (low) मॉडल के साथ कोशिश की, लेकिन इसमें कुछ त्रुटियाँ आईं। हालांकि, आप अपने उपयोग-केस के अनुसार कोई भी मॉडल आज़मा सकते हैं।
आप देखेंगे कि एजेंट कुछ इस तरह प्रतिक्रिया देगा:
तुरंत बाद, Antigravity प्रोजेक्ट को स्कैफ़ोल्ड करने के लिए एक टर्मिनल कमांड प्रस्तावित करेगा। बस Accept पर क्लिक करें ताकि एजेंट कमांड चला सके और ऐप के लिए एक संपूर्ण चेकलिस्ट बनाने हेतु कुछ बैकग्राउंड चरण चला सके।
नीचे साइड टर्मिनल में बैकग्राउंड स्टेप्स चलने का स्क्रीनशॉट है, जो डिपेंडेंसी इंस्टॉलेशन से शुरू होता है।
आप इसे लॉग्स देखते हुए चलने दे सकते हैं।
कदम 5: टास्क चेकलिस्ट आर्टिफैक्ट की समीक्षा
स्कैफ़ोल्डिंग पूरा होने के बाद, एजेंट पूरे प्रोजेक्ट के लिए एक टास्क चेकलिस्ट आर्टिफैक्ट जेनरेट करता है।
प्रत्येक अनुभाग में ऐसे चेकबॉक्स होते हैं:
- TypeScript और Tailwind CSS के साथ Next.js प्रोजेक्ट इनिशियलाइज़ करें
- shadcn/ui कॉम्पोनेंट लाइब्रेरी सेट अप करें
- Savings/Bonds/Index Funds/Crypto पेज जोखिम प्रोफाइल के साथ
- डार्क मोड, एनीमेशन और रेस्पॉन्सिव लेआउट इम्प्लीमेंट करें
- नेविगेशन और स्लाइडर फ़ंक्शनैलिटी का परीक्षण करें
एक बार यह सूची तैयार हो जाए, एजेंट फिर एक-एक करके प्रत्येक कार्य को कवर करना शुरू कर देता है। इस बिंदु पर, आप एक्सप्लोरर साइडबार खोलकर देख सकते हैं कि एजेंट ने क्या बनाया है:
अब आपके पास इस एप्लिकेशन के लिए कस्टमाइज़ करने हेतु एक मानक Next.js, Tailwind और shadcn/ui फ़ाइल संरचना तैयार है।
कदम 6: इम्प्लीमेंटेशन प्लान की समीक्षा
चेकलिस्ट के साथ-साथ, Antigravity एक अधिक विस्तृत इम्प्लीमेंटेशन प्लान आर्टिफैक्ट भी जेनरेट करता है:
आमतौर पर User Review Required सेक्शन में शामिल होता है:
- डिज़ाइन अप्रोच: इसमें ऐप्लिकेशन का डार्क मोड, ग्रेडिएंट्स, एनीमेशन और रेस्पॉन्सिव डिज़ाइन संबंधित जानकारी शामिल है।
- डेटा मॉडल: इसमें हमारी फ़ाइनेंशियल रिस्क ऐप्लिकेशन के लिए सेविंग्स, बॉन्ड्स, इंडेक्स फंड्स और क्रिप्टो जैसे सभी जोखिम मेट्रिक्स होते हैं।
- कोर एप्लिकेशन स्ट्रक्चर: यह बताता है कि ग्लोबल स्टाइल्स, टाइपोग्राफी, मेटाडेटा, होमपेज और डार्क-मोड थीम सेट करने के लिए मुख्य लेआउट फ़ाइलों में कैसे बदलाव किए जाएंगे।
- प्रोडक्ट पेजेज: इसमें समर्पित Next.js पेजेज जैसे
/savings,/bonds,/index-funds,/cryptoऔर प्रत्येक पर दिखने वाली विशेष जोखिम, वोलैटिलिटी और रिटर्न जानकारी सूचीबद्ध है। - शेयर्ड कॉम्पोनेंट्स: इसमें रीयूज़ेबल UI कॉम्पोनेंट्स जैसे नेविगेशन बार, रिस्क प्रोफाइल कार्ड्स, रिटर्न्स कैलकुलेटर और प्रोडक्ट ओवरव्यू कार्ड्स शामिल होते हैं जिन्हें होमपेज और प्रोडक्ट पेजेज में उपयोग किया जाता है।
- यूटिलिटीज़ और टाइप्स: इसमें
lib/financial-data.tsमें TypeScript यूटिलिटीज़ शामिल हैं जो प्रोडक्ट डेटा, रिस्क प्रोफाइल्स, प्रोजेक्टेड रिटर्न्स कैलकुलेशन और पैसे व प्रतिशत फ़ॉर्मैट करने के लिए हेल्पर फ़ंक्शंस रखते हैं। - वेरिफ़िकेशन प्लान: इसमें यह बताया जाता है कि ऐप का परीक्षण कैसे होगा—डेव सर्वर शुरू करना, प्रत्येक पेज और स्लाइडर को मैन्युअल रूप से जांचना, डार्क मोड और रेस्पॉन्सिवनेस मान्य करना, और ब्राउज़र एजेंट का उपयोग कर स्क्रीनशॉट्स के साथ पूरा वॉकथ्रू रिकॉर्ड करना।
यदि हम अधिक वास्तविक डेटा चाहते हैं, तो हम जोखिम संख्याओं को समायोजित कर सकते हैं या अतिरिक्त आवश्यकताएँ जोड़ सकते हैं। अंत में, यदि आप चाहते हैं कि एजेंट कोर्स एडजस्ट करे, तो टास्क/इम्प्लीमेंटेशन प्लान आर्टिफैक्ट्स में टिप्पणियाँ जोड़ें।
जब योजना ठीक लगे, तो इम्प्लीमेंटेशन प्लान टैब में Proceed पर क्लिक करें। ऐसा करते ही, एजेंट src/ डायरेक्टरी के अंतर्गत सोर्स फ़ाइलों को संशोधित और बनाना शुरू कर देगा। यह Savings, Bonds, Index Funds और Crypto के लिए अलग-अलग पेज बनाएगा।
इसी दौरान, यह कार्ड्स, स्लाइडर्स और चार्ट्स के लिए रीयूज़ेबल कॉम्पोनेंट्स बनाएगा, और पूरे ऐप में Tailwind और shadcn/ui स्टाइलिंग लागू करेगा।
अंततः, आपको प्रत्येक कोड परिवर्तन के लिए नए बैकग्राउंड स्टेप्स और प्रोग्रेस अपडेट्स दिखेंगे।
कदम 7: टेस्टिंग और वेरिफ़िकेशन
इम्प्लीमेंटेशन पूरा होने पर, Antigravity टेस्टिंग और वेरिफ़िकेशन चरण में चला जाता है। आपको एक नया प्रोग्रेस आइटम दिखेगा जहां Antigravity Setup या Deny बटन के माध्यम से ब्राउज़र का उपयोग करने के लिए कहेगा। बस Setup पर क्लिक करें और आगे बढ़ें।
एजेंट के ब्राउज़र से इंटरैक्ट करने से पहले, आपको आधिकारिक एक्सटेंशन की आवश्यकता होगी।
Chrome Web Store लिस्टिंग पर जाएँ और Add to Chrome पर क्लिक करें।
इंस्टॉलेशन के बाद, जब एजेंट ब्राउज़र को कंट्रोल कर रहा होगा, तो नीचे दिखाए अनुसार स्क्रीन के चारों ओर एक ग्लो दिखाई देगा:
यह ग्लो इंगित करता है कि Antigravity एजेंट सक्रिय रूप से ब्राउज़र का उपयोग कर रहा है, यानी वेरिफ़िकेशन स्टेप के हिस्से के रूप में क्लिक कर रहा है, स्क्रॉल कर रहा है और ऐप टेस्ट कर रहा है।
कदम 8: वॉकथ्रू आर्टिफैक्ट की समीक्षा
टेस्टिंग पूरी होने पर, आपको अंतिम प्रोग्रेस अपडेट्स सारांश इस प्रकार दिखेगा:
आमतौर पर वॉकथ्रू आर्टिफैक्ट में शामिल होता है:
- प्रत्येक पेज के स्क्रीनशॉट्स
- एजेंट द्वारा ऐप में क्लिक करने का रिकॉर्ड किया गया ब्राउज़र सेशन
- उसने क्या टेस्ट किया इसका विवरणात्मक वर्णन (उदाहरण: “रियल टाइम में प्रोजेक्टेड रिटर्न्स अपडेट होने के लिए Savings पेज के स्लाइडर को वेरिफ़ाई किया”)
यदि सब कुछ ठीक लगता है, तो बदलाव लागू करने के लिए Accept all पर क्लिक करें।
यह है हमारी अंतिम ऐप:
कदम 9: डैशबोर्ड संपादित करना
अब UI पर इटरेट करते हैं। मान लें कि आप डैशबोर्ड हेडर में डार्क/लाइट मोड टॉगल चाहते हैं और प्रत्येक पेज के लिए कुछ चार्ट जोड़ना चाहते हैं। टास्क या इम्प्लीमेंटेशन प्लान में, या सीधे एजेंट पैनल में, आप यह अनुरोध कर सकते हैं:
Antigravity यह करेगा:
- लेआउट कॉम्पोनेंट्स को अपडेट करेगा ताकि थीम टॉगल शामिल हो (संभावित रूप से shadcn/ui की थीम यूटिलिटीज़ का उपयोग)
- चार्ट कॉम्पोनेंट्स जोड़ना, बदलना या हटाना
- ऐप को फिर से चलाना और ब्राउज़र में टॉगल का परीक्षण करना
अब Submit पर क्लिक करें, और हमारी पिछली टिप्पणी और यह टिप्पणी दोनों लागू कर दी जाएँगी।
कदम 10: त्रुटियों की समीक्षा और डीबगिंग
व्यवहार में, आप देख सकते हैं कि रिव्यूज़ अक्सर कई त्रुटियों की ओर ले जाते हैं—शायद मॉडल के कारण—लेकिन Antigravity फिर भी Computer Use के साथ इस पर काम करता रहता है।
यहां तक कि जब एजेंट त्रुटियों का सामना करता है, तो वह ये कर सकता है:
- टर्मिनल में त्रुटि संदेश पढ़ना
- ब्राउज़र में ऐप खोलकर समस्या को दोहराना
- टूटी हुई स्थिति के स्क्रीनशॉट्स और प्लेबैक रिकॉर्डिंग लेना
- उन विज़ुअल संकेतों और लॉग्स का उपयोग करके बग को ठीक करना
आप वॉकथ्रू खोलकर या डीबगिंग स्टेप्स के लिए नए प्रोग्रेस अपडेट्स देखकर साथ-साथ फॉलो कर सकते हैं।
इस बिंदु पर, आपने:
- एक एजेंट को पूरा Next.js + Tailwind + shadcn/ui ऐप स्कैफ़ोल्ड करने के लिए प्रॉम्प्ट किया
- एक संरचित इम्प्लीमेंटेशन प्लान की समीक्षा और संपादन किया
- Antigravity को सेटअप, कोडिंग, टेस्टिंग और ब्राउज़र वेरिफ़िकेशन संभालने दिया
- टिप्पणियों और अतिरिक्त प्रॉम्प्ट्स के साथ UI पर इटरेशन किया
- कंप्यूटर यूज़ और स्क्रीनशॉट्स के माध्यम से एजेंट को मुद्दों को डीबग करते देखा
अब हमारी अंतिम ऐप समीक्षा के लिए तैयार है।
कदम 11: अंतिम परिणाम
टॉगल और लेआउट पर इटरेट करने के बाद, आपके पास अंतिम एप्लिकेशन होगा जहां चार्ट्स हटा दिए गए हैं, और लाइट/डार्क मोड टॉगल पूरे डैशबोर्ड में काम करता है।
डार्क मोड:
लाइट मोड:
आप नीचे दिए वीडियो में हमारे डैशबोर्ड को एक्शन में देख सकते हैं: