ChatGPT के साथ Vibe Coding: Canvas, Codex और ChatGPT से ऐप बनाना

आप ChatGPT के साथ तीन तरीकों से vibe coding कर सकते हैं। चैट में छोटा ऐप माँगें और canvas में उसका प्रीव्यू देखें; असली कोडबेस के काम OpenAI के कोडिंग एजेंट Codex को सौंपें; या Mythex जैसा AI ऐप बिल्डर जोड़ें ताकि ChatGPT डेटाबेस वाला पूरा ऐप बना, होस्ट और पब्लिश कर सके। पहला एक-पेज के टूल के लिए सबसे तेज़ है, दूसरा डेवलपर्स के लिए ठीक है, और तीसरा आपको ChatGPT छोड़े बिना लॉगिन और डेटा वाला लाइव ऐप देता है।

यहाँ बताया गया है कि हर एक कैसे काम करता है, हर एक के लिए एक प्रॉम्प्ट, और हर एक कहाँ रुक जाता है। इस शब्द की पृष्ठभूमि जानने के लिए vibe coding क्या है पढ़ें।

विकल्प 1: ChatGPT चैट और canvas

जल्दी के टूल के लिए बस माँग लें। ChatGPT कोड लिखता है, और canvas में वह सादे HTML और React पेज दिखा सकता है ताकि आप क्लिक करके देखें और बदलाव माँगें।

एक-पेज का टिप कैलकुलेटर लिखो जिसमें बिल की राशि, टिप प्रतिशत (10, 15, 20 के बटन और एक कस्टम फ़ील्ड) और लोगों की संख्या के इनपुट हों। टाइप करते समय टिप और प्रति व्यक्ति राशि अपडेट होकर दिखे। फ़ोन पर साफ़ दिखे।

इनके लिए अच्छा: कैलकुलेटर, सादे गेम, लैंडिंग पेज के ड्राफ़्ट और सीखना। "इस फ़ाइल को ऐसे समझाओ जैसे मैं कोडिंग में नया हूँ" कहें और आप जल्दी सीखेंगे।

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

कॉपी-पेस्ट vibe coding

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

विकल्प 2: असली कोडबेस के लिए Codex

Codex सॉफ़्टवेयर के काम के लिए OpenAI का एजेंट है। आप उसे सादी भाषा में काम देते हैं, और वह रिपॉज़िटरी पर काम करता है: कोड पढ़ता है, कई फ़ाइलों में बदलाव करता है, कमांड और टेस्ट चलाता है, और नतीजा आपकी समीक्षा के लिए देता है। OpenAI इसे ChatGPT में, कमांड-लाइन टूल के रूप में और एडिटर एक्सटेंशन के रूप में देता है; कौन-से प्लान में यह शामिल है और मौजूदा सीमाएँ क्या हैं, इसके लिए OpenAI की साइट देखें।

इसके लिए काम-शैली का प्रॉम्प्ट सबसे ठीक रहता है:

इस रिपो में Orders पेज पर CSV एक्सपोर्ट बटन जोड़ो। वह मौजूदा फ़िल्टर किए गए ऑर्डर को date, customer, total और status कॉलम के साथ एक्सपोर्ट करे। एक्सपोर्ट फ़ंक्शन के लिए टेस्ट जोड़ो और टेस्ट सूट चलाओ।

इनके लिए अच्छा: डेवलपर्स और तकनीकी फ़ाउंडर्स, जिनके पास पहले से प्रोजेक्ट है और जो चाहते हैं कि एजेंट उनकी सूची से पूरे काम उठा ले। यह आपके स्टैक और आपकी परंपराओं के साथ चलता है।

जो आपको अब भी सँभालना है: ऐप कहाँ चलता है, डेटाबेस, सीक्रेट्स, डिप्लॉयमेंट और डोमेन। Codex कोड बदलता है; वह होस्ट नहीं है।

Codex और Mythex साथ में

Codex MCP सर्वर से भी जुड़ सकता है, जिनमें Mythex का भी शामिल है। Codex में https://mcp.mythex.ai/mcp को कस्टम MCP सर्वर के रूप में जोड़ें, Mythex पर एक्सेस मंज़ूर करें, और Codex अपने क्लाउड सैंडबॉक्स में Mythex प्रोजेक्ट पर काम कर सकता है, जबकि प्रीव्यू, डेटाबेस और पब्लिशिंग Mythex सँभालता है। हमारी पोस्ट Claude, Cursor या Codex से Mythex ऐप बनाना इसे चरण-दर-चरण समझाती है।

विकल्प 3: Mythex के साथ ChatGPT से पूरा ऐप बनाएँ

अगर आप ChatGPT की बातचीत में रहकर असली, होस्टेड ऐप तक पहुँचना चाहते हैं, तो Mythex जोड़ें। Mythex ChatGPT के अंदर ऐप के रूप में काम करता है: ChatGPT, Mythex के टूल से MCP पर बात करता है, जो वह खुला प्रोटोकॉल है जिससे असिस्टेंट कहीं और होस्ट किए गए टूल इस्तेमाल कर सकते हैं (MCP क्या है)।

कनेक्ट होने के बाद ChatGPT Mythex प्रोजेक्ट बना सकता है, प्राइवेट क्लाउड सैंडबॉक्स में कोड लिख सकता है, लाइव प्रीव्यू शुरू कर सकता है, डेटाबेस और फ़ाइल स्टोरेज जोड़ सकता है और ऐप को पब्लिक URL पर पब्लिश कर सकता है। नतीजे लिंक के साथ आते हैं ताकि आप प्रोजेक्ट को Mythex में खोलकर प्रीव्यू देख सकें।

कनेक्ट कैसे करें

1. Mythex में Account settings खोलें और MCP पता कॉपी करें।
2. ChatGPT में ऐप्स या कनेक्टर सेटिंग से उसी पते के साथ Mythex जोड़ें। ChatGPT के मेन्यू समय-समय पर बदलते हैं, इसलिए नाम अलग हों तो ऐप जोड़ने के लिए OpenAI का हेल्प पेज देखें।
3. एक Mythex पेज खुलता है: साइन इन करें और Allow access चुनें। कोई की (key) पेस्ट नहीं करनी होती।
4. बातचीत शुरू करें और अपनी माँग में Mythex का नाम लें।

कनेक्ट करना किसी भी Mythex प्लान पर चलता है। सैंडबॉक्स टूल, यानी बनाना, प्रीव्यू और पब्लिश करना, के लिए Mythex Pro ($25 प्रति माह) चाहिए, और सैंडबॉक्स समय और होस्टिंग आपके Mythex क्रेडिट से आते हैं। आपका ChatGPT इस्तेमाल आपके OpenAI प्लान पर ही रहता है।

आज़माने के लिए पहला प्रॉम्प्ट

Mythex इस्तेमाल करके मेरे लिए जॉब एप्लिकेशन ट्रैकर बनाओ। मैं कंपनी, रोल, लिंक, आवेदन की तारीख, स्टेटस (applied, interview, offer, rejected) और नोट्स के साथ आवेदन जोड़ूँ। स्टेटस के हिसाब से बोर्ड दिखाओ जिसमें मैं कार्ड ड्रैग कर सकूँ, और प्रति सप्ताह आवेदनों का सादा चार्ट। सब कुछ डेटाबेस में सेव करो और लॉगिन से सुरक्षित रखो। प्रीव्यू शुरू करो और मुझे लिंक दो।

फिर, एक संदेश में एक बदलाव:

Mythex प्रोजेक्ट में हर आवेदन में रिमाइंडर तारीख जोड़ो और जिन कार्ड की रिमाइंडर तारीख आज है या निकल चुकी है उन्हें हाइलाइट करो।

इसे पब्लिश करो और मुझे लाइव URL भेजो।

इनके लिए अच्छा: वे लोग जो पहले से ChatGPT में योजना बनाते और सोचते हैं और नतीजा लाइव चाहते हैं, ऐसे डेटा के साथ जो बना रहे, होस्टिंग सीखे बिना। क्योंकि यह एक सामान्य Mythex प्रोजेक्ट है, आप किसी भी समय Mythex चैट में आगे का काम कर सकते हैं।

आप जो बना रहे हैं उसके लिए कौन-सा विकल्प

ChatGPT में काम करने वाली प्रॉम्प्टिंग आदतें

• जिस टूल को इस्तेमाल करवाना हो उसका नाम लें। "Mythex इस्तेमाल करके…" साफ़ करता है कि माँग आपके प्रोजेक्ट के लिए है, सामान्य जवाब के लिए नहीं।
• एक संदेश में एक बदलाव। बदलावों की लंबी सूची से साइड इफ़ेक्ट की लंबी सूची बनती है।
• बड़े क़दमों से पहले प्लान माँगें। "कुछ भी बदलने से पहले बताओ कि क्या बदलोगे और मेरी मंज़ूरी का इंतज़ार करो।"
• सटीक एरर पेस्ट करें। पूरा एरर टेक्स्ट किसी भी विवरण से ज़्यादा क़ीमती है।
• पूछें क्या बदला। "अपने पिछले तीन बदलावों का सादे शब्दों में सार दो" तब आपको दिशा में रखता है जब आप कोड नहीं पढ़ रहे होते।

और भी हमारी vibe coding प्रॉम्प्ट चीट शीट में हैं।

इसे सुरक्षित रखें

• असली पासवर्ड या API कीज़ ChatGPT की बातचीत में कभी पेस्ट न करें। अगर आपके ऐप को की चाहिए, तो उसे प्रोजेक्ट के सीक्रेट्स में रखें। Mythex के टूल सिर्फ़ सीक्रेट के नाम बताते हैं, मान कभी नहीं।
• पब्लिश करने से पहले जाँचें कि यूज़र्स एक-दूसरे का डेटा नहीं देख सकते, और कोई की ब्राउज़र में चलने वाले कोड में नहीं पहुँची। हमारी गाइड क्या vibe coding सुरक्षित है? जाँचों को पेस्ट करने लायक प्रॉम्प्ट के साथ सूचीबद्ध करती है।

Claude भी इस्तेमाल करते हैं? साथी गाइड Claude और Claude Code के साथ vibe coding इसे कवर करती है। मॉडल-दर-मॉडल नज़र के लिए ऐप बनाने के लिए ChatGPT बनाम Claude बनाम Gemini देखें।

सवाल