In this समीक्षा में, मैं Vercel के v0 का हैंड्स-ऑन परीक्षण शुरूआती न्यूनतम प्रॉम्प्ट से लेकर अंतिम तैनाती तक विस्तार से बता रहा हूँ। आप देखेंगे कि AI कोड लिखने में कहाँ उत्कृष्ट है और मुझे कहाँ कुछ तकनीकी दीवारों का सामना करना पड़ा, जैसे सख्त प्रॉम्प्ट सीमाएँ और वे रहस्यमयी कंसोल लॉग्स।
v0 क्या है?
v0 एक AI-संचालित ऐप बिल्डर है। बॉक्स को स्क्रीन पर खींचने या सैकड़ों लाइनों का मैन्युअल कोड लिखने की बजाय, आप एक AI असिस्टेंट से चैट करके अपना एप्लिकेशन बनाते हैं।
यदि आपने ChatGPT का उपयोग किया है, तो इंटरफ़ेस आपको परिचित लगेगा, लेकिन टेक्स्ट जवाबों के बजाय, v0 आपको एक पूर्ण कार्यात्मक वेब इंटरफ़ेस तुरंत दाईं ओर दिखाता है, जिसे आप इंटरैक्ट भी कर सकते हैं।
यह टूल एक नए सॉफ़्टवेयर प्रोजेक्ट की लंबी, थकाऊ सेटअप प्रक्रिया को समाप्त करने के लिए बनाया गया है। आमतौर पर, यदि आप गृहस्वामियों के लिए मरम्मत अनुरोध पोर्टल बनाना चाहते, तो आपको मैन्युअल रूप से पेज डिजाइन करना, डेटाबेस सेटअप करना और दोनों को कनेक्ट करना पड़ता।
v0 इन बाधाओं को आपकी वर्णन को इंटरप्रेट करके और आपके लिए रीयल-टाइम में कोड लिखकर संभालता है।
सामान्य तरीके जिनसे लोग v0 का उपयोग करते हैं:
• व्यावसायिक डेटा ट्रैक करने वाले कार्यात्मक डैशबोर्ड बनाना।
• लॉगिन स्क्रीन और सर्विस फॉर्म वाले कस्टमर पोर्टल बनाना।
• कस्टम, इंटरैक्टिव फीचर्स वाली लैंडिंग पेज़ लॉन्च करना।
• वास्तविक उपयोगकर्ताओं के साथ जल्दी परीक्षण करने के लिए नए ऐप आइडियाज का प्रोटोटाइप तैयार करना।
जहाँ Wix या Squarespace जैसे टूल आपको सख्त टेम्प्लेट में लॉक कर देते हैं, वहीं Bubble जैसी प्लेटफ़ॉर्म की सीखने की कर्व ऊँची होती है, v0 का अनूठा लाभ यह है कि यह सिर्फ विजुअल मॉकअप नहीं देता; यह वास्तविक React और Next.js कोड जनरेट करता है। वही चीजें जो पेशेवर डेवलपर्स उपयोग करते हैं।
यह किसके लिए है?
v0 उन लोगों के लिए है जिनके पास एप्लिकेशन कैसे काम करनी चाहिए की स्पष्ट कल्पना है, लेकिन वे हफ्तों के मैनुअल डिज़ाइन और सेटअप को छोड़ना चाहते हैं।
यह एक बुनियादी वेबसाइट बिल्डर और एक पेशेवर डेवलपमेंट वातावरण के बीच एक अनूठी जगह पर स्थित है।
आपको यह टूल निम्नलिखित श्रेणियों में उपयोगी लगेगा:
• स्टार्टअप फाउंडर्स जो MVP बना रहे हैं: आप बिना पूरी इंजीनियरिंग टीम भर्ती किए निवेशकों को दिखाने या शुरुआती उपयोगकर्ताओं के साथ टेस्ट करने के लिए एक कार्यात्मक उत्पाद लॉन्च करना चाहते हैं।
• छोटे व्यवसाय के मालिक और ऑपरेटर: आप अपने व्यवसाय को गंदे स्प्रेडशीट और ईमेल थ्रेड के माध्यम से प्रबंधित करने से थक चुके हैं। आप आंतरिक उपकरण बनाने के लिए v0 का उपयोग कर सकते हैं।
• डेवलपर्स और प्रोडक्ट मैनेजर्स: आपको एक कॉन्सेप्ट से काम करने वाले प्रोटोटाइप तक तेजी से जाना होता है।
• एजेंसियाँ जिन्हें तेज़ प्रोटोटाइप की जरूरत है: आप क्लाइंट के लिए कस्टम सॉल्यूशंस बना रहे हैं और उन्हें एक “वास्तविक” वर्शन दिखाना चाहते हैं बजाय स्टेटिक डिज़ाइन फ़ाइल के। यह आपको मीटिंग के दौरान रियल-टाइम फीडबैक पर अपडेट करने देता है बस चैट प्रॉम्प्ट बदलकर।
v0 के फायदे और नुकसान
- साइनअप के लिए क्रेडिट कार्ड की जरूरत नहीं।
- वास्तविक React और Next.js कोड जनरेट करता है।
- प्रोजेक्ट को स्पष्ट कार्य-सूची में विभाजित करता है।
- स्वचालित रूप से प्रासंगिक आइकन और ब्रांडिंग चुनता है।
- एक क्लिक में ग्लोबल कलर अपडेट।
- यूनिफॉर्म बॉर्डर रेडियस के लिए एक सिंगल स्लाइडर।
- प्रोफेशनल “ग्लो” शैडो स्टाइल विकल्प।
- कोई अतिरिक्त काम किए बिना परफ़ेक्ट मोबाइल रिस्पॉन्सिविटी।
- डेटाबेस एनवायरनमेंट वेरिएबल्स ऑटो-पॉप्युलेट।
- सेकेंड्स में लाइव URL पर डिप्लॉय करें।
- AI लिखते समय रॉ कोड देखें।
- आसान रिकवरी के लिए टाइमस्टैम्पेड वर्शन हिस्ट्री।
- एक क्लिक Supabase डेटाबेस इंटीग्रेशन।
- चैट प्रॉम्प्ट पर सख्त कैरेक्टर लिमिट।
- साइनअप के बाद तुरंत पेड प्लान दिखाता है।
- लेआउट ट्वीक के लिए कोई ड्रैग-एंड-ड्रॉप नहीं।
यदि आप टेम्प्लेट्स के साथ फंसकर थक चुके हैं और बस अपना ऐप बोलकर बनाना चाहते हैं, तो v0 आज़माएँ. बस तैयार रहें कि यदि आपके प्रॉम्प्ट बहुत लंबे हो जाएँ तो उन्हें ट्रिम करना पड़ेगा।
v0 विशेषताएँ
- टेक्स्ट प्रॉम्प्ट से पूर्ण एप्लिकेशन जनरेट करें।
- रियल-टाइम Next.js और React कोड देखें।
- एक क्लिक Supabase डेटाबेस कनेक्टिविटी।
- सेकंडों में लाइव एप्लिकेशन डिप्लॉय करें।
- कलर्स और कॉर्नर्स के लिए ग्लोबल स्टाइलिंग।
- प्रोजेक्ट ट्रैकिंग के लिए स्वचालित टास्क लिस्ट।
- किसी भी स्क्रीन साइज़ के लिए रिस्पॉन्सिव लेआउट।
- प्रोजेक्ट वर्शन हिस्ट्री द्वारा वर्क को रीस्टोर करें।
मेरा v0 by Vercel के साथ हैंड्स-ऑन अनुभव
जब मैंने सुना कि v0 by Vercel एक साधारण चैट इंटरफ़ेस के माध्यम से पूरा एप्लिकेशन बना सकता है, तो मुझे देखना था कि यह वाकई उपयोगी है या सिर्फ एक चमकदार डेमो।
1. शुरूआत: साइन-अप और पहली छाप
जब मैं पहली बार v0 होमपेज पर पहुँचा, तो मुझे विश्लेषण से भरा कोई डैशबोर्ड या “New Project” बटन वाली साइडबार नहीं दिखी। यह बेहद खाली था।
स्क्रीन के केंद्र में एक बड़ा सफेद इनपुट फ़ील्ड था जिसमें प्लेसहोल्डर टेक्स्ट “Ask v0 to build…” और ऊपर एक हेडलाइन थी, “What do you want to create?”
टॉप नेविगेशन बार में मुझे Templates, Resources, Enterprise, Pricing, iOS, Students, और FAQ के लिंक दिखे।
भीड़-भाड़ का अभाव अच्छा लगा, लेकिन इसका मतलब था कि माउस पर क्लिक करने से पहले मेरे पास एक योजना तैयार होनी चाहिए थी।
मैंने ऊपर दाईं ओर “Sign Up” बटन पर क्लिक किया। चूंकि v0 गहराई से Vercel इकोसिस्टम के साथ जुड़ा है, एक मोडल आया जिसमें मुझे “Continue with Vercel” या “Sign Up” चुनने को कहा गया।
मेरी सक्रिय सेशन नहीं थी, इसलिए मैंने “Sign Up” क्लिक किया, जिससे मुझे एक सफेद पेज पर ले जाया गया जिसमें दो बड़े बटन थे: “Google” और “GitHub,” साथ में एक ईमेल फील्ड। मैंने अपना वर्क ईमेल टाइप किया और “Continue with Email” क्लिक किया।
यहाँ पहला रुकावट वाला क्षण आया। मुझे ब्राउज़र छोड़कर लगभग तीस सेकंड के लिए वेरिफिकेशन ईमेल का इंतजार करना पड़ा, फिर छह अंकों का कोड कॉपी करना पड़ा।
मैं v0 टैब में वापस आया, कोड छह बॉक्स में पेस्ट किया, और “Verifying” स्पिनर का पांच सेकंड इंतजार किया।
इसके लिए कोई क्रेडिट कार्ड आवश्यक नहीं था, यह मुझे बहुत अच्छा लगा। मैंने कई मुफ्त टूल्स टेस्ट किए हैं जो इंटरफ़ेस दिखने से पहले बिलिंग जानकारी मांगते हैं, तो यह एक कम-जोखिम वाला प्रारंभ था।
उसके बाद एक चार-भागों वाला ऑनबोर्डिंग स्लाइडशो दिखा। इसमें “नए, अधिक शक्तिशाली git पैनल” का परिचय, बताया गया कि हर चैट एक नई ब्रांच पर काम करती है ताकि परिवर्तन अलग-अलग परीक्षण में हों, और बताया गया कि सभी परिवर्तन चैट करते-करते ऑटो-कमिट होते हैं।
अंत में, एक मोडल आया जिसमें “Accept AI Product Terms” पूछा गया। मैंने काले “Accept and Continue” बटन पर क्लिक किया, और मैं बिल्डर के असली इंटरफ़ेस के सामने खड़ा था।
कुल मिलाकर फर्स्ट इम्प्रेशन: साइनअप प्रक्रिया मानक लेकिन तेज़ थी, और क्रेडिट कार्ड न मांगना मुझे बहुत पसंद आया। इंटरफ़ेस बेहद स्मूथ और हाई-एंड दिखता है, लेकिन पहले ही $30/महीना भुगतान का संकेत देखकर मुझे छुपे खर्चों की चिंता हुई।
2. मेरा पहला ऐप बनाना: स्टेप-बाय-स्टेप वॉकथ्रू
मैं केवल एक साधारण बटन बनाने नहीं आया था, इसलिए मैंने v0 को एक जटिल प्रोजेक्ट से टेस्ट किया: Homeowner Service Request Portal। मुझे एक ऐसी साइट चाहिए थी जहाँ लोग प्लंबिंग, इलेक्ट्रिकल, या क्लीनिंग सर्विस के लिए अनुरोध कर सकें और फिर उन अनुरोधों को डैशबोर्ड पर ट्रैक कर सकें। मेरे पास नोट्स में बहुत विस्तृत प्रॉम्प्ट था, जिसमें शामिल थे:
- प्रोजेक्ट विवरण
- यूज़र टेबल स्कीमा (ID, Name, Email, Phone, Address, Role)
- मुख्य फीचर्स जैसे ऑथेंटिकेशन
- एक निश्चित सर्विस रिक्वेस्ट फॉर्म
मैंने अपना लंबा प्रॉम्प्ट कॉपी किया और मुख्य चैट बॉक्स में पेस्ट किया। मैंने काले “अप” एरो से सबमिट किया।
यहाँ मुझे एक बड़ी फ़ेनFailure का सामना करना पड़ा।
इनपुट एरिया के नीचे एक लाल एरर बैनर आया: “Failed to submit message. Start a new chat, retry, or edit your message.”
मैंने “Retry” आइकन पर क्लिक किया, लेकिन वही एरर तुरंत दिखने लगी। मुझे एहसास हुआ कि मैंने कैरेक्टर लिमिट पार कर दी थी। यह निराशाजनक था क्योंकि कोई काउंटर नहीं था; टूल बस टूट गया।
मुझे मैन्युअली प्रॉम्प्ट छोटा करना पड़ा। मैंने डेटाबेस स्कीमा विवरण और टेक्निकल परिभाषाएँ हटा दीं, केवल फीचर लिस्ट और जरूरी फॉर्म फील्ड रखे। लगभग 40% टेक्स्ट ट्रिम करने के बाद, मैंने फिर से सबमिट किया। इस बार काम हुआ।
स्क्रीन स्प्लिट-व्यू में बदल गई। बाईं ओर चैट हिस्ट्री, दाईं ओर एक बड़ा प्रीव्यू एरिया। मैंने देखा कि AI “Thinking” कर रहा था। छोटे-छोटे स्टेटस अपडेट फ्लिकर हुए:
- “Checking integrations”
- “Generating design”
- “Loading Supabase skill”
फिर बायीं साइडबार पर “todo list” प्रोजेक्ट नाम “Homeowner service portal” के तहत दिखाई दी। इसमें चार आइटम थे, और मैंने देखा कि पहला “Task 1 of 4 in progress” अपने आप शुरू हो गया।
सबसे पहले यह “Creating migration script” कर रहा था। दाईं ओर 001_create_service_requests.sql नामक फाइल दिखी। मैंने वास्तविक SQL कोड लाइव होते हुए देखा, जिसमें कॉलम थे:
- service_type
- description
- status
- urgency
फिर यह “Creating Supabase client files” पर गया, lib/supabase में client.ts और server.ts जनरेट किए।
मैं वास्तव में प्रभावित हुआ कि इसने कितना “गंदा काम” संभाला। फिर Task 2 पर चला गया: ऑथेंटिकेशन पेजेज़ बनाना। मैंने बाईं फाइल ट्री में sign-up/page.tsx और login/page.tsx देखी।
अंत में Task 3 आया: “Creating landing page.” प्रीव्यू विंडो में एक प्रोफेशनल UI भर गया। इसने साइट का ब्रांड नाम “HomeServe” रखा, और एक हीरो सेक्शन में लिखा “Your Home Services, Simplified.” नीचे “Services We Offer” सेक्शन था जिसमें आइकन थे:
- Plumbing
- Electrical
- Cleaning
इसमें एक “Get Started” बटन और एक “Sign in to Dashboard” बटन भी जोड़ा।
बिल्डर इंटरफ़ेस बेहद तेज़ लगा। मुझे “building” या “compiling” बार्स का इंतजार नहीं करना पड़ा; UI बस मेरे सामने विकसित होता गया।
कुल मिलाकर निर्माण प्रक्रिया: शुरुआती प्रॉम्प्ट पर कैरेक्टर लिमिट गंभीर बाधा है यदि आप कुछ गंभीर बनाना चाहते हैं। यह आपको अस्पष्ट होने पर मजबूर करता है जब आप विशिष्ट होना चाहते हैं।
हालांकि, एक बार प्रॉम्प्ट सफल होने पर, v0 कितना वास्तविक, संरचित कोड (न कि सिर्फ मॉकअप) जनरेट करता है, वह Softr या Wix जैसे टूल्स से बिलकुल अलग है।
जब मैंने देखा कि यह डेटाबेस माइग्रेशंस और क्लाइंट फाइल्स को चेक-ऑफ कर रहा है, तो मुझे वास्तव में ऐसा लगा कि प्रोजेक्ट इंजीनियर किया जा रहा है, सिर्फ असेंबिल नहीं।
3. डिजाइन और लेआउट कस्टमाइज़ करना
एक बार लैंडिंग पेज और डैशबोर्ड जनरेट हो जाने के बाद, मैं डिफ़ॉल्ट लुक से हटना चाहता था।
मैंने बायीं साइडबार में ऊपर पेंटब्रश आइकन (“Design”) पर क्लिक किया। इससे एक “Design System” पैनल खुल गया।
मैंने “Colors” सेक्शन से शुरू किया। पांच कलर स्वैचेस की एक रो थी: “Connect,” “Primary,” “Secondary,” आदि। मैंने “Primary” स्वैच पर क्लिक किया, जिससे एक कलर पिकर खुला।
मैंने एक जीवंत, प्रोफेशनल नीला चुना। जैसे ही मैंने “Save” क्लिक किया, सभी बटन, आइकन, और एक्सेंट्स उस समान शेड में अपडेट हो गए। यह एक सचमुच ग्लोबल डिजाइन सिस्टम था।
फिर मैंने “Radius” सेटिंग देखी। डिफ़ॉल्ट बटन बिलकुल तिख़ी कॉर्नर्स के थे। मैंने स्लाइडर 0 से 0.625 तक खींचा। प्रीव्यू में “Get Started” बटन और सर्विस कार्ड्स के कोने तुरंत गोल हो गए। “Shadows” सेक्शन में चार विकल्प थे:
- Small
- Medium
- Large
- Glow
मैंने “Glow” क्लिक किया, और “Services We Offer” कार्ड्स को एक सूक्ष्म, उच्च-एंड गहराई मिली, जैसे वे हवा में तैर रहे हों।
फिर मैंने प्रीव्यू पैन में ऊपर Desktop, Tablet, और Phone आइकॉन्स से रिस्पॉन्सिविटी टेस्ट की।
Phone view में साइट ने पूरी तरह से रिफ्लो किया। तीन-कालम सेक्शन एकल कालम में स्टैक हुआ, हीरो इमेज टेक्स्ट के नीचे आ गई, और नेविगेशन लिंक्स एक क्लीन हैम्बर्गर मेन्यू आइकन में बदल गए।
हालांकि, जब मैंने लेआउट में कुछ सूक्ष्म बदलाव करने की कोशिश की, तो मेरा असली रोड़ा आया। मैं “Create Free Account” बटन को हीरो सेक्शन के केंद्र से शीर्ष नेविगेशन में ले जाना चाहता था। मैंने इसे क्लिक करके ड्रैग करने की कोशिश की, लेकिन कुछ भी नहीं हुआ। v0 एक विज़ुअल एडिटर नहीं है।
इस परिवर्तन के लिए मुझे वापस चैट में जाना पड़ा और एक विस्तृत निर्देश टाइप करना पड़ा। AI ने समझा और हेडर कंपोनेंट री-राइट किया, लेकिन एक बटन मूव करने में ही लगभग 45 सेकंड “Thinking” लगा। यह बुनियादी लेआउट ट्वीक के लिए बहुत धीमी प्रक्रिया है।
कुल मिलाकर कस्टमाइज़ेशन: डिजाइन सिस्टम पैनल ग्लोबल परिवर्तन जैसे फॉन्ट, रेडियस, और ब्रांड कलर्स के लिए शक्तिशाली है। यह Bubble जैसी टूल में मैन्युअल रूप से स्टाइलिंग करने की तुलना में काफी तेज़ है। लेकिन ड्रैग-एंड-ड्रॉप एडिटर का अभाव बड़ा downside है। यदि आप “पिक्सल-पुशर” हैं, तो चैट-आधारित लेआउट एडिटिंग थकाऊ लगेगी।
4. v0 एरर्स को कैसे संभालता है
मैं देखना चाहता था कि v0 गलती होने पर कैसे प्रतिक्रिया देता है, और इसे देखने के लिए ज्यादा इंतज़ार नहीं करना पड़ा। जब AI मेरी todo list में “Run migration” स्टेप पर पहुँचा, तो स्क्रीन के बीच में एक बड़ा yellow alert आइकन के साथ वार्निंग मोडल आया।
उसमें लिखा था: “This task may cause extremely destructive actions, and requires approval.”
साथ में उसने वह SQL कोड भी दिखाया जो डेटाबेस पर execute होने वाला था। डेवलपर के लिए यह एक सामान्य सुरक्षा फीचर है।
लेकिन एक शुरुआती के लिए, “extremely destructive actions” शब्द बहुत डरावने हैं। इसने यह नहीं बताया कि यह विनाशकारी क्यों होगा या “Accept” करने पर क्या होगा। मैंने blue “Accept” बटन क्लिक किया, और यह बिना समस्या के आगे बढ़ा, लेकिन phrasing बहुत aggressive है और गैर-तकनीकी उपयोगकर्ता को डरा सकती है।
बाद में, मुझे एक लॉजिक एरर मिला। मैंने प्रीव्यू में signup पेज टेस्ट किया, लेकिन “Create Account” बटन क्लिक करने पर पेज बस वहीं अटका रहा। UI पर कोई एरर मैसेज नहीं, कोई सफलता नोटिफिकेशन नहीं।
मुझे स्क्रीन के शीर्ष दाईं ओर “Console” टैब पर क्लिक करना पड़ा।
एक पैनल ऊपर स्लाइड हुआ जिसमें तकनीकी लॉग्स थे। मैंने एक yellow वार्निंग देखा: GotAuthUser: (Anonymous) – (No token).
यहाँ v0 अपने डेवलपर-केंद्रित जड़ें दिखाता है। एरर हैंडलिंग “यूजर-फ्रेंडली” नहीं है; यह सिस्टम लॉग्स का रॉ आउटपुट है। यदि मुझे नहीं पता होता कि “No token” आमतौर पर ऑथेंटिकेशन वेरिएबल इशू को दर्शाता है, तो मैं पूरी तरह खो जाता।
मुझे वह टेक्निकल एरर कॉपी करके वापस चैट में पेस्ट करना पड़ा और पूछना पड़ा, “How do I fix this?” AI ने महसूस किया कि उसने एनवायरनमेंट वेरिएबल सेटअप में एक स्टेप छोड़ दिया था और फिक्स जनरेट किया, लेकिन मुझे टूल के दो अलग हिस्सों के बीच अनुवादक बनने जैसा महसूस हुआ।
एक अन्य चीज जो मैंने नोट की: हेडर में कोई “Undo” बटन नहीं है। जब मैंने गलती से AI से कहा “make the background darker,” और इसने पूरी पेज को काला कर दिया और मेरा टेक्स्ट छिप गया, तो मैं Ctrl+Z नहीं दबा सका।
मुझे “Versions” हिस्ट्री (ऊपर दाईं ओर एक घड़ी आइकन) पर जाना पड़ा। मुझे समय-चिन्हित वर्शन की सूची से गलती से पहले वाला चुनना पड़ा और “Restore” बटन क्लिक करना पड़ा।
यह एक कार्यशील तरीका तो है, लेकिन पारंपरिक undo/redo सिस्टम जितना क्लंकी है।
कुल मिलाकर एरर हैंडलिंग: v0 की एरर हैंडलिंग बेहद पारदर्शी है, जो डेवलपर्स के लिए शानदार लेकिन दूसरों के लिए भारी हो सकती है। रॉ SQL और कंसोल लॉग्स देखना तब मददगार है जब आप जानते हों कि क्या देखना है, लेकिन टूल संकट में आपका हाथ थामने में अच्छा काम नहीं करता।
सरल Undo बटन की कमी और “destructive actions” जैसे डरावने शब्द इस वातावरण को पारंपरिक नो-कोड बिल्डर से थोड़ा अधिक उच्च-दबाव वाला बना देते हैं।
5. ऐप पब्लिश करना और इंटीग्रेशन्स जोड़ना
अंतिम चरण था Homeowner Portal को लाइव करना। मैंने बायीं साइडबार में “Connect” टैब क्लिक किया।
यह इंटीग्रेशन्स मेन्यू खोलता है। मैंने “Vercel AI Gateway,” “Upstash,” और “Supabase” देखे। चूंकि मुझे सर्विस रिक्वेस्ट के लिए असली डेटाबेस चाहिए था, मैंने Supabase पर “Install” क्लिक किया।
इसने मुझे पूरी तरह से v0 इंटरफ़ेस से बाहर एक नए ब्राउज़र टैब पर Vercel के “Checkout” पेज पर भेज दिया। यह बहुत औपचारिक लगा। मुझे “Accept and Create” क्लिक करके एक नया Supabase अकाउंट सेटअप करना पड़ा।
फिर मुझे “Primary Region” चुनना पड़ा। एक लंबी सूची आई जैसे “N. Virginia, USA (East)” और “London, UK (Europe)”। मैंने “Washington, D.C., USA (East)” चुना क्योंकि टूल ने इसे मेरे प्रोजेक्ट के लिए अनुशंसित दिखाया।
इसके बाद “Create Database” स्क्रीन आई। इसने एक नाम सुझाया, “supabase-purple-tree,” और मुझे एक प्लान चुनने को कहा। मैंने देखा कि “Supabase Pro Plan” $25/महीना पर था, लेकिन नीचे स्क्रॉल करके मैंने “Supabase Free Plan” पाया।
मैंने इसे चुना और काले “Create” बटन पर क्लिक किया। एक प्रोग्रेस बार लगभग 30 सेकंड तक स्पिन हुआ। समाप्त होने पर, टैब अपने आप बंद हो गया और मैं फिर v0 बिल्डर में था।
यहाँ v0 ने मुझे प्रभावित किया। मैंने साइडबार में “Vars” (Variables) टैब पर क्लिक किया और देखा कि v0 ने सभी तकनीकी स्ट्रिंग्स जैसे NEXT_PUBLIC_SUPABASE_URL, SUPABASE_ANON_KEY, और SUPABASE_SERVICE_ROLE_KEY को स्वचालित रूप से भर दिया था।
किसी अन्य टूल में मुझे मैन्युअली Supabase डैशबोर्ड से ये कीज़ कॉपी-पेस्ट करनी पड़तीं। v0 ने बैकएंड हैंडशेक पूरे बैकग्राउंड में मेरे बिना कुछ किए संभाल लिया।
मैं वापस चैट में गया और आखिरी निर्देश दिया: “Now that the database is connected, make the forms work.”
AI ने middleware.ts फ़ाइल लिखी, रूट प्रोटेक्शन संभाली, और client.ts फाइल्स अपडेट कीं। फिर मैंने ऊपर दाईं ओर “Publish” बटन क्लिक किया। एक छोटा मोडल आया जिसमें बिल्ड प्रक्रिया दिखी: “Building,” फिर “Deploying.”
लगभग 45 सेकंड बाद, यह मुझे एक लाइव URL दे गया। मैंने इसे नए टैब में खोला, और साइट वास्तव में वहाँ थी।
मैंने फेक ईमेल और पासवर्ड से साइनअप फ्लो टेस्ट किया। “Create account” क्लिक करते ही UI एक “Check your email” सफलता स्क्रीन पर स्मूदली ट्रांज़िशन कर गया, जिसमें एक छोटा हरा मेल आइकन था।
यह सही ढंग से /auth/sign-up-success पर रिडायरेक्ट भी हुआ। ब्लैंक प्रॉम्प्ट से लाइव, ऑथेंटिकेटेड एप्लिकेशन तक का पूरा प्रोसेस करीब 40 मिनट में हुआ।
एक और अच्छी विशेषता जो मैंने खोजी वह यह थी कि v0 आपके लिए डोमेन मैनेजमेंट भी ऑटोमैटिक करता है। पब्लिश होने पर मैंने प्रोजेक्ट सेटिंग में “Domains” सेक्शन देखा जिसमें दो भाग थे:
- Default Domain: v0 हमेशा उपलब्ध रहने वाला एक स्थायी URL जनरेट करता है। मेरे केस में यह था: v0-homeowner-service-portal.vercel.app
- Connected Domains: यहाँ आप प्रोफेशनल दिखने वाले कस्टम डोमेन्स खरीद या कनेक्ट कर सकते हैं। दो बटन होते हैं: “Buy” और “Add.”
मुझे यह पसंद आया कि v0 आपके ऐप को टेस्ट या शेयर करने के लिए कस्टम डोमेन खरीदने पर मजबूर नहीं करता।
डिफ़ॉल्ट .vercel.app डोमेन तुरंत लाइव होता है और परीक्षण, शेयरिंग, या MVP लॉन्च के लिए काम आता है। बाद में यदि आप पेशेवर डोमेन (जैसे homeserviceportal.com) चाहते हैं, तो आप इंटरफ़ेस के माध्यम से खरीद या कनेक्ट कर सकते हैं।
डोमेन तुरंत लाइव हुआ। कोई DNS वेटिंग पीरियड नहीं, कोई मैनुअल कॉन्फिगरेशन नहीं। बस काम हुआ।
कुल मिलाकर पब्लिशिंग और इंटीग्रेशन्स: यहाँ v0 वाकई चमकता है। Supabase इंटीग्रेशन को हैंडल करने और एनवायरनमेंट वेरिएबल्स ऑटो-पॉप्युलेट करने का तरीका एक बड़ा टाइम-सेवर है। यह फुल-स्टैक डेवलपमेंट के सबसे निराशाजनक हिस्सों को हटा देता है।
Vercel पर डिप्लॉयमेंट तेजी से और विश्वसनीय है। टूल अभी भी उन लोगों पर लक्षित लगता है जिन्हें थोड़ी बहुत कोड का डर नहीं है, लेकिन एक टेक्स्ट प्रॉम्प्ट से लाइव, डेटाबेस-कनेक्टेड ऐप <1 घंटे में तैयार करना पारंपरिक बिल्डर्स से एक वास्तविक छलांग है। [hosting-banner data-hosting_id="359780" data-hosting_name="Vercel v0" data-use_default="true" data-icon_color="blue" data-background_color="white" data-shortcode_name="hosting-banner"]
प्राइसिंग और प्लान्स
परंपरागत बिल्डर्स की तरह जो प्रति ऐप या प्रति पेज चार्ज करते हैं, v0 एक “क्रेडिट-बेस्ड” सिस्टम उपयोग करता है।
हर बार जब आप एक प्रॉम्प्ट भेजते हैं या AI कोड जनरेट करता है, तो आप “टोकन” पर आधारित क्रेडिट खपत करते हैं।
| Plan | Price | मासिक क्रेडिट शामिल | मुख्य विशेषताएँ |
|---|---|---|---|
| Free | $0/mo | $5 | 7 messages/day, Deploy to Vercel, GitHub sync |
| Premium | $20/mo | $20 | $2 daily login credit, Figma import, 5x higher file limits |
| Team | $30/user/mo | $30 | $2 daily login credit, Team collaboration, Shared billing |
| Business | $100/user/mo | $30 | Training opt-out, Shared credits, Team collaboration |
Payment और मॉडल लागत
- Model Levels: आप चुन सकते हैं v0 Mini (सबसे सस्ता/तेज़), v0 Pro (संतुलित), और v0 Max (सबसे बुद्धिमान). v0 Max का उपयोग जटिल लॉजिक के लिए v0 Mini की तुलना में टोकन पांच गुना तेजी से खर्च करता है।
- Payment: वर्तमान में वे सामान्य क्रेडिट कार्ड स्वीकार करते हैं लेकिन PayPal नहीं।
- Refunds: कोई रिफंड पॉलिसी नहीं क्योंकि हर AI जनरेशन तुरंत उन्हें कंप्यूटिंग पावर की लागत लगाती है।
मेरी सिफ़ारिश
यदि आप बस एक्सपेरीमेंट कर रहे हैं, तो Free प्लान पर रहें। यदि आपके पास एक विशिष्ट प्रोजेक्ट है जिसे आपको लॉन्च करना है, तो Premium प्लान सबसे अधिक मूल्य प्रदान करता है। $2 दैनिक लॉगिन बोनस महीने में अतिरिक्त $60 मूल्य जोड़ता है, जो AI के साथ निर्माण के परीक्षण-और-त्रुटि स्वभाव के लिए बहुत उपयोगी है।
ध्यान दें कि v0 एक अलग शुल्क है आपके Vercel होस्टिंग प्लान से; यदि आप Vercel पर प्रोडक्शन साइट के लिए उपयोग करते हैं, तो आपको दोनों का भुगतान करना होगा।
v0 का विकल्प
यदि आप एक ऐसा विकल्प देख रहे हैं जो एंड-टू-एंड एप्लिकेशन इंजीनियरिंग और डेटाबेस प्रबंधन पर अधिक फोकस करता हो, तो Lovable सबसे सीधा प्रतियोगी है।
दोनों टूल चैट इंटरफ़ेस का उपयोग करके कोड लिखते हैं, लेकिन v0 एक Vercel-निवृत्त विशेषज्ञ है जो Next.js पर फोकस करता है, जबकि Lovable खुद को एक फुल-स्टैक सॉफ़्टवेयर इंजीनियर के रूप में पेश करता है जो फ्रंटेंड से लेकर जटिल बैकएंड लॉजिक तक सब कुछ संभालता है।
तुलना सारणी: v0 vs. Lovable
| Feature | v0 | Lovable |
|---|---|---|
| Ease of Use | बेहद उच्च; न्यूनतम चैट | उच्च; सहयोगी चैट फ्लो |
| Best For | उच्च-प्रदर्शन React/Next.js UIs | फुल-स्टैक CRUD एप्लिकेशन्स |
| Mobile Apps | रिस्पॉन्सिव वेब ऐप्स | रिस्पॉन्सिव वेब ऐप्स |
| Backend & Data | मार्केटप्लेस इंटीग्रेशन्स (Supabase) | गहरा, नेटिव Supabase इंटीग्रेशन |
| Design Flex | शक्तिशाली ग्लोबल Design System पैनल | अधिकतर चैट-आधारित डिजाइन ट्वीक |
| Performance | Vercel Edge होस्टिंग के लिए अनुकूलित | मानक React/Vite प्रदर्शन |
| Pricing | क्रेडिट-आधारित ($20/mo Premium) | सब्सक्रिप्शन-आधारित ($25/mo Pro) |
अंतिम निर्णय: क्या v0 वाकई इस्तेमाल करने लायक है?
“HomeServe” पोर्टल बनाने के एक दोपहर बाद, मैंने महसूस किया कि v0 एक बहुत ही विशिष्ट टूल है उन लोगों के लिए जो विशिष्ट काम करना चाहते हैं।
यह एक उच्च-गति इंजन की तरह है जिसे चलाने के लिए चालाक ड्राइवर चाहिए।
AI को todo लिस्ट चेक-ऑफ करते हुए वास्तविक SQL और React कोड लिखते हुए देखना एक वास्तविक हाई प्वाइंट था। यदि आपको निवेशकों को दिखाने के लिए एक कार्यात्मक प्रोटोटाइप या MVP बनाना है, तो यहाँ की गति बेजोड़ है। ग्लोबल डिजाइन सिस्टम भी एक बड़ा प्लस है।
हालाँकि, रुकावटें वास्तविक हैं। पहले प्रॉम्प्ट पर “out of credits” मोडल एक झटका था। यदि आप $20-$30/महीना देने के लिए तैयार नहीं हैं, तो आप आगे नहीं बढ़ पाएंगे।
निचोड़: यदि आप एक तकनीकी फाउंडर या वेब के कामकाज को समझने वाले डिज़ाइनर हैं, तो v0 एक पावरहाउस है। यह उबाऊ सेटअप को ऑटोमेट कर देता है और आपको संवाद के माध्यम से असली सॉफ़्टवेयर बनाने की सुविधा देता है।
लेकिन यदि आप एक सरल ड्रैग-एंड-ड्रॉप अनुभव चाहते हैं जहाँ आपको तकनीकी लॉग्स देखने की जरूरत न पड़े, तो Softr या Wix पर रहें। v0 उनके लिए है जो बातचीत के माध्यम से अपने ऐप इंजीनियर करना चाहते हैं, सिर्फ असेंबल नहीं।
