WebMCP React ऐप्स को AI agents के लिए सीधे स्ट्रक्चर्ड टूल APIs उपलब्ध कराने की अनुमति देता है, जिससे नाजुक UI-scraping की जगह भरोसेमंद और UI-स्वतंत्र कॉल्स ले लेती हैं। यह फीचर Chrome 149 और उससे उच्च वर्ज़न के लिए एक origin-trial में उपलब्ध है, और आप इसे chrome://flags/#enable-webmcp-testing के माध्यम से चालू कर सकते हैं।

एजेंट्स को क्लिक करना सिखाने में समस्या

AI agents को वेब पेज के साथ इंटरैक्ट करने देने के अधिकांश वर्तमान प्रयास विजुअल संकेतों (visual cues) पर निर्भर करते हैं। एक एजेंट DOM को पार्स करता है, यह अनुमान लगाता है कि कौन सा एलिमेंट बटन है, क्लिक का अनुकरण (simulate) करता है, स्क्रॉल करता है और फॉर्म फ़ील्ड भरता है। जैसे ही कोई बटन हिलता है, लेबल बदलता है, या लेआउट में थोड़ा बदलाव होता है, स्क्रिप्ट विफल हो जाती है। यह दृष्टिकोण धीमा है क्योंकि यह ब्राउज़र द्वारा प्रत्येक चरण को रेंडर करने का इंतज़ार करता है, और एक सामान्य रीडिज़ाइन पूरे ऑटोमेशन पाइपलाइन को तोड़ सकता है।

WebMCP मॉडल को बदल देता है

WebMCP Google Chrome द्वारा पेश किया गया एक नया वेब स्टैंडर्ड है। एजेंट को एक्सप्लोर करने के लिए विजुअल सरफेस दिखाने के बजाय, एक पेज tools का एक सेट विज्ञापन के रूप में पेश करता है—ये नाम वाले, टाइप किए गए ऑपरेशन्स होते हैं जिन्हें पेज परफॉर्म कर सकता है। एक AI एजेंट पहले पूछता है “कौन से टूल्स उपलब्ध हैं?”; पेज “searchProducts” या “checkout” जैसी सूची के साथ उत्तर देता है। इसके बाद एजेंट टूल के घोषित इनपुट स्कीमा (input schema) से मेल खाने वाला एक JSON पेलोड भेजकर टूल को इनवोक करता है, जैसे कि searchProducts(query: "jacket")। ब्राउज़र इस रिक्वेस्ट को सीधे पेज के JavaScript पर रूट करता है, जो बिना किसी UI भागीदारी के अंतर्निहित लॉजिक (underlying logic) को चलाता है।

इसका परिणाम एक ऐसा इंटरैक्शन है जो तुरंत होता है, CSS बदलावों के बावजूद काम करता है, और तब तक कार्यात्मक रहता है जब तक टूल डेफिनिशन स्थिर रहते हैं।

डेवलपर्स के लिए महत्वपूर्ण लाभ

  • Speed – कम्युनिकेशन ब्राउज़र के मैसेजिंग सिस्टम के अंदर ही रहता है, जिससे क्लिक रेंडर करने और पेज अपडेट का इंतज़ार करने के राउंड-ट्रिप की ज़रूरत खत्म हो जाती है।
  • Reliability – टूल्स उन्हीं फंक्शन्स को कॉल करते हैं जिनका उपयोग साइट पहले से ही अपने UI के लिए कर रही है, इसलिए रीडिज़ाइन से API नहीं टूटता है।
  • Control – डेवलपर्स तय करते हैं कि कौन से ऑपरेशन्स उपलब्ध कराए जाने हैं, वे कौन से पैरामीटर्स स्वीकार करते हैं, और एजेंट रिस्पॉन्स में क्या देख सकता है।
  • UI independence – स्टाइलिंग, लेआउट, या कंपोनेंट रिफैक्टरिंग अब एजेंट की किसी फीचर को इनवोक करने की क्षमता को प्रभावित नहीं करते हैं।

WebMCP सर्वर साइड पर उपयोग किए जाने वाले मौजूदा MCP (Message-Channel-Protocol) को रिप्लेस नहीं करता है। MCP भारी डेटा फेचिंग और बैकएंड ऑर्केस्ट्रेशन को संभालना जारी रखता है, जबकि WebMCP लाइव, इन-टैब इंटरैक्शन को संभालता है।

React डेवलपर्स शुरुआत कैसे कर सकते हैं

React कोड एक इम्पैरेटिव (imperative) JavaScript API या एक डिक्लेरेटिव (declarative) HTML फॉर्म-आधारित API का उपयोग करके टूल्स को रजिस्टर कर सकता है। एक सामान्य पैटर्न रजिस्ट्रेशन को कस्टम हुक (custom hook) में लपेटना है:

  1. टूल के नाम और संक्षिप्त विवरण के साथ एक रजिस्ट्रेशन फंक्शन कॉल करें।
  2. एक इनपुट स्कीमा प्रदान करें (उदाहरण के लिए, आवश्यक फ़ील्ड्स का वर्णन करने वाला एक JSON स्कीमा)।
  3. एक execute कॉलबैक प्रदान करें जो मौजूदा बिजनेस लॉजिक को चलाता है—अक्सर वही फंक्शन जिसे एक बटन क्लिक ट्रिगर करता है।

जब हुक चलता है, तो ब्राउज़र टूल को पेज के WebMCP मैनिफेस्ट (manifest) में जोड़ देता है। मैनिफेस्ट को खोजने वाला एक AI एजेंट फिर कभी DOM को छुए बिना टूल को इनवोक कर सकता है।

क्योंकि रजिस्ट्रेशन कंपोनेंट माउंट टाइम पर होता है, इसलिए टूल्स को विशिष्ट रूट्स या फीचर फ्लैग्स तक सीमित (scoped) किया जा सकता है, जिससे टीमों को इस बात पर बारीक नियंत्रण मिलता है कि AI प्रोडक्शन बनाम टेस्ट एनवायरनमेंट में क्या कर सकता है।

सावधानियां और ध्यान देने योग्य बातें

WebMCP अभी भी एक origin trial है। यह केवल Chrome 149+ में काम करता है और इसे फ्लैग के माध्यम से मैन्युअल रूप से सक्षम किया जाना चाहिए।

आगे क्या है

Google ने उन डेवलपर्स के लिए ट्रायल खोल दिया है जो AI-नेटिव वेब अनुभवों के साथ प्रयोग करना चाहते हैं। इच्छुक लोगों के लिए अगले कदम हैं:

  • Chrome में फ्लैग सक्षम करें और लक्षित साइट को रीलोड करें।
  • एक React कंपोनेंट में एक सरल टूल रजिस्ट्रेशन जोड़ें और ब्राउज़र के devtools में मैनिफेस्ट को दिखाई देते हुए देखें।
  • टूल को कॉल करने और रिस्पॉन्स को सत्यापित करने के लिए एक AI क्लाइंट (उदाहरण के लिए, एक स्थानीय स्क्रिप्ट जो WebMCP प्रोटोकॉल का पालन करती है) का परीक्षण करें।
  • स्टेबल शिपिंग पर अपडेट के लिए ट्रायल के स्टेटस पेज को ट्रैक करें।

निष्कर्ष (Takeaway): WebMCP React डेवलपर्स को अपने ऐप्स को AI agents द्वारा सीधे कॉल करने योग्य बनाने का एक तरीका देता है, जिससे UI एलिमेंट्स को स्थिर, टाइप किए गए सर्विसेज में बदल दिया जाता है। यह बदलाव स्क्रीन-स्क्रैपिंग के मेंटेनेंस के दुस्वप्न (nightmare) को दूर करता है और वास्तव में AI-नेटिव वेब एप्लिकेशन की ओर एक रास्ता खोलता है—बशर्ते टीमें एक प्रयोगात्मक (experimental) Chrome एनवायरनमेंट में काम करने में सहज हों।