00:00:00AI एजेंट अब हमारे जीवन के हर हिस्से के साथ जुड़ने लगे हैं।
00:00:03और यह जिन सबसे बड़े क्षेत्रों में हुआ है, उनमें से एक ब्राउज़र है।
00:00:06हर बड़ी AI कंपनी ने यह महसूस किया है कि ब्राउज़र ही वह एक टूल है जिसे हर कोई हर
00:00:11एक दिन इस्तेमाल करता है।
00:00:12तो क्यों न इसमें AI को डाल दिया जाए?
00:00:14लेकिन सच तो यह है कि वे सभी बेकार हैं।
00:00:15और यह सिर्फ ऑप्टिमाइज़ेशन की बात नहीं है।
00:00:17एक बुनियादी समस्या है जिसे कितना भी सुधार लो, वह ठीक नहीं होने वाली।
00:00:20लेकिन Google ने Microsoft के साथ मिलकर अभी “WebMCP” नाम की कोई चीज़ जारी की है।
00:00:24और एजेंटों को वेबसाइटों का उपयोग करने में बेहतर बनाने के बजाय, यह वेबसाइटों को ही
00:00:29एजेंटों से बात करने में बेहतर बनाता है।
00:00:30यह पूरी तरह से एक अलग नज़रिया है।
00:00:32और यह जो मुमकिन बनाता है, वह हमने पहले कभी नहीं देखा है।
00:00:35तो यह एक लोकल सर्वर पर चल रहा एक साधारण HTML पेज है।
00:00:38एक्सटेंशन टैब खोलने पर, हमारे पास WebMCP एक्सटेंशन है।
00:00:41इसे खोलने पर, इस साइट के नाम के नीचे, हमारे पास एक टूल है, BookTable।
00:00:45हमने इस WebMCP ब्रिज को क्लॉड कोड (Claude code) से जोड़ा और इसे बताया कि हमारे पास
00:00:49उपलब्ध WebMCP टूल्स के साथ एक रेस्टोरेंट बुकिंग फॉर्म खुला है।
00:00:52हमने इसे तारीख, नाम और एक विशेष अनुरोध के साथ दो लोगों के लिए टेबल बुक करने का काम दिया।
00:00:57वे सभी फ़ील्ड्स उस फॉर्म में मौजूद हैं।
00:00:59इसने तारीख की पुष्टि की, साइट द्वारा दिए गए WebMCP टूल का उपयोग किया, फ़ील्ड्स भरे
00:01:03और सफलतापूर्वक रिज़र्वेशन कर लिया।
00:01:06अभी, किसी एजेंट के पास स्क्रीन पर क्या है यह समझने के दो तरीके हैं।
00:01:09पहला तरीका विज़न-आधारित (vision-based) है।
00:01:11एजेंट पूरे पेज का स्क्रीनशॉट लेता है, उसे दिखने वाले हर एलिमेंट को मार्क करता है और
00:01:15उस इमेज को एक मॉडल को भेजता है जो यह समझने की कोशिश करता है कि कहाँ क्लिक करना है।
00:01:19दूसरा तरीका DOM पार्सिंग है।
00:01:21एजेंट पेज का रॉ (raw) HTML निकालता है।
00:01:24और अगर आपने कभी किसी वेबसाइट पर 'Inspect Element' खोला है, तो आप जानते हैं कि वह कैसा दिखता है।
00:01:28कोड की हज़ारों लाइनें।
00:01:29एजेंट उस सब को पढ़ता है और सही बटन पहचानने की कोशिश करता है।
00:01:33इन दोनों तरीकों में एक ही बुनियादी समस्या है।
00:01:35वे गैर-नियत (non-deterministic) हैं।
00:01:36एजेंट हर बार सिर्फ अपना सबसे अच्छा अंदाज़ा लगा रहा होता है।
00:01:39यह सब लगातार काम न करने का कारण यह है कि पूरा इंटरनेट
00:01:43इंसानी आँखों के लिए बनाया गया था।
00:01:45हर वेबसाइट यह मानती है कि कोई व्यक्ति उसे देख रहा है।
00:01:47मशीनों के लिए वहां कोई स्ट्रक्चर नहीं है।
00:01:48इसलिए हर एजेंट, चाहे मॉडल कितना भी अच्छा क्यों न हो, उस चीज़ को समझने में फंसा रहता है
00:01:53जिसे कभी मशीन द्वारा समझने के लिए डिज़ाइन ही नहीं किया गया था।
00:01:55WebMCP के साथ, वेबसाइट को समझने की कोशिश करने वाले एजेंट के बजाय, आपकी वेबसाइट
00:02:00अपने उपलब्ध एक्शन्स को टूल्स के रूप में रजिस्टर करती है।
00:02:01जब कोई एजेंट किसी पेज पर आता है, तो वह अंदाज़ा नहीं लगाता।
00:02:04वह बस उपलब्ध टूल्स को पढ़ता है और उन्हें सीधे कॉल करता है।
00:02:07अभी, WebMCP केवल अर्ली प्रिव्यू (early preview) के लिए उपलब्ध है।
00:02:10जैसे-जैसे एजेंट-आधारित वेब विकसित होगा, वेबसाइटों को भी इसके साथ विकसित होने की ज़रूरत है।
00:02:13और जैसा कि आपने पहले ही देखा, उन टूल्स को परिभाषित करके, हम इन एजेंटों को
00:02:18अपनी साइटों के साथ इंटरैक्ट करने का बेहतर एक्सेस देते हैं।
00:02:19डेमो इसलिए काम कर गया क्योंकि वह एक साधारण HTML फॉर्म था।
00:02:21लेकिन ज़्यादातर असली वेबसाइटें उतनी सरल नहीं होतीं।
00:02:23इसलिए WebMCP में वास्तव में दो अलग-अलग दृष्टिकोण हैं, जो इस पर निर्भर करते हैं कि आप किस पर काम कर रहे हैं।
00:02:28दो तरीके हैं जो एजेंटों को ब्राउज़र पर नियंत्रण करने की अनुमति देते हैं।
00:02:31डिक्लेरेटिव API (Declarative API) सरल वर्कफ़्लो के लिए है जैसे कि HTML फॉर्म जो आपने अभी देखे।
00:02:35इम्पैरेटिव API (Imperative API) कई पेजों वाले फुल-स्केल वेब ऐप्स के लिए है और उनके लिए कुछ
00:02:40अतिरिक्त इम्प्लीमेंटेशन की ज़रूरत होती है जिसके बारे में हम आगे बात करेंगे।
00:02:43अभी तक, कोई आधिकारिक डॉक्यूमेंटेशन नहीं है, लेकिन उनके पास Google Chrome labs में
00:02:48WebMCP टूल्स का एक रिपॉजिटरी है जिसमें दो डेमो हैं और उनमें से केवल एक ही होस्ट किया गया है।
00:02:52एक सरल फ़्लाइट सर्च डेमो है और एक आधिकारिक मार्वल कॉन्टेक्स्ट टूल इंस्पेक्टर एक्सटेंशन है।
00:02:56इसे इंस्टॉल करने के बाद, जिन भी वेबसाइटों में WebMCP लागू है, आप एक्सटेंशन के ज़रिए
00:03:01उन टूल्स का पता लगा पाएंगे और आप कुछ अन्य शानदार चीज़ें भी कर पाएंगे।
00:03:05टूल्स के लिए इनपुट स्कीमा वहीं दिखाई देता है।
00:03:07अभी, इस पेज पर केवल एक टूल है, सर्च फ़्लाइट्स टूल।
00:03:10उन्होंने इसे इस्तेमाल करने के दो विकल्प दिए हैं।
00:03:12आप या तो कस्टम इनपुट आर्ग्युमेंट दे सकते हैं जिन्हें AI मॉडल को भरना होगा या आप
00:03:16अपनी Gemini API की सेट कर सकते हैं, सरल अंग्रेजी में एक यूज़र प्रॉम्प्ट दे सकते हैं और
00:03:21पेज उसी के अनुसार कंट्रोल किया जाएगा।
00:03:22तो अभी इसमें ये डिफॉल्ट इनपुट हैं।
00:03:24हमने उन्हें बदल दिया और इसने वास्तव में फ़्लाइट्स सर्च कीं और बहुत सारे परिणाम मिले।
00:03:28मैं वापस गया और इस बार WebMCP ट्रैवल साइट पर चार टूल्स उपलब्ध थे जिनमें से
00:03:32तीन अब फ़िल्टर थे जिन्हें लागू किया जा सकता था।
00:03:35पेज के लिए इनपुट आर्ग्युमेंट भी बदल गए थे।
00:03:37मैंने एक और आर्ग्युमेंट जोड़ा और इसने हमें एक नोटिफिकेशन दिया कि फ़िल्टर सेटिंग्स अपडेट हो गई हैं।
00:03:41उन फ़िल्टर सेटिंग्स से कोई फ़्लाइट मैच नहीं हुई, लेकिन वे सभी लागू हो गई थीं।
00:03:44हमने इस पूरे दौरान Zen ब्राउज़र और Chrome के बीच स्विच किया और ऐसा इसलिए क्योंकि भले ही
00:03:48उन्होंने WebMCP को एक ओपन प्रोटोकॉल के रूप में जारी किया है जिसे कोई भी ब्राउज़र इस्तेमाल कर सकता है, फिलहाल यह केवल
00:03:54Chrome के Canary वर्शन पर काम करता है।
00:03:55यह तब तक है जब तक वे स्टैंडर्ड जारी नहीं कर देते ताकि हर कोई इसका उपयोग कर सके।
00:03:58तो अभी तक आधिकारिक टूल्स की स्थिति यही है।
00:04:01कोई डॉक्यूमेंटेशन नहीं, केवल दो डेमो और यह केवल Chrome Canary पर काम करता है और आप इसका उपयोग
00:04:05क्लॉड कोड के साथ नहीं कर सकते क्योंकि यह वास्तव में ब्राउज़र एजेंटों द्वारा उपयोग किए जाने के लिए है।
00:04:09इसलिए हमें यह कस्टम WebMCP ब्रिज मिला जिसे आप अपने सिस्टम पर इंस्टॉल कर सकते हैं और यह
00:04:14आपको एक MCP और एक एक्सटेंशन भी देता है।
00:04:16यही वह चीज़ है जो क्लॉड कोड को WebMCP का उपयोग करने और किसी भी वेबसाइट द्वारा दिए जाने वाले
00:04:22टूल्स को नेविगेट करने और उपयोग करने की अनुमति देती है।
00:04:23यह दिखाने के लिए कि साइटें इसे वास्तव में कैसे लागू करती हैं, हम सरल तरीके से शुरू करेंगे।
00:04:27डिक्लेरेटिव API में, जिसे आपने HTML फॉर्म के साथ देखा था, आपको बस
00:04:31HTML फॉर्म के अंदर तीन चीजें घोषित करनी होती हैं: टूल का नाम, टूल का विवरण और टूल
00:04:36पैरामीटर का विवरण।
00:04:37आपको उनमें गहराई से जाने की ज़रूरत नहीं है।
00:04:39आपको बस यह सुनिश्चित करना है कि आपका एजेंट उन्हें जोड़ दे।
00:04:41हमारे पास WebMCP रेपो के डेमो से रिवर्स इंजीनियर किए गए दो गाइड थे और हमने क्लॉड
00:04:46कोड को उनका एक्सेस दिया।
00:04:47अब उस प्रक्रिया के दौरान, हमें वास्तव में कुछ सामान्य समस्याओं का सामना करना पड़ा और हमें रास्ते में इन
00:04:51गाइड्स को ठीक करना पड़ा।
00:04:53दोनों ही AI Labs Pro में उपलब्ध हैं, जो हमारा समुदाय है जहाँ आपको उपयोग के लिए तैयार
00:04:57टेम्पलेट्स मिलते हैं।
00:04:58आप इस वीडियो और पिछले सभी वीडियो के लिए सीधे अपने प्रोजेक्ट्स में प्लग कर सकते हैं।
00:05:01मुख्य सीख यहीं वीडियो में है, लेकिन अगर आपको वास्तविक फाइलें चाहिए, तो लिंक
00:05:05डिस्क्रिप्शन में है।
00:05:06अगर आपका एजेंट इन डिक्लेरेशन्स को जोड़ देता है, तो बाकी ब्राउज़र पर निर्भर है, जो
00:05:10उन्हें HTML से पढ़ता है।
00:05:12दूसरा तरीका इम्पैरेटिव API था उन मामलों के लिए जहाँ आपको अधिक जटिल इंटरैक्शन और
00:05:17जावास्क्रिप्ट एग्जीक्यूशन की आवश्यकता होती है।
00:05:18हमारे पास एक Next.js ऐप था, क्लॉड कोड को Next.js गाइड दी और इसे लागू करने के लिए
00:05:23उसे बस इतना ही चाहिए था।
00:05:24React ऐप्स में, यह लाइब्रेरी फ़ोल्डर में एक नई फ़ाइल बनाता है जहाँ यह उन सभी टूल्स को
00:05:29घोषित करता है जिनकी साइट को आवश्यकता है।
00:05:30ये सभी फंक्शन्स हैं और ये उनकी परिभाषाएँ (definitions) हैं।
00:05:33लेकिन चूँकि ये वेब ऐप्स बहुत बड़े हो सकते हैं और इनमें 100 से अधिक टूल्स भी हो सकते हैं,
00:05:38हमें वही समस्या आती है जो क्लॉड कोड में आती है जहाँ कॉन्टेक्स्ट हर चीज़ को ओवरलोड कर देता है
00:05:41और पूरी चीज़ को खराब कर देता है।
00:05:43इसलिए वेबसाइट के सभी टूल्स लोड करने के बजाय, केवल उन टूल्स को लोड करना बेहतर है जो एक
00:05:47सिंगल पेज पर हों।
00:05:48इस कॉन्सेप्ट को कॉन्टेक्चुअल लोडिंग (contextual loading) कहा जाता है।
00:05:50तो यह वह Next.js ऐप है जिसे हमने क्लॉड कोड से बनवाया था।
00:05:53यह बैकएंड के साथ लागू किया गया एक पूरी तरह कार्यात्मक छोटा डेमो ऐप है।
00:05:57अभी हम मुख्य होमपेज पर हैं और इस साइट में केवल 3 टूल्स उपलब्ध हैं।
00:06:01मैं कार्ट पेज पर गया और इस बार हमारे पास 4 टूल्स थे और नाम भी बदल गए थे।
00:06:05टूल्स की उपलब्धता उस पेज के आधार पर बदल जाती है जिस पर आप हैं।
00:06:09यहीं पर रजिस्ट्रेशन फंक्शन्स काम आते हैं।
00:06:11जब भी आप किसी पेज पर जाते हैं, जैसे होमपेज, तो यह register home tools फंक्शन चलाता है और
00:06:15जब आप उसे छोड़ते हैं तो यह unregister home tools चलाता है।
00:06:18कौन से टूल्स उस पेज के हैं, इस आधार पर यह बस उन्हें रजिस्टर और फिर अनरजिस्टर करता है।
00:06:23यही कारण है कि इस मामले में यह अकेले ब्राउज़र पर निर्भर नहीं करता है, बल्कि कोड भी
00:06:27इंटीग्रेशन को संभालता है।
00:06:28हम वास्तव में WebMCP का उपयोग ब्राउज़र एजेंट के साथ नहीं कर रहे हैं, जो Google चाहता है और जो
00:06:32प्रत्येक ब्राउज़र स्वयं लागू करेगा।
00:06:34हम वास्तव में एक ब्रिज का उपयोग कर रहे हैं जो क्लॉड कोड को WebMCP से जोड़ता है और इसी तरह हम
00:06:39वेबसाइटों को कंट्रोल करते हैं।
00:06:40अगर आप स्वयं क्लॉड कोड से अधिक लाभ उठाना चाहते हैं, तो हमारे पास इसके साथ लाभ उठाने के
00:06:4410 सबसे अपडेटेड तरीकों पर एक वीडियो है।
00:06:46यह ब्रिज एक कम्युनिटी प्रोजेक्ट है और इम्पैरेटिव API के साथ, इसमें एक समस्या है जहाँ
00:06:51इस MCP सर्वर के साथ टूल स्विचिंग वास्तव में काम नहीं करती है।
00:06:54जब मैंने साइट खोली, तो हम चेकआउट पेज पर थे और वहीं क्लॉड कोड सेशन
00:06:58शुरू किया था।
00:06:59जब हमने इसे वापस होमपेज पर जाने के लिए कहा, तो यह होमपेज पर उपलब्ध
00:07:03टूल्स को नहीं देख सका।
00:07:04हम होमपेज पर थे और मैं प्रोडक्ट पेज पर गया और हमें 'एड टू कार्ट' बटन मिला।
00:07:08लेकिन जब यह प्रोडक्ट पेज पर था, तो यह वास्तव में उस बटन को नहीं देख सका।
00:07:11इसलिए इसे दिखाने के लिए हमें मैन्युअल रूप से कार्ट में एक आइटम जोड़ना पड़ा।
00:07:14लेकिन जब हमने इसे चेकआउट पूरा करने के लिए कहा, तो इसने अपने आप विवरण भर दिया, ऑर्डर
00:07:18दिया और पूरी शॉपिंग प्रक्रिया पूरी कर ली।
00:07:21तो यह इस MCP की एक सीमा है, जो हमें एक और बिंदु पर लाती है।
00:07:25WebMCP ओपन सोर्स है और इसमें प्रमुख ब्राउज़र वेंडर और टेक कंपनियाँ भागीदार के रूप में सूचीबद्ध हैं।
00:07:30लेकिन अभी, केवल Chrome Canary ब्राउज़र ही इसे सपोर्ट करता है और इसका मुख्य एजेंट
00:07:34Gemini है, जो सीधे ब्राउज़र में बना Google का अपना AI है।
00:07:38अगर आप एक वेबसाइट के मालिक हैं और आप आज WebMCP लागू करते हैं, तो एकमात्र एजेंट जो आपके
00:07:42टूल्स का नेटिव रूप से उपयोग कर सकता है वह Gemini है।
00:07:44क्लॉड कोड को कम्युनिटी द्वारा बनाए गए ब्रिज की ज़रूरत है जो कॉन्टेक्चुअल लोडिंग शुरू होने पर टूट जाता है।
00:07:49हर गैर-Google एजेंट नुकसान में है।
00:07:51अब क्या क्लॉड बराबरी कर सकता है?
00:07:52बिल्कुल, उनका अपना ब्राउज़र एक्सटेंशन है।
00:07:55और चूँकि वह भी एक ब्राउज़र एजेंट है, वह संभावित रूप से इन टूल्स को उसी तरह खोज सकता है
00:07:59जैसे Gemini करता है।
00:08:00लेकिन सवाल यह है कि कितने लोग जानबूझकर क्लॉड ब्राउज़र एक्सटेंशन इंस्टॉल करेंगे
00:08:04बनाम उस Gemini का उपयोग करने के जो पहले से ही Chrome में बना हुआ है।
00:08:08Chrome के अरबों यूज़र्स हैं, उन्हें कुछ भी इंस्टॉल करने की ज़रूरत नहीं है।
00:08:11हमारी राय में, Google किसी को बाहर नहीं कर रहा है।
00:08:13वे बस उस आर्किटेक्चर और ऑडियंस का लाभ उठा रहे हैं जो उनके पास पहले से है।
00:08:17एक ओपन स्टैंडर्ड जो उनके स्वामित्व वाले ब्राउज़र में उस एजेंट के साथ सबसे अच्छा काम करता है जिसे
00:08:21वे पहले से ही शिप करते हैं।
00:08:22इसका मतलब यह नहीं है कि आपको इसे लागू नहीं करना चाहिए।
00:08:23स्टैंडर्ड अपने आप में वास्तव में उपयोगी है और अपनी साइट को एजेंट के अनुकूल बनाना समझदारी है,
00:08:28चाहे किसी भी एजेंट को पहले फायदा हो।
00:08:30यदि आप इसे लागू करते हैं तो कुछ चीजें जानने लायक हैं।
00:08:33स्पेक (spec) प्रति पेज 50 से अधिक टूल्स न रखने की सलाह देता है।
00:08:36इसका मतलब आपके पूरे एप्लिकेशन को एक्सपोज़ करना नहीं है।
00:08:38यह फोकस्ड, विशिष्ट एक्शन्स के लिए है, वे चीजें जो कोई वास्तव में उस पेज पर
00:08:42करना चाहेगा।
00:08:43टूल डिस्क्रिप्शन भी आपकी सोच से कहीं ज़्यादा मायने रखते हैं।
00:08:46एजेंट उन विवरणों को पढ़कर तय करते हैं कि किस टूल को कॉल करना है।
00:08:49अस्पष्ट विवरण का मतलब है कि एजेंट गलत टूल चुनता है या उसे पूरी तरह छोड़ देता है।
00:08:53उन्हें ऐसे लिखें जैसे आप किसी ऐसे व्यक्ति को समझा रहे हों जिसने आपकी साइट कभी नहीं देखी।
00:08:57और यह अभी भी एक्सपेरिमेंटल (experimental) है।
00:08:58API सरफेस बदल जाएगा।
00:09:00व्यापक सपोर्ट के साथ Chrome 146 मार्च में शिप होगा।
00:09:03लेकिन तब तक, यह एक डेव ट्रायल (dev trial) है।
00:09:05इसे अभी प्रोडक्शन में न भेजें।
00:09:06यदि आप इस चैनल को फॉलो करते हैं, तो आप जानते हैं कि AI के साथ बने रहने के लिए एक मजबूत तकनीकी आधार की आवश्यकता होती है।
00:09:11इसीलिए मुझे Brilliant पसंद है।
00:09:13यह एक इंटरैक्टिव प्लेटफॉर्म है जिसमें MIT, Harvard और Stanford के विश्व स्तर के
00:09:17शिक्षकों द्वारा तैयार किए गए व्यावहारिक सबक हैं।
00:09:19मैं उनके क्लस्टरिंग और क्लासिफिकेशन और AI कैसे काम करता है कोर्सेज की अत्यधिक अनुशंसा करता हूँ।
00:09:23वे आपको छिपे हुए पैटर्न को उजागर करना और लार्ज लैंग्वेज
00:09:27मॉडल्स के पीछे के लॉजिक को इंटरैक्टिव रूप से समझना सिखाते हैं।
00:09:28जैसा कि आप स्क्रीन पर कैटलॉग में देख सकते हैं, वे बुनियादी गणित से लेकर
00:09:33एडवांस्ड डेटा साइंस और कंप्यूटर साइंस तक सब कुछ कवर करने वाले कोर्सेज की एक विशाल विविधता पेश करते हैं।
00:09:37Brilliant हमारे दर्शकों को वार्षिक प्रीमियम सब्सक्रिप्शन पर 20% की छूट भी दे रहा है, जो प्लेटफ़ॉर्म की
00:09:42हर चीज़ तक असीमित दैनिक पहुंच प्रदान करता है।
00:09:44पूरे 30 दिनों के लिए Brilliant पर मुफ्त में सीखने के लिए, brilliant.org/ailabs पर जाएं, स्क्रीन पर
00:09:50QR कोड स्कैन करें, या डिस्क्रिप्शन में दिए गए लिंक पर क्लिक करें।
00:09:53आज ही सीखने की एक वास्तविक आदत डालें और Brilliant पर जाकर
00:09:56अपने स्किल्स को अगले स्तर पर ले जाएं।
00:09:57यह हमें इस वीडियो के अंत में लाता है।
00:09:59यदि आप चैनल को सपोर्ट करना चाहते हैं और हमें इस तरह के वीडियो बनाते रहने में मदद करना चाहते हैं, तो आप
00:10:03नीचे दिए गए सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं।
00:10:06हमेशा की तरह, देखने के लिए धन्यवाद और मैं आपसे अगले वीडियो में मिलूँगा।