00:00:00लाखों डेवलपर्स एक दशक से भी अधिक समय से वर्सेल के फ्रंट-एंड क्लाउड पर निर्माण कर रहे हैं।
00:00:04हम सभी व्यक्तिगत प्रोजेक्ट्स से लेकर एंटरप्राइज़ सॉफ़्टवेयर तक सब कुछ डिप्लॉय करने के लिए वर्सेल का उपयोग कर रहे हैं।
00:00:10और जब आप अपने यूज़र्स या अपनी टीम की बाधाओं को कम करने के लिए एजेंट्स और AI फीचर्स बना रहे होते हैं,
00:00:15तो आखिरी चीज़ जो आप चाहेंगे वो है प्रोडक्शन में रखरखाव की कोई जटिलता।
00:00:21वर्सेल का सेल्फ़-ड्राइविंग इन्फ्रास्ट्रक्चर DevOps को डिप्लॉयमेंट जितना ही आसान बना देता है।
00:00:25आप कोड जेनरेट करते हैं और एजेंट्स बनाते हैं, फिर वर्सेल ग्लोबल-स्केल परफॉर्मेंस के लिए स्वायत्त रूप से ऑप्टिमाइज़ करता है,
00:00:31कंप्यूट का प्रबंध करता है, AI वर्कफ़्लो को संचालित करता है, और विसंगतियों की जांच भी करता है।
00:00:38यह सब बिना किसी कॉन्फ़िगरेशन की आवश्यकता के।
00:00:40अब मैं आपको एक स्पीड रन के साथ दिखाता हूँ कि मेरा क्या मतलब है।
00:00:43आइए एक मौजूदा वेब ऐप को माइग्रेट करने की चुनौती लेते हैं।
00:00:46अब यह एक मध्यम आकार की कॉफी कंपनी के हायरिंग प्लेटफॉर्म का डेमो ऐप है, जिसका अपना रोस्टरी और कैफे है।
00:00:53यह एक साधारण ऐप है जिसमें फ्रंट-एंड, जॉब एप्लिकेशन और रिज्यूमे स्टोर करने के लिए डेटाबेस,
00:00:58और एक बैक-एंड सर्विस है जो तेज़ी से एप्लिकेशन रिव्यू के लिए कवर लेटर को सारांशित करती है।
00:01:03अभी यह एक पुराने होस्टिंग प्रोवाइडर पर है, मैं आपको यह नहीं बताऊंगा कि कौन सा,
00:01:07लेकिन हम निश्चित रूप से इसे आधुनिक बनाना चाहते हैं, तो चलिए ऐसा करते हैं।
00:01:10हम वर्सेल पर माइग्रेट करेंगे, जो फीचर डेवलपमेंट, डिप्लॉयमेंट और सहयोग को तेज़ कर देगा।
00:01:17अब इस ऐप को वर्सेल में इम्पोर्ट करते हैं।
00:01:19मैं बैक-एंड से शुरुआत करूँगा, जो एक बेसिक FastAPI पायथन सर्विस है।
00:01:24मैं "Add New" पर क्लिक करके शुरू करूँगा।
00:01:26मैंने पहले ही अपना गिट अकाउंट कनेक्ट कर लिया है और मैं देख सकता हूँ कि मेरी रिपॉजिटरी यहाँ हैं।
00:01:31मैं API रेपो पर "Import" पर क्लिक करूँगा।
00:01:33इम्पोर्ट पूरी तरह से कॉन्फ़िगर करने योग्य है, जिसमें बिल्ड और आउटपुट कॉन्फ़िग शामिल हैं,
00:01:38लेकिन वर्सेल FastAPI और अन्य बैक-एंड फ्रेमवर्क को बिना किसी अतिरिक्त प्रयास के सपोर्ट करता है।
00:01:44तो मैं बस "Deploy" पर क्लिक कर सकता हूँ और यह काम करेगा।
00:01:46और कुछ ही सेकंड के भीतर, मेरी पायथन बैक-एंड सर्विस वर्सेल पर डिप्लॉय होकर चल रही है।
00:01:52अब वर्सेल ने इस प्रोजेक्ट के लिए स्वचालित रूप से एक URL जेनरेट किया है।
00:01:55मैं इसे कॉपी करूँगा ताकि मैं इसे अगले ऐप के लिए एनवायरनमेंट वेरिएबल के रूप में जोड़ सकूँ।
00:02:01मैं एक और नया प्रोजेक्ट जोड़ूँगा, अगले ऐप पर "Import" पर क्लिक करूँगा,
00:02:05और मैं इस ऐप के लिए अपने एनवायरनमेंट वेरिएबल्स इम्पोर्ट करूँगा ताकि यह Supabase से बात कर सके।
00:02:11बेहतरीन, अब मेरा ऐप Supabase से बात कर सकता है, और FastAPI वेरिएबल के लिए,
00:02:15मैं वह URL जोड़ूँगा जिसे मैंने अभी कॉपी किया है, और ऐप को डिप्लॉय करूँगा।
00:02:20वर्सेल प्रोजेक्ट को बिल्ड और डिप्लॉय कर रहा है,
00:02:23और यह उसी इन्फ्रास्ट्रक्चर पर चलेगा जो लाखों वेबसाइटों और ऐप्स को शक्ति प्रदान करता है।
00:02:27अब वर्सेल के 126 ग्लोबल प्रेजेंस पॉइंट्स स्वचालित रूप से कंटेंट को यूजर के करीब रखते हैं,
00:02:33जिसका अर्थ है कि यह हमेशा बहुत तेज़ रहेगा।
00:02:37और यहाँ हम देख सकते हैं कि ऐप सफलतापूर्वक डिप्लॉय हो गया है।
00:02:40आइए इस पर एक नज़र डालते हैं।
00:02:42मैं नौकरियां देख सकता हूँ, और डैशबोर्ड में हमारे पायथन समरी फीचर के साथ बैक-एंड भी देख सकता हूँ।
00:02:49एक बार जब यह प्रोडक्शन में आ जाएगा, तो मैं पूरे ऐप की निगरानी कर पाऊंगा।
00:02:53लेकिन अभी के लिए, मैं दूसरे प्रोजेक्ट पर चलता हूँ जहाँ हम कुछ लाइव डेटा देख सकते हैं।
00:02:57मैं वेब एनालिटिक्स, स्पीड इनसाइट्स, लॉग्स और क्वेरी करने योग्य ऑब्जर्वेबिलिटी डैशबोर्ड के साथ पूरी तस्वीर प्राप्त कर सकता हूँ।
00:03:04उदाहरण के लिए, यहाँ हमारी वेबसाइट, skills.sh के एनालिटिक्स हैं, जहाँ लोग एजेंट स्किल्स खोजने जाते हैं।
00:03:11मैं विस्तृत ट्रैफ़िक और रेफ़रल जानकारी पा सकता हूँ, जिसमें रेफ़रल साइट्स भी शामिल हैं।
00:03:15अगर मैं यहाँ स्पीड इनसाइट्स पर क्लिक करता हूँ, तो यह मुझे कोर वेब वाइटल्स दिखाता है।
00:03:19इस तरह मैं किसी भी स्पीड या लोड की समस्या का निदान और समाधान कर सकता हूँ।
00:03:23और अगर मैं ऑब्जर्वेबिलिटी पर क्लिक करता हूँ, तो मुझे डैशबोर्ड मिलता है, जो मुझे मेरे ऐप के किसी भी डायग्नोस्टिक को एक्सप्लोर और क्वेरी करने में सक्षम बनाता है,
00:03:29लॉग्स से लेकर फंक्शन्स, एज रिक्वेस्ट्स और डेटा ट्रांसफर तक।
00:03:34ठीक है, अब मैं समराइज़ेशन फीचर को हायरिंग मैनेजर्स के लिए और अधिक उपयोगी बनाना चाहता हूँ।
00:03:38फिलहाल, FastAPI बस पायथन लाइब्रेरी के साथ कवर लेटर को सारांशित करता है।
00:03:43लेकिन हम कवर लेटर और PDF रिज्यूमे दोनों का विश्लेषण करने के लिए एक सरल एजेंट बना सकते हैं,
00:03:48उनकी तुलना जॉब डिस्क्रिप्शन से कर सकते हैं, उम्मीदवार का प्रारंभिक मूल्यांकन कर सकते हैं,
00:03:52और हायरिंग मैनेजर को भेजने के लिए एक ईमेल जेनरेट कर सकते हैं।
00:03:56मेरे पास रेपो पहले से ही स्थानीय रूप से क्लोन है, इसलिए मैं डायरेक्टरी में जाकर आवश्यक टूल्स इंस्टॉल करूँगा।
00:04:01अब मैं अपने लोकल प्रोजेक्ट को वर्सेल से जोड़ने के लिए Vercel CLI का उपयोग करने जा रहा हूँ।
00:04:06CLI मेरे लिए सीधे कमांड लाइन से वर्सेल प्लेटफॉर्म को कंट्रोल करना आसान बनाता है।
00:04:11मैं "Vercel link" से शुरुआत करूँगा।
00:04:14हाँ, मैं इस लोकल प्रोजेक्ट को लिंक करने जा रहा हूँ।
00:04:16यह वर्सेल डेमो ऑर्ग और कॉफी शॉप जॉब्स प्रोजेक्ट होगा।
00:04:21यह पहले ही मिल गया।
00:04:22और हम एनवायरनमेंट वेरिएबल्स को पुल करेंगे।
00:04:24ये रहा।
00:04:25मैं ऐप को "Vercel dev" के साथ स्थानीय रूप से भी चला सकता हूँ, जो स्थानीय स्तर पर वर्सेल डिप्लॉयमेंट एनवायरनमेंट की नकल करता है।
00:04:31कोशिश करते हैं, Vercel dev।
00:04:34सर्वर शुरू करें, चलिए आगे बढ़ें और इसका परीक्षण करें।
00:04:37और ये हो गया।
00:04:38काफी शानदार।
00:04:40अब आइए एजेंट बनाने के लिए आवश्यक AI टूल्स इंस्टॉल करें।
00:04:43वर्सेल मुझे फीचर्स और एजेंट्स बनाने के लिए आवश्यक सभी AI टूल्स देता है।
00:04:47सबसे पहले, मुझे समराइज़ेशन के लिए एक वास्तविक AI मॉडल को इंटीग्रेट करने की आवश्यकता है।
00:04:51मैं वर्सेल AI गेटवे के माध्यम से सैकड़ों विभिन्न मॉडलों का उपयोग कर सकता हूँ,
00:04:55और Vercel dev चलाने से मुझे OIDC टोकन के साथ ऑटोमैटिक एक्सेस मिलता है, जो बहुत ही बढ़िया है।
00:05:00इसके बाद, मैं AI SDK इंस्टॉल करूँगा, जो मुझे टेक्स्ट समराइज़िंग जैसी चीज़ों के लिए AI प्रिमिटिव्स का पूरा सेट देता है।
00:05:07चलिए "PMPM install AI" करते हैं।
00:05:12बहुत बढ़िया।
00:05:13उसके बाद, मैं वर्कफ़्लो देव किट इंस्टॉल करूँगा, जो एजेंट द्वारा उठाए गए हर कदम को मजबूती से संचालित करेगा।
00:05:21यदि मेरा ऐप कोड जेनरेट कर रहा होता, तो मैं इसे सुरक्षित रूप से चलाने के लिए वर्सेल सैंडबॉक्स का भी उपयोग कर सकता था।
00:05:26लेकिन यह एक सरल समराइज़ेशन एजेंट है, इसलिए मुझे इसके लिए सैंडबॉक्स की आवश्यकता नहीं है।
00:05:31ठीक है, आखिरी बात, फ्रंट एंड Next.js है।
00:05:34इसलिए मैं अपने प्रोजेक्ट में "React best practices" स्किल जोड़ूँगा ताकि यह सुनिश्चित हो सके कि फ्रंट एंड साफ और तेज़ है।
00:05:40मैं skills.sh का उपयोग करने जा रहा हूँ।
00:05:43यहाँ जाएँ, "React best practices" खोजें।
00:05:47मैं इसे इंस्टॉल करने के लिए कमांड कॉपी करूँगा।
00:05:50और ये हो गया।
00:05:53सुनिश्चित करें कि इसे clog code और कुछ अन्य चीज़ों के लिए इंस्टॉल करें।
00:05:56वैश्विक स्तर पर, मुझे SimLink वर्शन पसंद है, और यह इंस्टॉल हो गया है।
00:06:01अब आइए एजेंट का निर्माण करें।
00:06:02यह काफी सरल है, इसलिए मैं बस clog code को प्रॉम्प्ट दूँगा।
00:06:06यह वह प्रॉम्प्ट है जिससे मैंने शुरुआत की थी।
00:06:08यह clog code को एजेंट बनाने, कवर लेटर और PDF रिज्यूमे को सारांशित करने,
00:06:12सारांशों को जोड़ने और जॉब डिस्क्रिप्शन की तुलना करने, प्रारंभिक सिफारिश करने और फॉलो-अप ईमेल जेनरेट करने के लिए कहता है।
00:06:20लेकिन निश्चित रूप से, मैंने इसे वन-शॉट प्रॉम्प्ट में रिफाइन करने के लिए clog के साथ कुछ समय बिताया,
00:06:25जिसे मैं अब clog code में पेस्ट करने जा रहा हूँ और इसे शुरू करूँगा।
00:06:29वीडियो डेमो के जादू के माध्यम से, मान लेते हैं कि मैंने clog प्रॉम्प्ट्स के साथ काम पूरा कर लिया है,
00:06:35जो कि मैंने किया भी है, और मैं बस उस आउटपुट के साथ दूसरी डायरेक्टरी लाऊंगा।
00:06:39ठीक है, चलिए डिप्लॉय करते हैं।
00:06:41मैं बदलावों को कमिट करूँगा और उस ब्रांच को पुश करूँगा जिस पर मैं काम कर रहा हूँ।
00:06:47अब वर्सेल का सेल्फ़-ड्राइविंग इन्फ्रास्ट्रक्चर स्वचालित रूप से AI वर्कलोड को पहचान लेगा
00:06:51और उन कंप्यूट जॉब्स के लिए इन्फ्रास्ट्रक्चर का प्रावधान करेगा।
00:06:55और यहाँ एक्टिव कंप्यूट प्राइसिंग वास्तव में बहुत अच्छी है।
00:06:57मुझसे केवल वास्तविक कंप्यूट के लिए शुल्क लिया जाएगा, न कि उस राउंड-ट्रिप समय के लिए जब हम मॉडल API के जवाब का इंतज़ार कर रहे हों।
00:07:03ठीक है, अब मैं ऐप देख सकता हूँ, और चलिए डैशबोर्ड में चलते हैं और उस नए फीचर को देखते हैं और एक एप्लिकेशन चेक करते हैं।
00:07:10और वास्तव में, हमारे पास इस एप्लिकेशन के लिए रिजेक्शन टेक्स्ट और जेनरेट किया गया रिजेक्ट ईमेल है।
00:07:17अब प्रीव्यू एनवायरनमेंट के बारे में सबसे अच्छी बात यह है कि मेरी टीम का कोई भी व्यक्ति ऐप के किसी भी हिस्से पर कमेंट कर सकता है।
00:07:24मैं अभी ऐसा करने जा रहा हूँ, और मैं बस एरिक से एक बटन जोड़ने के लिए कहूँगा।
00:07:31बढ़िया, और यह वर्सेल टूलबार का सिर्फ एक फीचर है।
00:07:34आप फ्लैग्स का परीक्षण कर सकते हैं, एक्सेसिबिलिटी ऑडिट चला सकते हैं, ट्रेसेस चला सकते हैं, और बहुत कुछ।
00:07:38अब प्रीव्यू एनवायरनमेंट उसी इन्फ्रास्ट्रक्चर पर चलता है जिस पर प्रोडक्शन,
00:07:42इसलिए मैं यहाँ जो परीक्षण करता हूँ, वही मेरे एंड यूज़र्स प्रोडक्शन में देखेंगे।
00:07:46ठीक है, हमने ऐप में एक एजेंट जोड़ा है, लेकिन मैं चाहता हूँ कि टीम के अन्य लोग भी UI पर काम कर सकें।
00:07:52V0 अन्य लोगों के लिए वेब-आधारित देव एनवायरनमेंट में प्रोजेक्ट पर काम करना आसान बनाता है,
00:07:57लेकिन गिट वर्कफ़्लो के माध्यम से सब कुछ वर्शन-कंट्रोल्ड और सुरक्षित रखता है।
00:08:01यह वास्तव में बहुत ही शानदार है।
00:08:03मैं गिटहब प्रोजेक्ट इम्पोर्ट करूँगा, मेन को बेस ब्रांच के रूप में चुनूँगा, और V0 प्रोजेक्ट सेट अप कर देगा।
00:08:13और जैसा कि आप देख सकते हैं, मेरे एनवायरनमेंट वेरिएबल्स भी इम्पोर्ट हो गए हैं।
00:08:19और अब, एक मिनट से भी कम समय में, मेरा ऐप V0 में चल रहा है।
00:08:23चूंकि यह एक मौजूदा प्रोजेक्ट है, V0 कोड चलाने के लिए एक सैंडबॉक्स तैयार करता है।
00:08:28यह वही सैंडबॉक्स प्रिमिटिव है जिसका उपयोग हम वर्सेल पर आइसोलेटेड एनवायरनमेंट बनाने के लिए कर सकते हैं।
00:08:33और अगर मैं गिट पर क्लिक करता हूँ, तो आप देख सकते हैं कि V0 ने मेरे काम करने के लिए स्वचालित रूप से एक नई ब्रांच बना दी है।
00:08:39मैं नौकरियों के पेज डिजाइन को थोड़ा एडजस्ट करना चाहता हूँ।
00:08:42शायद यह अजीब लगे, लेकिन चलिए जॉब कार्ड्स को पेज पर फुल-विड्थ बनाते हैं।
00:08:50V0 ने उस पर काम किया, और, हम्म, मुझे अपनी पसंद उतनी पसंद नहीं आई, लेकिन देखते हैं डिजाइन टीम क्या सोचती है।
00:08:57मैं इस V0 चैट को अपनी टीम को भेज सकता हूँ ताकि वे काम जारी रख सकें,
00:09:00या मैं एक PR खोल सकता हूँ और सहयोग के लिए प्रीव्यू एनवायरनमेंट शेयर कर सकता हूँ।
00:09:06एक बार जब मैं अपना ऐप डिप्लॉय कर देता हूँ और इसे वैश्विक स्तर पर सर्व किया जाता है, तो वर्सेल सुनिश्चित करता है कि यह डिफ़ॉल्ट रूप से सुरक्षित है।
00:09:13वही सेल्फ़-ड्राइविंग इन्फ्रास्ट्रक्चर जो मेरा ऐप चलाता है, वह इसकी सुरक्षा भी करता है।
00:09:18यह हमारी Next.js साइट के लिए फ़ायरवॉल व्यू है।
00:09:20इसे बहुत अधिक ट्रैफ़िक मिलता है, और यह सारा ट्रैफ़िक अच्छा नहीं होता।
00:09:24वर्सेल का वेब एप्लिकेशन फ़ायरवॉल आपके ऐप तक पहुँचने से पहले ही संदिग्ध रिक्वेस्ट्स को स्वचालित रूप से चेक और फ़िल्टर करता है।
00:09:33Bot ID असली यूज़र्स और ऑटोमेटेड ट्रैफ़िक के बीच अंतर करता है, और बिना CAPTCHA जैसी बाधाओं के हानिकारक बॉट्स को रोकता है।
00:09:40वर्सेल का ग्लोबल एज नेटवर्क बड़े पैमाने पर होने वाले हमलों का पता लगाता है और उन्हें कम करता है, जिससे आपका ऐप लोड के दौरान भी सक्रिय रहता है।
00:09:49आपने अभी जो कुछ भी देखा—माइग्रेशन, AI वर्कफ़्लो, सहयोग, सुरक्षा—वह बिना किसी इन्फ्रास्ट्रक्चर कॉन्फ़िगरेशन के एक ही प्लेटफॉर्म पर चला।
00:09:59सेल्फ़-ड्राइविंग का यही मतलब है।
00:10:01प्लेटफॉर्म आपके रास्ते से हट जाता है ताकि आप शिपिंग पर ध्यान केंद्रित कर सकें।
00:10:05हम 1.1 करोड़ प्रोजेक्ट्स तक पहुँच चुके हैं और यह गिनती जारी है।
00:10:08अगला आपका है।