एजेंटिक पाइपलाइन और Antigravity का इस्तेमाल करके, बड़े पैमाने पर लेगसी सिस्टम को आधुनिक बनाना

1. आधुनिक बनाने की प्रोसेस को सही दिशा देना

यह कोडलैब, Antigravity और मल्टी-एजेंट ऑर्केस्ट्रेशन की मदद से, मॉडर्नाइज़ेशन को कैसे ऑटोमेट करें लेख पर आधारित है. इसमें आपको प्रैक्टिकल जानकारी मिलेगी. हम यहां Node.js फ़्रेमवर्क को बदलने के क्लासिक तरीके का इस्तेमाल कर रहे हैं. हालांकि, यहां बताए गए मुख्य डिज़ाइन पैटर्न, डायरेक्ट्री स्ट्रक्चर, और एजेंटिक ऑर्केस्ट्रेशन प्रोसेस, किसी भी भाषा के लिए काम करती हैं. साथ ही, इनका इस्तेमाल किसी भी लेगसी मॉडर्नाइज़ेशन प्रोजेक्ट में किया जा सकता है.

सामान्य कोडिंग असिस्टेंट सिर्फ़ एक फ़ाइल में लाइनों को अपने-आप पूरा करते हैं. हालांकि, इस कोडलैब में आपको Google Antigravity की एजेंट-फ़र्स्ट सुविधाओं का इस्तेमाल करने का तरीका बताया जाएगा. इससे, एआई के खास सब-एजेंट की अपने-आप काम करने वाली टीमों को व्यवस्थित किया जा सकता है. ये एजेंट, लेगसी कोडबेस को इंडिपेंडेंट तरीके से रिवर्स-इंजीनियर कर सकते हैं. साथ ही, टेस्ट के लिए मुश्किल सुइट लिख सकते हैं, मॉडर्न आर्किटेक्चर तैयार कर सकते हैं, और रिफ़्लेक्शन लूप का इस्तेमाल करके कंपाइलर से जुड़ी अपनी गड़बड़ियों को ठीक कर सकते हैं. इन सभी कामों के दौरान, आपके पास हाई-लेवल आर्किटेक्ट के तौर पर पूरा कंट्रोल होता है.

आपको क्या सीखने को मिलेगा

• वर्कफ़्लो को मैप करना: यह तय करना कि सेटअप से जुड़े टास्क को सही तरीके से कैसे कैटगरी में बांटा जाए और उन्हें जटिल अनुमानित रीफ़ैक्टरिंग की चुनौतियों से कैसे अलग किया जाए.
• स्किल्स का आर्किटेक्चर: प्रोग्रेसिव डिसक्लोज़र और YAML राउटिंग मेटाडेटा का इस्तेमाल करके, एक्सटेंड किए जा सकने वाले Agent Skills Pack को कैसे स्ट्रक्चर किया जाए.
• डिज़ाइन पैटर्न को व्यवस्थित करना: राऊटर, प्लान-एंड-एक्ज़ीक्यूट, और रिफ़्लेक्शन डिज़ाइन पैटर्न को एक साथ इस्तेमाल करके, बड़े पैमाने पर रिफ़ैक्टरिंग कैसे की जाए.
• इनपुट/आउटपुट के लिए तय किए गए नियम: रिवर्स-इंजीनियरिंग और टारगेट स्कैफ़ोल्डिंग की कई चरणों वाली पाइपलाइन में, इनपुट/स्किल/आउटपुट की सीमाओं को कैसे लागू करें.
• समानता की पुष्टि करना: Chrome वेब ब्राउज़र में, एक साथ समानता की जांच करने के लिए, Antigravity के Browser Subagent का इस्तेमाल कैसे करें.

आपको क्या बनाना है

आपको पूरी तरह से अपने-आप काम करने वाली ग्रीनफ़ील्ड रिफ़ैक्टरिंग पाइपलाइन को व्यवस्थित करना होगा. यह पाइपलाइन, आइकॉनिक और पुराने लेगसी Express और Mongoose CRUD मोनोलिथ ("madhums demo") को लेती है. इसके बाद, इसे शुरू से ही अपने-आप फिर से बनाती है. यह पाइपलाइन, MongoDB पर आधारित Next.js App Router ऐप्लिकेशन में, टाइपिंग की सुविधा के साथ काम करती है. साथ ही, इसमें Zod की पुष्टि करने की सुविधा और ShadCN के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट भी शामिल होते हैं.

आपको किन चीज़ों की ज़रूरत होगी

• Google Antigravity IDE को स्थानीय तौर पर इंस्टॉल किया गया हो. यह antigravity.google पर उपलब्ध है.
  • आपके डिवाइस पर Node.js (v18+) इंस्टॉल होना चाहिए.
• ऑटोमेटेड यूज़र इंटरफ़ेस (यूआई) की पुष्टि के लिए, Chrome ब्राउज़र.
• यह ओपन-सोर्स modernizing-expressjs डेमोंस्ट्रेशन मोनोरिपो का क्लोन है.

2. मॉडर्नाइज़ेशन एनवायरमेंट सेट अप करना

पुराने लेगसी कोडबेस पर ऑटोनॉमस एजेंट को काम करने की अनुमति देने से पहले, हमें एक साफ़-सुथरा और बेहद स्थिर मोनोरिपो एनवायरमेंट बनाना होगा. एआई असिस्टेंट को साफ़ बेसलाइन देने से, यह पक्का किया जा सकता है कि वह अच्छी क्वालिटी का मॉडर्न कोड जनरेट करने पर पूरी तरह से फ़ोकस करे. इसके बजाय, वह दशकों पुराने पैकेज की कमियों या कंपाइलर के मेल न खाने की समस्याओं को ठीक करने में टोकन बर्बाद न करे.

लेगसी Express और आधुनिक Next.js आर्किटेक्चर की मैपिंग

कॉम्पोनेंट	लेगसी स्टैक	मॉडर्न रिप्लेसमेंट	वजह
आर्किटेक्चर	Express Monolith	Next.js App Router	ऑप्टिमाइज़ की गई रेंडरिंग और React Server Components (RSC) की परफ़ॉर्मेंस के लिए, लॉजिक को सर्वर कॉम्पोनेंट में अलग करना.
Data Logic	Mongoose (ODM)	MongoDB + Zod	टाइप-सेफ़ Zod स्कीमा और रॉ ड्राइवर परफ़ॉर्मेंस के लिए, इंप्लिसिट ओआरएम हुक को एक्सप्लिसिट से स्वैप किया गया है.
भाषा	CommonJS / JavaScript	TypeScript (ESM)	कंपाइल-टाइम की सुरक्षा को लागू करना और मॉडर्न मॉड्यूल स्टैंडर्ड पर स्विच करना.
फ़्रंटएंड	Pug/EJS (सर्वर व्यू)	ShadCN UI + Tailwind	सख्त टेंप्लेट से बदलकर, कंपोज़ेबल, ऐक्सेस किया जा सकने वाला, और यूटिलिटी-फ़र्स्ट डिज़ाइन सिस्टम पर स्विच करना.
Auth	Passport.js	NextAuth	सेशन मैनेजमेंट को आधुनिक बनाया गया है. इसमें Edge और मौजूदा सेवा देने वाली कंपनियों के लिए, पहले से मौजूद सहायता शामिल है.
सुरक्षा	मैन्युअल मिडलवेयर	Zod (सटीक पुष्टि)	पूरे स्टैक में डेटा की पुष्टि करने के लिए, "एकमात्र भरोसेमंद सोर्स" लागू करना.

मॉडर्नाइज़ेशन हब को शुरू करना

हमारी पहली कार्रवाई, अलग किए गए मोनोरिपो स्ट्रक्चर को क्लोन करना है. इससे, सिर्फ़ पढ़ने के लिए उपलब्ध लेगसी कोड को हमारी नई ग्रीनफ़ील्ड टारगेट रिपॉज़िटरी से अलग किया जाता है. इससे यह पक्का होता है कि ओरिजनल ऐप्लिकेशन में गलती से कोई बदलाव न हो.

Antigravity टर्मिनल खोलें और सेटअप करने के लिए ये कमांड चलाएं:

git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
cd devrel-demos/other/modernizing-expressjs

क्लोन होने के बाद, modernizing-expressjs फ़ोल्डर को सीधे Antigravity IDE एक्सप्लोरर में खोलें. आपको यह अलग लेआउट दिखेगा:

/modernizing-expressjs/
├── .agents/            # Skills metadata and checklists
│   └── skills/
├── docs/               # Target directory for reverse-engineered markdown artifacts
├── legacy-app/         # Read-only root of the legacy Express monolith
├── modern-app/         # Greenfield target repository for the Next.js rewrite
├── GEMINI.md           # Project-wide agent constitution
└── README.md           # Companion documentation

अहम जानकारी: "डिपेंडेंसी रैबिट होल" से बचें. अपने एजेंट को legacy-app/ डायरेक्ट्री में npm install चलाने के लिए मना करें. अगर दस साल पुराने किसी पैकेज में C++ कंपाइलर से जुड़ी गड़बड़ी होती है, तो बहुत ज़्यादा मददगार ऑटोनॉमस एजेंट, रिफ़ैक्टरिंग की आपकी पूरी चेकलिस्ट को छोड़ सकता है. ऐसा वह लोकल बिल्ड चेन को "ठीक" करने के लिए करता है. इससे, लेगसी रनटाइम पर आपका टोकन बजट खत्म हो जाता है. हालांकि, ग्रीनफ़ील्ड रीराइट के लिए यह ज़रूरी नहीं है. लेगसी डिपेंडेंसी को अनइंस्टॉल न करें.

इस छोटे वीडियो में, यह दिखाया गया है कि अपने मोनोरिपो एनवायरमेंट को कैसे तैयार किया जाए और उसे कैसे अलग किया जाए:

3. आर्किटेक्ट एआई एजेंट के स्किल पैक और पैटर्न

किसी मज़बूत एजेंट स्किल को तैयार करना, स्टैंडर्ड चैट प्रॉम्प्ट लिखने से अलग होता है. स्किल पैक तैयार करते समय, आपको एक मॉड्यूलर सॉफ़्टवेयर डिज़ाइन करना होता है. इसे एलएलएम अपने-आप लागू करेगा. एजेंट को भ्रमित होने या "कॉन्टेक्स्ट विंडो टैक्स" का सामना करने से रोकने के लिए, हम ओपन-सोर्स ग्रीनफ़ील्ड ऑर्केस्ट्रेशन स्किल पैक को एक एक्सटेंसिबल ऑथरिंग टेंप्लेट के तौर पर पेश करते हैं. यह दो सिद्धांतों पर आधारित है: संक्षिप्तता और प्रोग्रेसिव डिसक्लोज़र.

YAML मेटाडेटा राउटिंग का इस्तेमाल करके, धीरे-धीरे जानकारी ज़ाहिर करना

हम सभी टारगेट नियमों को एक ही सिस्टम प्रॉम्प्ट में शामिल करने के बजाय, निर्देशों को अलग-अलग डायरेक्ट्री में बांटते हैं. हर स्किल डायरेक्ट्री में एक SKILL.md एंट्रीपॉइंट होता है. इसे YAML राउटिंग फ़्रंटमैटर ब्लॉक में रैप किया जाता है.

.agents/skills/orchestrating-greenfield-migration/SKILL.md खोलें और राऊटर के मेटाडेटा की जांच करें:

---
name: orchestrating-greenfield-migration
description: >
  Manages the end-to-end modernization of legacy Express
  monoliths into Next.js architectures. Orchestrates subagents
  for auditing, scaffolding, and verification. Use when starting
  or managing a greenfield rewrite project.
---

सलाह: यहां दो अहम ऑथरिंग पैटर्न पर ध्यान दें:

1. जेरंड का नामकरण: हम जेरंड वर्ब फ़ॉर्म > (orchestrating-greenfield-migration) का इस्तेमाल, कार्रवाई को साफ़ तौर पर बताने के लिए करते हैं.
2. ट्रिगर करने के लिए साफ़ तौर पर बताया गया कॉन्टेक्स्ट: description फ़ील्ड में, मॉडल को साफ़ तौर पर यह निर्देश दिया जाता है कि स्किल को कब चालू करना है ("ग्रीनफ़ील्ड रीराइट प्रोजेक्ट शुरू करते या मैनेज करते समय इसका इस्तेमाल करें"). अगर आपकी जानकारी अस्पष्ट है, तो प्लैटफ़ॉर्म का राउटिंग लॉजिक आपके सब-एजेंट को चालू नहीं कर पाएगा.

प्लान बनाने और उसे लागू करने के पैटर्न को हार्डकोड करना

किसी ऑटोनॉमस एजेंट को भटकने, दिलचस्प लेगसी मिडलवेयर से ध्यान भटकने या डेटाबेस को बिना अनुमति के स्वैप करने से रोकने के लिए, हम स्टैंडर्ड ओपन-एंडेड प्लानिंग को ओवरराइड करते हैं. इसके लिए, हम प्लान बनाने और उसे लागू करने के पैटर्न को सीधे तौर पर निर्देशों में हार्डकोड करते हैं.

मुख्य ऑर्केस्ट्रेटर में एम्बेड की गई, लिटरल मार्कडाउन चेकलिस्ट की जांच करें:

### Phase 1: The AI audit (reverse engineering)
Dispatch subagents to produce specifications while identifying project-specific test scenarios.

*   [ ] Init `docs/verification/Verification_Plan.md` to create baseline template.
*   [ ] Run `auditing-data-models` -> Append Data Integrity Stress-Tests.
*   [ ] Run `auditing-api-contracts` -> Append API Parity & Edge Case Probes.
*   [ ] Run `auditing-business-logic` -> Append Logic & Authorization Stress-Tests.
*   [ ] Run `auditing-ui-archeology` -> Append Interaction & Layout Targets.

ध्यान दें: यह ऑर्केस्ट्रेटर स्किल का सिर्फ़ एक स्निपेट है. पूरे टेक्स्ट के लिए, क्लोन की गई अपनी रिपॉज़िटरी में जाकर स्किल की समीक्षा करें.

वर्कफ़्लो को इनलाइन स्किल रेफ़रंस के साथ साफ़ तौर पर चेकलिस्ट के तौर पर फ़ॉर्मैट करके, एजेंट इस रोडमैप को अपने टास्क प्लान में कॉपी करता है. इससे यह "सिर्फ़ लागू करें" मोड में लॉक हो जाता है. यह मोड, बॉक्स को व्यवस्थित तरीके से चेक करता है और ज़रूरत पड़ने पर ही खास सब-एजेंट को शुरू करता है.

4. पहला फ़ेज़ — लेगसी मोनोलिथ को रिवर्स-इंजीनियर करना (ऑडिट)

हम अपनी मुख्य ऑर्केस्ट्रेशन सीक्वेंस को ट्रिगर करने के लिए तैयार हैं! हमारे पहले मुख्य चरण में, लेगसी मोनोलिथ से कारोबार के नियम, डेटा स्कीमा, और एपीआई पेलोड निकाले जाते हैं. साथ ही, उन्हें साफ़-सुथरे मार्कडाउन आर्टफ़ैक्ट के तौर पर सेव किया जाता है. इससे, एक दशक से चली आ रही ज़रूरी तकनीकी समस्याओं को हल करने में मदद मिलती है.

ऑटोनॉमस रिफ़ैक्टरिंग की सुविधा को ट्रिगर करना

Antigravity Agent Manager के चैट पैनल में, यहां दिया गया कस्टम स्लैश कमांड टाइप करें और Enter दबाएं:

/orchestrating-greenfield-migration

अब अपने टर्मिनल कंसोल पर नज़र रखें. आपको मुख्य एजेंट को सिस्टम प्रॉम्प्ट पढ़ते हुए दिखाया जाएगा. साथ ही, वह आपके अनुरोध को ऑर्केस्ट्रेटर के मेटाडेटा से मैच करेगा, पांच चरणों वाली चेकलिस्ट का आउटपुट देगा, और तुरंत "ऑडिटर" सब-एजेंट को पैरलल में भेजना शुरू कर देगा.

इनपुट/स्किल/आउटपुट से जुड़ा कानूनी समझौता

पहले चरण के दौरान, एजेंट रिवर्स-इंजीनियरिंग की एक ऐसी पाइपलाइन को लागू करता है जो इन निर्देशों वाले कॉन्ट्रैक्ट से बंधी होती है:

इस्तेमाल किए गए इनपुट: legacy-app/ में मौजूद, सिर्फ़ पढ़ने के लिए उपलब्ध लेगसी सोर्स कोड फ़ाइलें.

इस्तेमाल की गई स्किल:

स्किल	ब्यौरा
auditing-api-contracts	यह कुकी, सटीक JSON रिस्पॉन्स एनवलप को दस्तावेज़ में शामिल करने के लिए, लेगसी रास्तों को ट्रैक करती है.
auditing-data-models	यह Mongoose स्कीमा को अलग-अलग हिस्सों में बांटता है, ताकि उनसे संबंध, ज़रूरी फ़ील्ड, और डिफ़ॉल्ट वैल्यू निकाली जा सकें.
auditing-business-logic	इसमें इंप्लिसिट साइड इफ़ेक्ट, Passport auth फ़्लो, और मिडलवेयर के नियमों के बारे में बताया गया है.
auditing-ui-archeology	यह कुकी, लेगसी Pug टेंप्लेट को स्कैन करती है, ताकि "यूज़र इंटरफ़ेस (यूआई) इंटेंट" (नेवबार, फ़ॉर्म) को मैप किया जा सके.

जनरेट किए गए आर्टफ़ैक्ट: सीधे आपके docs/ फ़ोल्डर में जनरेट किए गए, ज़्यादा स्ट्रक्चर्ड Markdown स्पेसिफ़िकेशन

आर्टफ़ैक्ट	ब्यौरा
docs/API_Contracts.md	इस दस्तावेज़ में, Express के लेगसी ऐप्लिकेशन के रिवर्स-इंजीनियर किए गए एपीआई के बारे में जानकारी दी गई है. इस कैटलॉग का इस्तेमाल करके, यह पक्का करें कि Next.js के मॉडर्न ऐप्लिकेशन में रास्तों को फिर से बनाते समय, दोनों वर्शन में समानता हो.
docs/Business_Logic_Rules.md	इस दस्तावेज़ में, पुष्टि (AuthN), अनुमति (AuthZ), ग्लोबल मिडलवेयर, सेशन मैनेजमेंट, और साइड इफ़ेक्ट से जुड़े, Express ऐप्लिकेशन के पुष्टि किए गए व्यवहार, कॉन्फ़िगरेशन, और सख्त नियमों को लॉग किया जाता है.
docs/Data_Models.md	इस दस्तावेज़ में, legacy-app/app/models/ के लेगसी Mongoose स्कीमा का पूरा विश्लेषण किया गया है. साथ ही, इसमें नेटिव MongoDB और Zod का इस्तेमाल करके, टाइप-सेफ़ मॉडर्न डेटा ऐक्सेस लेयर के लिए ब्लूप्रिंट दिया गया है.
docs/UI_Inventory.md	इस दस्तावेज़ में, legacy-app में लेगसी Pug पर आधारित यूज़र इंटरफ़ेस का विश्लेषण किया गया है. साथ ही, legacy-app में कॉम्पोनेंट पर आधारित आधुनिक Next.js फ़्रंटएंड आर्किटेक्चर का ब्लूप्रिंट दिया गया है.modern-app

इस लाइव टर्मिनल कैप्चर को देखें. इसमें, ऑटोनॉमस रिवर्स-इंजीनियरिंग ऑडिट को काम करते हुए दिखाया गया है:

5. दूसरा और तीसरा चरण — टीडीडी हार्नेस और ग्रीनफ़ील्ड बैकएंड स्केफ़ोल्डिंग

लेगसी ऐप्लिकेशन की पूरी तरह से ऑडिट और दस्तावेज़ तैयार हो जाने के बाद, मुख्य ऑर्केस्ट्रेटर, मॉडर्न टारगेट बैकएंड को तैयार करने के लिए आगे बढ़ता है. इस चरण में, हमारे टूलकिट में सबसे बेहतरीन एजेंटिक डिज़ाइन पैटर्न पेश किया जाता है: क्लोज़्ड-लूप रिफ़्लेक्शन (सेल्फ़-रिफ़्लेक्शन), जो टेस्ट-ड्रिवन डेवलपमेंट (टीडीडी) के सिद्धांतों पर आधारित है.

रिफ़्लेक्शन लूप का इस्तेमाल करके, कोड में अपने-आप सुधार होने की सुविधा को बेहतर बनाना

मॉडर्न कोड लिखना आसान है. हालांकि, यह पक्का करना ज़रूरी है कि वह पूरी तरह से कंपाइल हो और पुष्टि करने की ज़रूरी शर्तों को पूरा करता हो. इसके लिए, क्लोज़्ड-लूप इवैलुएशन की ज़रूरत होती है. ऑर्केस्ट्रेटर इस काम को अपने-आप करता है. इसके लिए, वह टेस्ट के आउटपुट को सीधे तौर पर सब-एजेंट की कॉन्टेक्स्ट विंडो में भेजता है:

1. दूसरा चरण (टीडीडी सेटअप): ऑर्केस्ट्रेटर, generating-api-tests सब-एजेंट को शुरू करता है. यह docs/API_Contracts.md को पढ़ता है और Vitest इंटिग्रेशन टेस्ट सुइट लिखता है. इसमें ज़रूरी एचटीटीपी स्टेटस कोड और JSON पेलोड शामिल होते हैं. टीडीडी में उम्मीद के मुताबिक, ये टेस्ट शुरू में फ़ेल हो जाते हैं.
2. तीसरा चरण (बैकएंड स्केफ़ोल्डिंग): स्केफ़ोल्डिंग सब-एजेंट, आधुनिक Next.js रूट हैंडलर और Zod के सख्त पुष्टि करने वाले स्कीमा लिखना शुरू करते हैं.
3. सेल्फ़-करेक्शन लूप: जब डिटरमिनिस्टिक Vitest हार्नेस, नए कोड का आकलन करता है और गड़बड़ी दिखाता है (जैसे, अनुमानित 422 पुष्टि करने वाली गड़बड़ी के बजाय 500 गड़बड़ी दिखती है), तो एजेंट क्रैश नहीं होता. इससे, ऑब्जेक्टिव की गड़बड़ी के आउटपुट पर असर पड़ता है. साथ ही, यह टारगेट रूट हैंडलर को फिर से खोलता है, Zod स्कीमा के पेलोड स्ट्रक्चर को ठीक करता है, और टेस्ट को फिर से चलाता है. यह तब तक अपने-आप काम करता रहता है, जब तक कि इसे 0 का एग्ज़िट कोड नहीं मिल जाता.

इनपुट/स्किल/आउटपुट से जुड़ा कानूनी समझौता

इस्तेमाल किए गए इनपुट: रिवर्स-इंजीनियर किए गए स्पेसिफ़िकेशन आर्टफ़ैक्ट (docs/API_Contracts.md, docs/Data_Models.md).

इस्तेमाल की गई स्किल:

स्किल	ब्यौरा
generating-api-tests	यह कुकी, Vitest इंटिग्रेशन सुइट जनरेट करती है.
scaffolding-nextjs-foundation	यह कुकी, Next.js App Router के लेआउट को शुरू करती है.
scaffolding-test-foundation	यह विकल्प, लोकल Vitest टेस्ट रनर एनवायरमेंट को कॉन्फ़िगर करता है.
scaffolding-data-layer	यह लाइब्रेरी, पुराने Mongoose मॉडल को MongoDB + Zod स्कीमा में बदलती है.
scaffolding-api-routes	यह Express रास्तों को Next.js रूट हैंडलर और मॉड्यूलर रूट गार्ड में फिर से बनाता है.

जनरेट किए गए आउटपुट: Vitest की शुरुआती फ़ेल हुई सुइट, पूरी तरह से टाइप किए गए Zod स्कीमा, काम करने वाले Next.js रूट हैंडलर, और साफ़ तौर पर पास हुई टेस्ट सुइट के एक्ज़ीक्यूशन.

टीडीडी टेस्ट हार्नेस के अपने-आप जनरेट होने की प्रोसेस देखें:

टारगेट बैकएंड को बेहतर बनाने के लिए, रिफ़्लेक्शन लूप की अपने-आप ठीक होने वाली सुविधा को रीयल-टाइम में काम करते हुए देखें:

6. चौथा चरण — मॉडर्न फ़्रंटएंड (यूआई कॉम्पोनेंट) तैयार करना

बैकएंड की पुष्टि करने वाली लेयर पूरी तरह से सुरक्षित है और इंटिग्रेशन टेस्ट पास कर चुकी है. इसलिए, मुख्य ऑर्केस्ट्रेटर, विज़ुअल प्रज़ेंटेशन को बेहतर बनाने के लिए कॉन्टेक्स्ट को बदलता है. सर्वर पर रेंडर किए गए टेंप्लेट को हटा दिया गया है. इसके बजाय, सुलभता और इस्तेमाल में आसानी को ध्यान में रखकर डिज़ाइन किए गए कॉम्पोनेंट सिस्टम का इस्तेमाल किया गया है.

यूज़र इंटरफ़ेस (यूआई) के इंटेंट को कंपोज़ेबल व्यू में बदलना

सीएसएस को लाइन-दर-लाइन ट्रांसलेट करने के बजाय, फ़्रंटएंड सब-एजेंट, निकाली गई "यूज़र इंटरफ़ेस (यूआई) इंटेंट" इन्वेंट्री को पढ़ता है. साथ ही, स्ट्रक्चरल एलिमेंट को सीधे तौर पर, हाई-फ़िडेलिटी वाले आधुनिक वर्शन पर मैप करता है.

इनपुट/स्किल/आउटपुट से जुड़ा कानूनी समझौता

इस्तेमाल किए गए इनपुट: रिवर्स-इंजीनियर किया गया फ़्रंटएंड इन्वेंट्री आर्टफ़ैक्ट (docs/UI_Inventory.md).

इस्तेमाल की गई स्किल:

स्किल	ब्यौरा
scaffolding-ui-components	यह UI_Component_Inventory.md आर्टफ़ैक्ट को ShadCN + Tailwind के आधुनिक कॉम्पोनेंट और पूरी तरह से स्कैफ़ोल्ड किए गए Next.js पेजों में बदलता है.

जनरेट किए गए आउटपुट: प्रोडक्शन के लिए तैयार Next.js फ़्रंटएंड पेज. इन्हें ShadCN के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट और Tailwind CSS के यूटिलिटी लेआउट का इस्तेमाल करके बनाया गया है.

मॉडर्न फ़्रंटएंड व्यू लेयर को अपने-आप जनरेट होते हुए देखें:

7. पांचवां चरण — पुष्टि करना और विरोधियों के लिए ऑडिट करना

हमारी रीफ़ैक्टरिंग पाइपलाइन, क्वालिटी की जांच के साथ खत्म होती है. मुख्य ऑर्केस्ट्रेटर, स्टैटिक कोड विश्लेषण से लेकर ऐक्टिव रनटाइम एनवायरमेंट टेस्टिंग तक की प्रोसेस को पूरा करता है. साथ ही, नए टारगेट ऐप्लिकेशन को तोड़ने की कोशिश करता है, ताकि यह साबित किया जा सके कि यह लेगसी बेसलाइन के साथ पूरी तरह से काम करता है.

दो टैब टेस्ट और ब्राउज़र ऐक्चुएशन को लागू करना

पुष्टि करने के चरण में, Antigravity की इंटिग्रेटेड विज़ुअल और डीओएम क्षमताओं का इस्तेमाल किया जाता है. इससे, पुष्टि अपने-आप हो जाती है. इसके लिए, आपको फ़ॉर्म पर मैन्युअल तरीके से क्लिक करने की ज़रूरत नहीं होती:

1. दोनों वर्शन में एक जैसी सुविधाएं: auditing-parity सब-एजेंट, लोकल रनर को लेगसी Express मोनोलिथ और आधुनिक Next.js ऐप्लिकेशन, दोनों को एक साथ शुरू करने का निर्देश देता है. इससे यह पुष्टि की जाती है कि दोनों वर्शन में विज़ुअल प्रज़ेंटेशन और डेटा रेंडरिंग एक जैसी है.
2. सुरक्षा से जुड़ी जांच के लिए, विरोधियों की तरह काम करना: ऑर्केस्ट्रेटर, adversarial-verification सब-एजेंट को शुरू करता है. यह Antigravity Browser Subagent को लॉन्च करता है. यह खास एजेंट, ब्राउज़र को सीधे तौर पर शुरू करता है. जैसे, इनपुट में टाइप करना, फ़ॉर्म सबमिट करना, और सुरक्षा से जुड़ी समस्याओं, सेशन कुकी के काम न करने या हैंडल न किए गए एज केस की जांच करना.
3. ऑडिट ट्रेल जनरेट करना: ब्राउज़र सब-एजेंट, अपने सेशन की कार्रवाइयों के WebP वीडियो कैप्चर को अपने-आप रिकॉर्ड करता है. साथ ही, उन्हें सीधे तौर पर माइग्रेशन की फ़ाइनल रिपोर्ट में "काम के सबूत" के तौर पर अटैच करता है.

इनपुट/स्किल/आउटपुट से जुड़ा कानूनी समझौता

इस्तेमाल किए गए इनपुट: लेगसी और मॉडर्न, दोनों तरह के ऐप्लिकेशन, लोकल रनटाइम एनवायरमेंट में साथ-साथ चल रहे हैं.

इस्तेमाल की गई स्किल:

स्किल	ब्यौरा
auditing-parity	यह कुकी, रनटाइम के दौरान साथ-साथ पुष्टि करने वाली जांचों को लागू करती है.
adversarial-verification	यह कुकी, ऑटोमेटेड ब्राउज़र ऐक्चुएशन का इस्तेमाल करके, लॉजिक से जुड़ी गड़बड़ियों और फ़ंक्शनल रिग्रेशन की जांच करती है.

जनरेट किए गए आउटपुट: फ़ंक्शनल पैरिटी ऑडिट ट्रेल की पूरी जानकारी के साथ-साथ रिकॉर्ड किए गए ब्राउज़र सेशन के वीडियो, जिनसे यह पुष्टि होती है कि सभी काम सही तरीके से हुए हैं.

ऑटोमेटेड ब्राउज़र सब-एजेंट को मॉडर्न किए गए ऐप्लिकेशन की पुष्टि करते हुए देखें:

8. डेटा दूसरी जगह भेजने के बाद ऐप्लिकेशन या गेम, प्रोडक्शन के लिए तैयार है या नहीं और अगले चरण

बधाई हो! आपने एक बहुत ही ऐडवांस, ऑटोनॉमस एजेंटिक रिफ़ैक्टरिंग पाइपलाइन को सफलतापूर्वक तैयार किया है. इससे, लेगसी मोनोलिथ को नए सिरे से मॉडर्न बनाया जा सकता है. साथ ही, इससे प्रोग्रेसिव डिसक्लोज़र, प्लान-एंड-एक्ज़ीक्यूट चेकलिस्ट, और सेल्फ़-हीलिंग रिफ़्लेक्शन लूप जैसी यूनिवर्सल और ट्रांसफ़रेबल स्किल सीखी जा सकती हैं.

प्रोडक्शन डिप्लॉयमेंट के लिए तैयारी करना

आपके Next.js ऐप्लिकेशन की पूरी तरह से पुष्टि हो गई है और उसकी ऑडिटिंग हो गई है. अब आप प्रोडक्शन इंटिग्रेशन के लिए तैयार हैं. इंडस्ट्री के स्टैंडर्ड के मुताबिक, यहां दिए गए अगले चरण पूरे करें:

• इंक्रीमेंटल राउटिंग: ट्रैफ़िक को लेगसी Express ऐप्लिकेशन से मॉडर्न टारगेट पर धीरे-धीरे राउट करने के लिए, रिवर्स प्रॉक्सी (जैसे, स्ट्रैंगलर फ़िग पैटर्न) डिप्लॉय करें.
• एसईओ को बनाए रखना: मौजूदा डोमेन अथॉरिटी को बनाए रखने के लिए, लेगसी एक्सप्रेस रास्तों को Next.js के स्थायी रीडायरेक्ट (_redirects.yaml) पर मैप करें.
• डेटा स्ट्रीमिंग: स्टैटिक डेटाबेस सीडिंग से लाइव प्रोडक्शन डेटा स्ट्रीमिंग पर स्विच करें. यह डेटा स्ट्रीमिंग, रनटाइम के दौरान Zod के सख्त स्कीमा का इस्तेमाल करके सुरक्षित तरीके से पुष्टि करती है.
• ऑब्ज़र्वेबिलिटी: ज़रूरी लॉगिंग यूटिलिटी को स्ट्रक्चर्ड OpenTelemetry फ़्रेमवर्क से बदलें.

आधुनिक बनाने से जुड़ी अपनी विशेषज्ञता को और बेहतर बनाएं

इस पाइपलाइन को चलाने वाले पूरे कोडबेस, कस्टम स्किल के निर्देशों, और पूरी तरह से सैद्धांतिक तर्क के बारे में जानने के लिए, मुख्य लेख को पूरा पढ़ें:

• Antigravity और मल्टी-एजेंट ऑर्केस्ट्रेशन की मदद से, मॉडर्नाइज़ेशन की प्रोसेस को अपने-आप होने के लिए कैसे सेट अप करें

Agentic Builder कम्यूनिटी में शामिल हों

हमें उम्मीद है कि आपको रिफ़ैक्टरिंग के इन यूनिवर्सल पैटर्न और एजेंटिक पाइपलाइन से मदद मिली होगी. आने वाले समय में ओपन-सोर्स स्किल पैक, तकनीकी कॉन्टेंट, और कॉन्फ़्रेंस में होने वाली बातचीत के बारे में अपडेट पाने के लिए, मुझे इन प्रोफ़ेशनल चैनलों पर फ़ॉलो करें:

• LinkedIn पर फ़ॉलो करें: linkedin.com/in/jamesor
• X (Twitter) पर फ़ॉलो करें: x.com/JamesOR

हमें अपने विचार बताएं

आपको एजेंटिक ऑर्केस्ट्रेशन के बारे में सबसे ज़्यादा क्या पसंद है?

Adversarial Browser Verification Autonomous Refactoring Loops Extensible Skills Architecture Multi-Agent Orchestration Universal Language Agnosticism

Google Antigravity का इस्तेमाल करने के लिए धन्यवाद!