CopilotKit: SaaS ऐप्स में AI चैटबॉट्स के साथ समस्या
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00ज्यादातर AI फीचर्स और ऐप्स के साथ एक ही समस्या है, वे देखने में अच्छे लगते हैं लेकिन वास्तव में वे सिर्फ एक चैट बॉक्स हैं
00:00:06जो स्क्रीन के साइड में चिपका होता है, आप कुछ पूछते हैं और वह आपको मार्कडाउन या शायद कोई टेबल दे देता है
00:00:11शायद कुछ पैराग्राफ भी जो आपके काम को समझाते हैं जो आपको अभी भी करना है, लेकिन क्या हो अगर एजेंट सिर्फ
00:00:17बात न करे? यह कोपायलट किट (CopilotKit) है, यह रियल कंपोनेंट्स रेंडर कर सकता है, आपके ऐप के साथ लाइव स्टेट शेयर कर सकता है
00:00:23और कुछ भी बदलने से पहले मंजूरी के लिए रुक सकता है। तो क्या यह किसी AI फीचर को
00:00:29प्रोडक्ट का हिस्सा जैसा महसूस करा सकता है? चलिए पता लगाते हैं
00:00:37सबसे पहले, बहुत से लोग सोचते हैं कि वे अपने ऐप में AI जोड़ रहे हैं लेकिन वास्तव में वे जो जोड़ रहे हैं वह है
00:00:43उनके ऐप के अंदर एक दूसरा ऐप। आपका प्रोडक्ट उधर है, AI इधर है और यूजर को
00:00:49कुछ भी काम करने के लिए अपने दिमाग में संदर्भ (context) को इधर-उधर कॉपी करना पड़ता है। अब यह ठीक है अगर आपको
00:00:54सिर्फ इस बेसिक सवाल-जवाब संरचना की जरूरत है, लेकिन जिस पल आप चाहते हैं कि एजेंट स्टेट अपडेट करे
00:01:00टूल्स को कॉल करे या यूजर के साथ एक असली वर्कफ़्लो में काम करे, तो हम एक दीवार से टकराने लगते हैं। अब आप बना रहे हैं
00:01:07स्ट्रीमिंग इवेंट्स, स्टेट सिंक, अप्रूवल फ्लो और हर कोई वही चीज़ फिर से बना रहा है, बस थोड़ा
00:01:14अलग तरीके से। कोपायलट इस समस्या को सामने से हल कर रहा है, यह नहीं कि हम एक और चैटबॉट कैसे बनाएं, बेहतर
00:01:20सवाल यह है कि हम एजेंटों को ऐप्स के अंदर ही नेटिव जैसा कैसे महसूस कराएं। तो चलिए डेमो से शुरू करते हैं, फिर
00:01:26मैं बताऊंगा कि क्या असली है, क्या उपयोगी है और क्या थोड़ा बहुत ज्यादा है। अगर आपको कोडिंग टूल्स
00:01:32पसंद हैं जो आपके वर्कफ़्लो को तेज करते हैं, तो सब्सक्राइब करना न भूलें, हमारे वीडियो लगातार आते रहते हैं। ठीक है, अब
00:01:37इसे देखें, मैं एक क्लीन टर्मिनल से शुरू कर रहा हूं और हम बस अपना इंस्टाल चला सकते हैं जो मुझे कोपायलट किट से मिला है
00:01:42यह ऐप को स्कैफोल्ड करता है और मुझे एक काम करने वाला शुरुआती बिंदु देता है, बिल्कुल किसी भी अन्य प्रोजेक्ट की तरह जिसे हम वास्तव में
00:01:49शुरू करते हैं, न कि सिर्फ एक खाली चैट बबल, बल्कि असली टुकड़े। फ्रंट-एंड के टुकड़े पहले से ही एक साथ जुड़े हुए हैं
00:01:56इतना कि मैं उस वास्तविक अनुभव का परीक्षण शुरू कर सकूं जिसे हम चाहते हैं। अब मैं कूदता हूं और मैं डेवलपमेंट
00:02:02मोड चलाता हूं और यह रहा ऐप जो स्थानीय रूप से चल रहा है। अब बेशक, यह हिस्सा जाना-पहचाना लग रहा है, एक चैट सरफेस है
00:02:09लेकिन यहां वास्तव में पूरी दिलचस्प बात यह नहीं है। असली कूल बात यह है कि क्या होता है जब
00:02:13एजेंट UI से जुड़ा होता है। मैं यहां इंटरफ़ेस में एक सवाल पूछने जा रहा हूं, ओके, यह रहा
00:02:21और यहां बड़ी बात पर ध्यान दें। एजेंट सिर्फ टेक्स्ट के कुछ ढेर के साथ जवाब नहीं देता है, यह
00:02:26रिस्पॉन्स को स्ट्रीम कर सकता है, यह टूल्स को कॉल कर सकता है और यह ऐप के अंदर एक वास्तविक कंपोनेंट रेंडर कर सकता है। कोपायलट किट के साथ यह
00:02:32पहला बड़ा बदलाव है। AI सिर्फ इंटरफ़ेस का वर्णन नहीं कर रहा है, यह अब
00:02:38इसके हर हिस्से का एक हिस्सा है। अब इसे एक कदम आगे ले चलते हैं, मैं यहां इससे एक फॉलो-अप सवाल पूछने जा रहा हूं
00:02:46ओके और यह वह हिस्सा है जिसे बहुत सारे अन्य एजेंट छोड़ देंगे। अब हमारा एजेंट रुकता है, यह
00:02:52मंजूरी मांगता है और इसका मंजूरी मांगना ही वह हिस्सा है जो मायने रखता है, वह हिस्सा जो मुझे वास्तव में पसंद है क्योंकि
00:02:57असली सॉफ्टवेयर में कंट्रोल ऑप्शनल नहीं है। हमारे उपयोगकर्ताओं को अभी भी अंतिम फैसला चाहिए कि वास्तव में क्या
00:03:03हो रहा है। कूल डेमो, है ना? कोपायलट किट को समझाने का आसान तरीका वास्तव में बस यह है कि कोपायलट किट
00:03:09एजेंटिक ऐप्स के लिए एक फ्रंट-एंड स्टैक है। यह सिर्फ एक चैट कंपोनेंट नहीं है, यह किसी
00:03:15LLM API के चारों ओर सिर्फ एक रैपर नहीं है। यह आपको वे टुकड़े देता है जिनकी हमें AI अनुभवों के लिए जरूरत है जो प्रोडक्ट के अंदर रहते हैं।
00:03:23यहां समझने के लिए चार टुकड़े हैं। पहला है AGUI। AGUI एक ओपन, इवेंट-आधारित प्रोटोकॉल है
00:03:31यह बताने के लिए कि एजेंट फ्रंट-एंड से कैसे बात करते हैं। अभी, एजेंट टूलिंग में कनेक्शन की समस्या है। आपके पास लैंगग्राफ (LangGraph) है
00:03:37क्रू AI (CrewAI), मास्टर कस्टम एजेंट और जो भी नया फ्रेमवर्क आज सुबह लॉन्च हुआ हो। हम कोशिश कर रहे हैं
00:03:43उसे अपने ऐप में डालने की। फिर आपके पास रिएक्ट (React) ऐप्स, मोबाइल ऐप्स, डैशबोर्ड और बाकी सारी चीजें हैं जो
00:03:48हो रही हैं। यह बहुत सारी चीजें हैं जिन्हें मैनेज करना है। ये सभी चीजें एक साझा
00:03:55प्रोटोकॉल के बिना मैनेज की जा रही हैं। हर बैक-एंड को हर फ्रंट-एंड के लिए कस्टम कोड चाहिए। AGUI एक साझा भाषा बनने की कोशिश कर रहा है
00:04:01एजेंट और इंटरफ़ेस के बीच। मैसेज, स्टेट अपडेट, टूल कॉल, UI इवेंट्स, सब कुछ एक कॉमन इवेंट स्ट्रीम के जरिए
00:04:07जा रहे हैं। फिर हमारे पास जनरेटिव UI है, मॉडल के सिर्फ टेक्स्ट लौटाने के बजाय, एजेंट
00:04:14असली कंपोनेंट्स को ट्रिगर कर सकता है। यह रैंडम HTML नहीं है, यह सिर्फ आपका UI है जो सही समय पर रेंडर होता है। फिर है शेयर्ड
00:04:22स्टेट या जिसे कोपायलट किट को-एजेंट्स कहता है। फ्रंट-एंड और एजेंट बैक-एंड दोनों दिशाओं में स्टेट शेयर कर सकते हैं।
00:04:29जब यूजर कुछ बदलता है, तो एजेंट प्रतिक्रिया दे सकता है। जब एजेंट कुछ अपडेट करता है, तो UI
00:04:35उसे दर्शा सकता है। यह बहुत बड़ा है जब हम टूल्स, डैशबोर्ड, कुछ भी बना रहे हों जहां यूजर और एजेंट
00:04:41एक ही ऑब्जेक्ट पर काम कर रहे हों। अंत में पूरी ह्यूमन-इन-द-लूप वाली बात है, यह सबसे
00:04:47महत्वपूर्ण भागों में से एक है। बहुत सारे एजेंट, बहुत सारे एजेंट डेमो ऐसे दिखा सकते हैं जैसे सबसे अच्छा अनुभव
00:04:52पूरी स्वायत्तता (full autonomy) है, लेकिन वास्तव में हमेशा ऐसा नहीं होता, है ना? असली प्रोडक्ट्स में यूजर्स को शक्ति और
00:04:59कंट्रोल चाहिए। भेजने से पहले कन्फर्म करें, बनाने से पहले अप्रूव करें, विकल्पों में से चुनें, ये सब चीजें और कोपायलट
00:05:05हमें ठीक इसके लिए चीजें देता है। अब कोपायलट हर किसी के लिए सही विकल्प नहीं है, है ना? अगर आप इसकी तुलना
00:05:10वेर्सल (Vercel) AI SDK जैसी किसी चीज़ से करें, तो कोपायलट किट अधिक 'बैटरी-इंक्लूडेड' है। यदि आप स्ट्रीमिंग चैट चाहते हैं,
00:05:17जनरेटिव UI, शेयर्ड स्टेट और ह्यूमन-अप्रूव्ड पैटर्न, बिल्कुल बॉक्स के बाहर, तो कोपायलट किट यही है
00:05:23जो प्रोडक्ट लेयर के करीब पहुंच रहा है। वेर्सल AI SDK हल्का है, यह आपको अधिक लो-लेवल कंट्रोल देता है,
00:05:31इसलिए यदि आप आर्किटेक्चर के हर हिस्से को ऑन (own) करना चाहते हैं, तो निश्चित रूप से वह बेहतर फिट है। अब यदि
00:05:38आप कोपायलट किट की तुलना खुद सब कुछ बनाने से करें, तो इसे हराना काफी मुश्किल है
00:05:43क्योंकि मुश्किल हिस्सा सिर्फ एक चैट बबल को रेंडर करना नहीं है, वह तो अब आसान होता जा रहा है, है ना?
00:05:49मुश्किल हिस्सा वह है जो उसके आसपास है। लेकिन बेशक, इसमें कोई भी ट्रेड-ऑफ है। यह
00:05:54मिनिमल AI SDK से भारी महसूस हो सकता है। बेशक, आप कोपायलट किट के पैटर्न को अपना रहे हैं। साथ ही, यह एक हद तक मुफ्त है
00:06:02ईमानदारी से कहूं तो अगर आप अकेले में खेल रहे हैं, तो यह बहुत कूल है, लेकिन यह तब कष्टप्रद हो जाता है जब
00:06:08आप इसे स्केल के लिए उपयोग करना चाहते हैं, क्योंकि तब वह सब फ्री नहीं रहता। साथ ही, अगर आप लोग एक पूर्ण
00:06:14ओपन सोर्स विकल्प जानते हैं, तो कमेंट करें और मुझे बताएं क्योंकि मैं बस उसी की तलाश में हूं।
00:06:19कोपायलट किट के साथ आपको यह समझने की जरूरत है कि क्या ओपन सोर्स है, आपको यह समझने की जरूरत है कि किसे कीज़ (keys) चाहिए,
00:06:25क्या होस्ट किया गया है, क्या पेड है। यह कोपायलट को सिर्फ बुरा कहने के लिए नहीं है, लेकिन आपको
00:06:32यह समझने की जरूरत है कि क्या मुफ्त है और क्या नहीं। यदि आपको सिर्फ एक बेसिक सपोर्ट चैटबॉट चाहिए, तो कोपायलट किट शायद
00:06:38ओवरकिल होगा, लेकिन यदि आप एजेंटिक UX के लिए कुछ चाहते हैं जहां एजेंट आपके ऐप स्टेट में आपके
00:06:44UI के साथ काम करते हैं, तो यह वास्तव में कूल है। तो क्या आपको कोपायलट किट का उपयोग करना चाहिए? खैर, इसे आजमाएं यदि
00:06:50आप गंभीर इन-ऐप AI बना रहे हैं, खासकर यदि आप रिएक्ट या नेक्स्ट जेएस (Next.js) में हैं और आप चाहते हैं कि AI
00:06:56प्रोडक्ट का एक हिस्सा जैसा महसूस हो, न कि सिर्फ एक साइड पैनल। यह वास्तव में कूल है, आप इसे बहुत तेजी से
00:07:02स्पिन अप कर सकते हैं और हमारे पास मौजूद सभी कंपोनेंट्स के साथ, वर्कफ़्लो में इसे डालना बहुत व्यावहारिक हो जाता है। यदि आपने
00:07:07पहले ही अपना खुद का स्ट्रीमिंग स्टेट टूल-कॉल UI स्विचिंग बना लिया है, तो शायद यह इसके लायक न हो और यदि आपका
00:07:13फीचर सचमुच सिर्फ एक सवाल पूछना और जवाब पाना है, तो कोपायलट किट उसके लिए बहुत बड़ा ओवरकिल होगा,
00:07:19शायद आपको फुल एजेंटिक फ्रंट-एंड स्टैक की जरूरत नहीं है, बस कुछ हल्का इस्तेमाल करें, ओके, शिप इट!
00:07:25आगे बढ़ें, काम शुरू करें। यदि आप ऐसे कोडिंग टूल्स का आनंद लेते हैं, तो बेटर स्टैक चैनल को सब्सक्राइब करना न भूलें।
00:07:30हम आपको अगले वीडियो में देखेंगे।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video