अपनी लोकल वेबसाइट को एडिट करने के लिए Chrome में ChatGPT का उपयोग करें

Lizard Studio, ChatGPT को Chrome के साइड पैनल में ले आता है, जहाँ उसे आपके लाइव पेज और एक लोकल प्रोजेक्ट फ़ोल्डर तक एक्सेस मिलता है। कोई एलिमेंट चुनें, बदलाव के लिए कहें और सोर्स diff देखें — पेज इस दौरान सामने खुला रहता है। यह कनेक्शन लोकल Codex CLI का उपयोग करता है, जो Lizard Studio में ChatGPT के नाम से दिखता है।

ChatGPT कनेक्शन के साथ Lizard Studio का एक असली सेशन। Lizard Studio एक स्वतंत्र एक्सटेंशन है; OpenAI भी अपना ChatGPT ब्राउज़र एक्सटेंशन देता है। अपने लिए वर्कफ़्लो चुनने के लिए डेवलपर्स के लिए तुलना पढ़ें।

एक्सटेंशन और होस्ट मुफ़्त और ओपन सोर्स हैं। एजेंट और मॉडल का एक्सेस आपके चुने हुए AI अकाउंट से आता है; उसकी सीमाएँ और शुल्क फिर भी लागू होते हैं। Lizard Studio इंस्टॉल करें या पूरी सेटअप गाइड देखें।

ChatGPT पेज के साथ क्या कर सकता है?

आप एजेंट से DOM जाँचने, कंसोल और नेटवर्क आउटपुट पढ़ने, स्क्रीनशॉट लेने और पेज के साथ इंटरैक्ट करने के लिए कह सकते हैं। डिज़ाइन टूलबार में एलिमेंट सेलेक्टर, एनोटेशन, रूलर, गैप मापने का टूल, कलर पिकर और रिस्पॉन्सिव प्रीव्यू मिलते हैं। आपके चुने हुए फ़ोल्डर में फ़ाइलें एडिट करते समय चैट इस संदर्भ का उपयोग कर सकती है।

उदाहरण के लिए, आप एक बटन अटैच करके एजेंट से उसका सोर्स ढूँढने, उसकी स्पेसिंग बदलने और रेंडर हुआ नतीजा जाँचने के लिए कह सकते हैं। जब समस्या कई एलिमेंट से जुड़ी हो, तो आप मार्क किया हुआ स्क्रीनशॉट भी अटैच कर सकते हैं। Lizard Studio README में ब्राउज़र टूल्स और लोकल कनेक्शन के बारे में बताया गया है।

यह तब काम आता है जब किसी काम के लिए पेज का संदर्भ और कोड का एक्सेस, दोनों चाहिए। "यह बटन रैप क्यों हो रहा है?" जैसे सवाल के लिए रेंडर हुआ लेआउट और उसे बनाने वाले नियम, दोनों ज़रूरी हैं। एजेंट को चुनी हुई रो और मनचाहा नतीजा बताएँ, फिर जाँचें कि वह क्या बदलता है।

सेटअप में Codex का ज़िक्र क्यों है?

पैनल में नाम ChatGPT है; कोडिंग सेशन चलाने वाला लोकल CLI Codex है। CLI इंस्टॉल करें, साइन इन करें और लोकल होस्ट कनेक्ट करें। पैकेज का नाम, टर्मिनल कमांड और ~/.codex/config.toml जैसे पाथ में Codex नाम ही रहता है।

Lizard Studio न तो chatgpt.com को iframe में एम्बेड करता है, न ही अपनी तरफ़ से मॉडल उपयोग देता है। ChatGPT साइडबार चुनते समय यह फ़र्क मायने रखता है: लोकल सोर्स फ़ाइल एडिट करने के लिए टूल को उस फ़ाइल से कनेक्शन चाहिए, सिर्फ़ दिख रहे पेज पर बात करने की क्षमता काफ़ी नहीं है।

ChatGPT को अपने लोकल प्रोजेक्ट से कनेक्ट करें

1. Chrome Web Store से Lizard Studio जोड़ें।
2. npm install -g @openai/codex से Codex CLI इंस्टॉल करें और उसका लॉगिन पूरा करें।
3. लोकल होस्ट रजिस्टर करने के लिए npx @lizard-build/lizard-studio-host install चलाएँ।
4. अपनी वेबसाइट का डेवलपमेंट सर्वर शुरू करें और उसका URL Chrome में खोलें।
5. Lizard Studio खोलें, नई चैट शुरू करें, ChatGPT चुनें और वह फ़ोल्डर चुनें जिसमें इस वेबसाइट का कोड है।

होस्ट macOS, Windows और Linux पर चलता है। इसके लिए Node.js ज़रूरी है; ज़रूरी शर्तों और कनेक्शन की समस्याएँ हल करने के लिए सेटअप गाइड देखें।

बदलाव करने से पहले एजेंट से मौजूदा पेज का टाइटल और उसका प्रोजेक्ट फ़ोल्डर बताने को कहें। अगर इनमें से कुछ भी गलत है, तो पहले टैब या फ़ोल्डर ठीक करें। डिप्लॉय किए गए डोमेन का पेज बिल्कुल आपके लोकल वर्ज़न जैसा दिख सकता है, जबकि वह अलग फ़ाइलें सर्व कर रहा हो।

ऐसा CSS एडिट आज़माएँ जिसका नतीजा आप जाँच सकें

अपना पेज इस्तेमाल करें या विज़ुअल एडिटिंग गाइड से उदाहरण डाउनलोड करें। उस उदाहरण में एक एक्शन रो है, जिसमें 4px का गैप है। अभ्यास यह है कि सोर्स एडिट करके इसे 24px किया जाए। मोबाइल लेआउट की समस्या के लिए ChatGPT वेबसाइट एडिटिंग गाइड देखें: 390px पर बाहर निकलने वाले फ़ाइल कार्ड को ठीक करें, फिर दो चौड़ाइयों पर सोर्स और पेज जाँचें।

Selector से एक्शन रो चुनें, फिर यह भेजें:

Change the gap between the selected row's buttons to 24px.
Edit the local source file, show the diff and check the computed
gap after the page refreshes. Keep the labels, colors and the
space between other cards unchanged.

diff स्वीकार करने से पहले उसे देखें। सही बदलाव वही है जो एक्शन रो पर लागू होने वाले नियम को बदले, न कि साइट के हर बटन की स्पेसिंग बढ़ा दे। कम चौड़ाई पर भी पेज जाँचें: बटन तब भी फ़िट होने चाहिए या जैसा तय है वैसे रैप होने चाहिए।

एक बार और रीफ़्रेश करें। अगर गैप फिर से 4px हो जाता है, तो देखें कि कौन-सी फ़ाइल बदली और ब्राउज़र कौन-सा URL सर्व कर रहा है। एजेंट से computed स्टाइल दोबारा पढ़ने को कहें। लक्ष्य है फ़ाइल में छोटा-सा एडिट और ऐसा नतीजा जो दिखे और रीफ़्रेश के बाद भी बना रहे।

पेज पर अस्थायी एडिट और सोर्स एडिट

अगर आप नतीजा बनाए रखना चाहते हैं, तो साफ़ तौर पर सोर्स एडिट के लिए कहें। सिर्फ़ पेज का एक्सेस होने से आपको उस साइट के सोर्स का एक्सेस नहीं मिलता जिसके आप मालिक नहीं हैं। आप किसी रेफ़रेंस साइट को जाँच सकते हैं, लेकिन स्थायी बदलावों के लिए उसके प्रोजेक्ट का एक्सेस और रिलीज़ प्रोसेस चाहिए।

दोनों एजेंटों में क्या अंतर है?

Claude Code और ChatGPT, दोनों Lizard Studio में ब्राउज़र कनेक्शन और डिज़ाइन संदर्भ का उपयोग कर सकते हैं। वह एजेंट चुनें जिसका अकाउंट और प्रोजेक्ट सेटअप आप पहले से इस्तेमाल करते हैं।

कुछ चैट फ़ीचर अलग हैं: README के अनुसार Claude Code में Remote Control और पुराने मैसेज एडिट करने की सुविधा है, और ChatGPT पैनल में ये फ़ीचर उपलब्ध नहीं हैं। किसी खास चैट कंट्रोल के आधार पर चुनने से पहले मौजूदा फ़ीचर नोट्स देखें। इंटरफ़ेस के और विकल्पों के लिए Claude Code GUI तुलना पढ़ें।

आम सवाल

क्या मैं अपना मौजूदा ChatGPT अकाउंट इस्तेमाल कर सकता हूँ?

Codex CLI के सपोर्ट किए गए साइन-इन फ़्लो से कनेक्ट करें। आपके अकाउंट में चुने गए एजेंट का एक्सेस होना चाहिए; Lizard Studio न तो सब्सक्रिप्शन देता है, न ही प्रोवाइडर की सीमाएँ बदलता है।

क्या मुझे Lizard अकाउंट चाहिए?

नहीं। आप अपना एजेंट और लोकल फ़ोल्डर कनेक्ट करते हैं। Lizard अकाउंट का एक्सटेंशन के इस्तेमाल से कोई लेना-देना नहीं है।

क्या मेरा कोड मेरे कंप्यूटर पर ही रहता है?

आपकी प्रोजेक्ट फ़ाइलें अपने लोकल फ़ोल्डर में रहती हैं, और एक्सटेंशन व होस्ट लोकल रूप से चलते हैं। क्लाउड मॉडल को जाने वाली रिक्वेस्ट में कोड और पेज का संदर्भ शामिल हो सकता है। Lizard Studio कोई चैट सर्वर नहीं चलाता; रिक्वेस्ट को आपका चुना हुआ प्रोवाइडर प्रोसेस करता है। डेटा कैसे जाता है, यह जानने के लिए गोपनीयता नीति पढ़ें।

क्या यह ड्रैग-एंड-ड्रॉप पेज बिल्डर की तरह काम करता है?

डॉक्यूमेंटेशन में बताया गया वर्कफ़्लो यह है कि आप पेज पर कुछ चुनें या एनोटेट करें और एजेंट से कोड एडिट करवाएँ। टूलबार डिज़ाइन को जाँचने और मापने में मदद करता है। अपने प्रोजेक्ट के लिए यह वर्कफ़्लो चुनने से पहले विज़ुअल एडिटिंग गाइड से इसे आज़माकर देखें।