00:00:00Google और Microsoft द्वारा समर्थित एक नया प्रस्ताव आया है जो भविष्य को आकार दे सकता है
00:00:03कि हम वेब का उपयोग कैसे करते हैं, और यह मुझे काफी पसंद आ रहा है। इसका नाम WebMCP है, लेकिन इसे
00:00:08किसी सामान्य MCP सर्वर समझने की गलती न करें। इसके बजाय, WebMCP वास्तव में एक ब्राउज़र API है और यह फ्रंट
00:00:13एंड डेवलपर्स को अपनी साइटों की सुविधाओं को AI एजेंटों के लिए टूल के रूप में पेश करने की अनुमति देगा, जिससे
00:00:18हर साइट एक मिनी MCP सर्वर बन जाएगी। और हालांकि आपने पहले ही कुछ साइटों को अपने
00:00:23स्वयं के MCP सर्वर के साथ शुरू होते देखा होगा, यह उससे थोड़ा अलग है। इसका लक्ष्य वास्तव में
00:00:27आपके एजेंटों को आपके लिए वेबसाइट का उपयोग करने देना है, न कि केवल आपके API तक पहुँच कर उसे
00:00:32चैट में दिखाना। यह पूरी तरह से फ्रंट एंड पर आधारित होगा। अब, यदि यह अंतर सुनने में थोड़ा
00:00:37भ्रमित करने वाला लग रहा है, तो चलिए सीधे डेमो देखते हैं और बात करते हैं कि मुझे यह क्यों पसंद है।
00:00:46अब सबसे पहले मैं यह स्वीकार करना चाहता हूँ कि यह डेमो बहुत रोमांचक नहीं लगेगा, लेकिन
00:00:49WebMCP का उद्देश्य ही यही है। यह किसी ऐसी चीज़ को ले रहा है जो पहले से संभव है, लेकिन
00:00:54उसे बहुत बेहतर बना रहा है। तो मेरे साथ बने रहें। यहाँ मेरे पास Chrome का Canary वर्शन
00:00:58है जिसमें वे इस प्रस्ताव का परीक्षण कर रहे हैं, और एक साइट भी है जिसे
00:01:02कुछ WebMCP टूल्स के साथ सेट किया गया है। आप दाईं ओर देख सकते हैं कि मेरे पास एक एक्सटेंशन है जो
00:01:06इन WebMCP टूल्स के साथ इंटरैक्ट करने में सक्षम है, लेकिन कल्पना कीजिए कि भविष्य में यह आपका सामान्य ब्राउज़र
00:01:10इन-बिल्ट AI होगा, चाहे वह Gemini हो, ChatGPT Atlas हो या ARC अब जिसमें भी बदल गया हो।
00:01:15आप देख सकते हैं कि यदि मैं इस साइट पर रहते हुए एक यूज़र प्रॉम्प्ट भेजना चाहता हूँ, जैसे कि मैं
00:01:19लंदन से न्यूयॉर्क के लिए विशिष्ट तारीखों पर दो लोगों के लिए राउंड ट्रिप फ्लाइट बुक करना चाहता हूँ और
00:01:23मैं सेंड दबाता हूँ, तो यह मुझे सर्च रिज़ल्ट पेज पर ले जाएगा, यानी इसने मेरे लिए
00:01:28वेबसाइट का उपयोग किया है। वाह, कमाल है न? हाँ, जैसा कि मैंने कहा था यह डेमो बहुत बेसिक लगेगा,
00:01:33लेकिन WebMCP की मुख्य बात यह है कि इसने मेरे लिए उस साइट का उपयोग कैसे किया। वेबसाइटों का उपयोग करने का AI का वर्तमान तरीका
00:01:38आमतौर पर Playwright, HTML पार्सिंग या यहाँ तक कि आपकी साइट के स्क्रीनशॉट लेने
00:01:42और उसे एक इंसान की तरह उपयोग करने की कोशिश करने जैसा होता है। लेकिन वह सब काफी अक्षम है, खासकर
00:01:48टोकन के मामले में, और इसमें अभी भी बहुत सारी गलतियाँ होने की संभावना रहती है। तो WebMCP इसी को
00:01:53ठीक करने के लिए है। WebMCP इसके बजाय वेबसाइट डेवलपर को कुछ खास MCP टूल उपलब्ध कराने देता है जो
00:01:58क्लाइंट-साइड जावास्क्रिप्ट के साथ इंटरैक्ट करते हैं। तो बस यही होता है जब कोई AI इनमें से
00:02:03किसी एक WebMCP टूल का उपयोग करना चुनता है। यह बस आपकी साइट पर एक जावास्क्रिप्ट फंक्शन चला रहा है
00:02:07जिसे आप डेवलपर ने चलाने के लिए सेट किया है। तो आप इस डेमो फ्लाइट
00:02:12पेज के उदाहरण पर देख सकते हैं कि मेरे पास “सर्च फ्लाइट्स” नाम का एक WebMCP टूल उपलब्ध है और आप देख सकते हैं कि यह
00:02:16ओरिजिन, डेस्टिनेशन और ट्रिप टाइप जैसे कुछ इनपुट आर्ग्युमेंट लेता है जो हमारे पास मौजूद
00:02:20फॉर्म के साथ पूरी तरह मेल खाते हैं। महत्वपूर्ण बात यह है कि AI अब जानता है कि वह इस
00:02:25MCP टूल का उपयोग कर सकता है। इसलिए जब हम इस तरह के प्रॉम्प्ट पर सेंड दबाते हैं, तो यह
00:02:29Playwright या HTML पार्सिंग जैसा कुछ करके फॉर्म नहीं भरेगा। वास्तव में, इसे यह जानने की ज़रूरत ही नहीं है कि वेबसाइट
00:02:34कैसी दिखती है या उसका HTML कैसा है। इसे बस यह पता है कि इसके पास वह WebMCP
00:02:38टूल है और यह उसे उन इनपुट आर्ग्युमेंट्स के साथ कॉल करता है और डेवलपर के रूप में मैंने सेट किया है कि क्या होगा
00:02:43जब मैं उन इनपुट आर्ग्युमेंट्स को लेता हूँ और एक जावास्क्रिप्ट फंक्शन चलाता हूँ, जो इस मामले में
00:02:47बस रिएक्ट स्टेट को अपडेट करता है और इसके कारण सर्च फ्लाइट पेज पर नेविगेशन होता है। यदि हम
00:02:52इसके लिए फ्रंट एंड कोड को देखें, तो यह अविश्वसनीय रूप से सरल है और उम्मीद है कि
00:02:55यह और भी स्पष्ट होने लगेगा। आप देख सकते हैं कि हमें सबसे पहले उन
00:02:59WebMCP टूल्स को रजिस्टर करना होगा जो किसी दिए गए पेज के लिए उपलब्ध हैं और हम window.navigator.model_context का उपयोग करके ऐसा कर सकते हैं।
00:03:04तो यह वह API है जिसे ब्राउज़रों में बनाने की आवश्यकता होगी यदि यह प्रस्ताव
00:03:09पास हो जाता है और यह वर्तमान में Chrome Canary में है ताकि वे इसका परीक्षण कर सकें। हम देख सकते हैं कि एक बार
00:03:13जब हमारे पास अपना मॉडल कॉन्टेक्स्ट API हो जाता है, तो हम register tool फंक्शन का उपयोग करके
00:03:18अपने टूल रजिस्टर कर सकते हैं और इस मामले में मैं सर्च फ्लाइट्स टूल को रजिस्टर कर रहा हूँ जिसे हमने
00:03:22पहले इस्तेमाल होते देखा था। अगर हम देखें कि वास्तव में एक टूल क्या है, तो आप देख सकते हैं कि यह एक बहुत ही सरल ऑब्जेक्ट डेफिनिशन है।
00:03:26हमारे पास एक नाम है, एक विवरण है, तो यह AI को दिया जाता है ताकि वह जान सके कि
00:03:30इस टूल का उपयोग कब करना है और यदि हम कोई आर्ग्युमेंट लेना चाहते हैं तो हमारे पास एक इनपुट स्कीमा भी है। मेरे
00:03:34मामले में मेरे पास उस फॉर्म से मिलान करने के लिए ओरिजिन और डेस्टिनेशन जैसी चीज़ें थीं। आप देख सकते हैं कि हमारे पास
00:03:38कुछ और कॉन्टेक्स्ट भी है जो हम AI को दे सकते हैं ताकि वह समझ सके कि वे आर्ग्युमेंट वास्तव में क्या
00:03:42होने चाहिए। टूल डेफिनिशन का महत्वपूर्ण हिस्सा execute फंक्शन है। यह क्लाइंट
00:03:47साइड जावास्क्रिप्ट है जो आपकी साइट पर तब चलेगा जब इस MCP टूल का उपयोग किया जाएगा। तो यह
00:03:51मूल रूप से वह कुछ भी हो सकता है जो आप चाहते हैं। मेरे मामले में मैं सर्च फ्लाइट्स फंक्शन का उपयोग कर रहा हूँ
00:03:55और हमें इसके इम्प्लीमेंटेशन के बारे में ज़्यादा चिंता करने की ज़रूरत नहीं है लेकिन अनिवार्य रूप से मैं बस
00:03:59उन मापदंडों को ले रहा हूँ जिन्हें AI ने उन इनपुट आर्ग्युमेंट्स के लिए भरा है और मैं
00:04:03उन मापदंडों के साथ सर्च फ्लाइट्स नाम का एक इवेंट डिस्पैच कर रहा हूँ। फिर मेरे रिएक्ट कोड में मैं बस
00:04:08उस सर्च फ्लाइट्स इवेंट के लिए एक इवेंट लिसनर जोड़ रहा हूँ और जब हमें वह मिल जाता है तो मैं बस
00:04:12handle search flights फंक्शन चला रहा हूँ और यहीं पर हम मूल रूप से वह सब कुछ कर सकते हैं
00:04:15जो हम रिएक्ट में कर सकते हैं और मेरे मामले में मैं मापदंडों को ले रहा हूँ और उन्हें बस
00:04:19सर्च मापदंडों के रूप में सेट कर रहा हूँ जिससे नेविगेशन होता है। यह वास्तव में इतना आसान है और इसीलिए मुझे यह तरीका
00:04:24वाकई पसंद है क्योंकि यह न केवल टोकन के मामले में अविश्वसनीय रूप से कुशल है, बल्कि यह मुझे डेवलपर के रूप में
00:04:29साइट के इंटरैक्शन को परिभाषित करने की अनुमति देता है और AI मेरे द्वारा बनाए गए नियमों का पालन कर सकता है। यह
00:04:34इंसान और AI असिस्टेंट दोनों को ध्यान में रखकर साइट बनाने का एक बहुत ही शानदार समाधान है,
00:04:39बजाय वर्तमान तरीके के जिसमें इंसान के लिए साइट बनाई जाती है और फिर AI के लिए एक MCP सर्वर
00:04:43और यदि AI को वेबसाइट का उपयोग करने की आवश्यकता है, तो आपको बस यह उम्मीद करनी होगी कि वह किसी तरह इसे
00:04:48समझ ले। यह भी ध्यान देने योग्य है कि ये वेब MCP टूल केवल आपके पेज पर किसी
00:04:51इवेंट जैसे कि नेविगेशन या फॉर्म भरने के लिए ही उपयोगी नहीं हैं, बल्कि वे तब भी बहुत
00:04:55काम आते हैं जब आपको पेज पर मौजूद जानकारी को पार्स करने की आवश्यकता होती है। मान लीजिए कि मैं एक इंसान के रूप में यहाँ आया
00:05:00और इनमें से कुछ फिल्टर को एडजस्ट करना शुरू किया जैसे कि मुझे $500 से कम कीमत और दोपहर से पहले का
00:05:05डिपार्चर टाइम चाहिए। इस पेज पर अभी भी काफी सारी उड़ानें हैं इसलिए मैं चाहता हूँ कि
00:05:11AI सबसे अच्छी उड़ान चुनने में मेरी मदद करे। तो मैं कह सकता हूँ कि आप इस पेज पर किस उड़ान की सिफारिश करेंगे।
00:05:15अब वर्तमान तरीके पूरे पेज को लेने के लिए केवल playwright या HTML पार्सिंग का उपयोग करेंगे और
00:05:20यहाँ की जानकारी को समझने और इसे किसी प्रकार के संरचित डेटा में बदलने की कोशिश करेंगे,
00:05:24लेकिन हमें वेब MCP के साथ ऐसा करने की ज़रूरत नहीं है। इसके बजाय मैंने डेवलपर के रूप में बस
00:05:29एक वेब MCP टूल सेट किया है जिसे list flights कहा जाता है और इसके पास वर्तमान रिएक्ट स्टेट तक पहुँच है
00:05:33तो इसके पास उस सभी जानकारी तक पहुँच है जो यहाँ उपयोगकर्ता को दिखाई जा रही है लेकिन अच्छे
00:05:38JSON फॉर्मेट में। तो इस तरह यदि मैं वास्तव में AI से यह प्रॉम्प्ट पूछता हूँ तो आप देख सकते हैं कि यह
00:05:42उस टूल को कॉल करता है, उन सभी उड़ानों को सूचीबद्ध करता है जो वर्तमान में इस पेज पर दिख रही हैं और यह
00:05:46हमें यहाँ फ्लाइट 56 के लिए एक सिफारिश देता है। और मैं उस फ्लाइट को यहाँ पेज पर
00:05:51ढूँढ सकता हूँ। इस प्रक्रिया में बहुत कम टोकन का उपयोग हुआ है और यह कहीं अधिक सटीक होने वाला है। अब
00:05:56अंतिम चीज़ जो मैं दिखाना चाहता हूँ वह यह है कि आप वास्तव में बिना किसी जावास्क्रिप्ट के
00:06:00वेब MCP का लाभ कैसे उठा सकते हैं। अब तक हम वास्तव में इम्पैरेटिव API का उपयोग कर रहे थे जहाँ
00:06:05मैंने डेवलपर के रूप में टूल कॉल को संभालने और विशिष्ट टूल रजिस्टर करने के लिए जावास्क्रिप्ट लिखा है।
00:06:10एक दूसरा तरीका भी है जिसे डिक्लेरेटिव API कहा जाता है। यह तरीका बहुत सरल है क्योंकि यह
00:06:14HTML फॉर्म भरने के सरल उपयोग के मामले के लिए है। तो आप देख सकते हैं कि मेरे पास एक बहुत ही सरल
00:06:19बुकिंग रिजर्वेशन फॉर्म है और मैं अपने AI से बस फॉर्म भरने के लिए आवश्यक कुछ जानकारी के साथ मेरे लिए एक टेबल बुक करने के लिए कह सकता हूँ
00:06:23और यह आगे बढ़ेगा और वास्तव में मेरे लिए उस फॉर्म को भर देगा।
00:06:27ऐसा इसलिए है क्योंकि इसके पास book table नामक वेब MCP टूल तक पहुँच है। लेकिन यहाँ महत्वपूर्ण
00:06:32बात यह है कि मैंने इस वेब MCP टूल तक पहुँच पाने के लिए कोई जावास्क्रिप्ट नहीं लिखा। और
00:06:36ऐसा इसलिए है क्योंकि वेब MCP का डिक्लेरेटिव API जिस तरह से काम करता है वह यह है कि आपको बस अपने HTML फॉर्म में
00:06:40एक टूल नाम और एक टूल विवरण एट्रिब्यूट जोड़ना होगा और ब्राउज़र फिर
00:06:44उस फॉर्म को आपके लिए वेब MCP टूल में बदलने की कोशिश करेगा और यह समझने की कोशिश करेगा कि MCP टूल के आर्ग्युमेंट के लिए
00:06:49प्रत्येक इनपुट क्या होना चाहिए। और हम यहाँ देखते हैं कि हमारे पास उस बुकिंग फॉर्म पर
00:06:53book table का एक टूल नाम है जो हमने देखा था और एक टूल विवरण है। इसलिए AI जानता है
00:06:57कि इसे कब कॉल करना है और हमारे पास बस एक सामान्य HTML फॉर्म है। यहाँ एकमात्र अन्य अंतर कुछ
00:07:02इनपुट में है। हम AI को इस बारे में थोड़ा और कॉन्टेक्स्ट देने के लिए tool param description एट्रिब्यूट का भी उपयोग करते हैं
00:07:06कि उसे वह जानकारी कैसे भरनी चाहिए। लेकिन बाकी के लिए, ब्राउज़र
00:07:10इनपुट, इनपुट प्रकार, इनपुट नाम को उठाएगा और MCP टूल बनाने के लिए उसका उपयोग करेगा।
00:07:14और हम उसे यहाँ अपने इंस्पेक्टर पर वापस देख सकते हैं जहाँ इसने इनपुट आर्ग्युमेंट्स को सही ढंग से
00:07:18नाम, फोन, तारीख, समय, मेहमान, सीटिंग और अनुरोधों के रूप में चुना है। और इसने यह सब
00:07:23बिना किसी जावास्क्रिप्ट लिखे, सरल HTML फॉर्म लॉजिक का उपयोग करके किया है। फिलहाल वेब MCP
00:07:27प्रस्ताव में बस इतना ही है। और जैसा कि मैंने कहा, मैं इसके बारे में काफी सकारात्मक हूँ।
00:07:31मुझे वह तरीका पसंद है जिससे यह वेब ऐप्स और AI एजेंटों के बीच की दूरी को कम करता है, और
00:07:34यह किसी भी अटकलबाजी को दूर करता है जब एजेंट किसी साइट का उपयोग करने की कोशिश कर रहे होते हैं और यह सुनिश्चित करता है
00:07:38कि कोई भी इंटरैक्शन वेबसाइट डेवलपर्स द्वारा स्पष्ट रूप से परिभाषित किया गया हो। साथ ही मैं अभी भी
00:07:43पूरी तरह से AI के वश में नहीं हूँ। मुझे यह तब पसंद आता है जब कोई ऐसा टूल हो जो AI एजेंट को मुझे रिप्लेस करने के बजाय
00:07:47मेरे साथ काम करने में मदद करे। मुझे चैट जीपीटी के इंटरफ़ेस में अपनी उड़ानें या रेस्तरां बुक करने का
00:07:51विचार पसंद नहीं है। और मैं ब्राउज़र में खुद वास्तविक वेबसाइट पर जाना कहीं ज़्यादा पसंद करता हूँ।
00:07:56और यदि मैं चाहूँ, तो मैं उस पेज पर AI की मदद ले सकता हूँ। यह इंसान को
00:08:00शामिल रखने और वेबसाइट डेवलपर्स को यह परिभाषित करने की अनुमति देने का एक बेहतर सिस्टम है कि वह अनुभव कैसा हो।
00:08:05लेकिन यह भी याद रखना ज़रूरी है कि यह फिलहाल सिर्फ एक प्रस्ताव है। इसलिए ब्राउज़रों में
00:08:08इसे आने में कुछ समय लग सकता है। और कुछ सीमाएँ भी हैं जिनसे आपको निपटने की आवश्यकता है।
00:08:12जैसे सुरक्षा का क्लासिक मुद्दा, कुछ वेबसाइटों पर ज़हरीले टूल और
00:08:16विवरण हो सकते हैं। तो उपयोगकर्ता की जानकारी तक इसे कितनी पहुँच दी जाती है और
00:08:21ब्राउज़र AI का पूरे ब्राउज़र पर कितना नियंत्रण होगा। तो यदि इनमें से कोई एक ज़हरीला टूल
00:08:25नियंत्रण से बाहर हो जाता है, तो वह कितना नुकसान पहुँचा सकता है? उम्मीद है कि उन्हें इसके लिए कोई जवाब मिल जाएगा
00:08:29क्योंकि मैं इस प्रस्ताव को लेकर काफी सकारात्मक हूँ। मुझे कमेंट्स में बताएं कि आप इसके बारे में क्या सोचते हैं।
00:08:33वहीं पर सब्सक्राइब करें। और हमेशा की तरह, मिलते हैं अगले वीडियो में।