अपने-आप कनेक्ट होने की सुविधा की मदद से, एआई एजेंट को सीधे अपने चालू ब्राउज़र इंस्टेंस से कनेक्ट करें. इससे आपका एजेंट, सैंडबॉक्स की पाबंदियों को नज़रअंदाज़ कर सकता है. ऐसा इसलिए, क्योंकि वह आपके मौजूदा टैब, ब्राउज़र एक्सटेंशन, और चालू ऐप्लिकेशन की स्थिति को इनहेरिट करता है.
वर्कफ़्लो के कॉन्टेक्स्ट को इनहेरिट करने से, आपका एजेंट सेशन डेटा को खोए बिना, कोड लिखने से लेकर आपके चालू ब्राउज़र की स्थिति को डीबग करने तक जा सकता है. यह तब काम आता है, जब आपने पहले से ही किसी खास ऐप्लिकेशन की स्थिति (जैसे, जटिल चेकआउट फ़्लो या मैन्युअल तरीके से दोबारा बनाई गई गड़बड़ी) हासिल कर ली हो और आपको उन चरणों को मैन्युअल तरीके से दोबारा किए बिना, तकनीकी जांच के लिए अपने एजेंट की मदद चाहिए.
अपने-आप कनेक्ट होने की सुविधा चालू करने से पहले, यह ध्यान रखें:
- सुरक्षा और निजता: अपने-आप कनेक्ट होने की सुविधा चालू होने पर, आपके एजेंट के पास आपके ब्राउज़र प्रोफ़ाइल में मौजूद सभी डेटा का ऐक्सेस होता है. इसमें खुले टैब, सेशन स्टोरेज, लोकल स्टोरेज, कुकी, और JavaScript API के ज़रिए दिखने वाला अन्य डेटा शामिल होता है.
- डेटा की निजता की गारंटी: एजेंट के लिए Chrome DevTools का सर्वर, एक लोकल प्रोसेस है. यह Google को आपका ब्राउज़र डेटा, सेशन टोकन या टेलीमेट्री नहीं भेजता.
- भरोसा और प्रॉम्प्ट: इस मोड का इस्तेमाल सिर्फ़ उन एजेंट के साथ करें जिन पर आपको भरोसा है. साथ ही, प्रॉम्प्ट में शामिल की जाने वाली जानकारी के बारे में सावधान रहें.
ज़रूरी शर्तें
अपने-आप कनेक्ट होने की सुविधा का इस्तेमाल करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:
- Chrome 144 या इसके बाद का वर्शन: अपने-आप कनेक्ट होने की सुविधा के लिए, Chrome के मौजूदा वर्शन में मौजूद, आधुनिक डीबग करने के प्रोटोकॉल की ज़रूरत होती है.
- Chrome का सही चैनल: आपका एजेंट, डिफ़ॉल्ट रूप से Chrome के स्टेबल वर्शन से कनेक्ट होता है. Canary या बीटा वर्शन का इस्तेमाल करने के लिए, अपने कॉन्फ़िगरेशन में चैनल की जानकारी दें.
- रिमोट डीबग करने की सुविधा चालू हो: अपने ब्राउज़र और एजेंट के बीच ब्रिज को मैन्युअल तरीके से चालू करें.
- सही कॉन्फ़िगरेशन: आपको एमसीपी कॉन्फ़िगरेशन को अपडेट करके, उसमें
--autoConnectफ़्लैग शामिल करना होगा.
अपने-आप कनेक्ट होने की सुविधा सेट अप करना
अपने एमसीपी सर्वर में, अपने-आप कनेक्ट होने की सुविधा को कॉन्फ़िगर करने के लिए, यह तरीका अपनाएं:
- Chrome ब्राउज़र में,
chrome://inspect/#remote-debuggingपर जाएं और रिमोट डीबग करने की सुविधा चालू करें. अपने एमसीपी कॉन्फ़िगरेशन को अपडेट करके, उसमें
--autoConnectफ़्लैग शामिल करें:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }अपने एजेंट को, Chrome के खुले हुए ऐप्लिकेशन से इंटरैक्ट करने के लिए कहें. जब Chrome, सेशन की अनुमति मांगे, तो अनुमति दें पर क्लिक करें.
अब आपका एजेंट, Chrome के चालू ऐप्लिकेशन से इंटरैक्ट करने के लिए, एमसीपी सर्वर का इस्तेमाल करता है.
अपने-आप कनेक्ट होने की सुविधा के इस्तेमाल के उदाहरण
अपने-आप कनेक्ट होने की सुविधा की मदद से, उन टूल या स्थितियों का इस्तेमाल किया जा सकता है जिन्हें सैंडबॉक्स वाले Chrome सेशन पर इस्तेमाल नहीं किया जा सकता. उदाहरण के लिए, अपने एजेंट से साइन इन करने के लिए कहने के बजाय, खुद उस पेज पर जाएं और साइन इन करें. ऐसा इसलिए, क्योंकि अक्सर एजेंट से साइन इन करने के लिए कहने पर, गड़बड़ी होती है. इसके बाद, अपने एजेंट से काम करने के लिए कहें.
यहां, अपने-आप कनेक्ट होने की सुविधा के इस्तेमाल के कुछ उदाहरण दिए गए हैं.
पुष्टि किए गए डैशबोर्ड को डीबग करना
आम तौर पर, इंटरनल टूल और निजी डैशबोर्ड, सिंगल साइन-ऑन (एसएसओ) या वर्चुअल प्राइवेट नेटवर्क (वीपीएन) की जटिल लेयर के पीछे होते हैं. सैंडबॉक्स वाले ब्राउज़र में आम तौर पर, साइन-इन करना ज़रूरी होता है. आपका एजेंट, इसे नज़रअंदाज़ नहीं कर सकता. अपने-आप कनेक्ट होने की सुविधा की मदद से, आपका एजेंट आपके चालू सेशन को इनहेरिट करता है.
प्रॉम्प्ट का उदाहरण:
I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?
एजेंट के काम करने का उदाहरण: आपका एजेंट, Chrome की मौजूदा प्रोसेस की पहचान करता है, चालू टैब ढूंढता है, और एलिमेंट ढूंढने के लिए, ऐक्सेसिबिलिटी ट्री की जांच करता है. वह खास टकरावों का आकलन करने के लिए, JavaScript API का भी इस्तेमाल कर सकता है.
मौजूदा टैब में गड़बड़ी को तुरंत ठीक करना
गड़बड़ियों को मैन्युअल तरीके से दोबारा बनाने से बचें. सैंडबॉक्स वाले एजेंट के लिए, गड़बड़ी को दोबारा बनाने के चरणों को नए प्रॉम्प्ट में ट्रांसलेट करने के बजाय, अपने एजेंट से उस चालू पेज पर गड़बड़ी ठीक करने के लिए कहें जहां आपको पहले से ही गड़बड़ी मिली है.
प्रॉम्प्ट का उदाहरण:
Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.
एजेंट के काम करने का उदाहरण: आपका एजेंट, चालू विंडो से कनेक्ट होने की वजह से, आपके लेआउट का विश्लेषण करता है और गड़बड़ी को तुरंत ठीक कर देता है. आपको अपनी स्क्रीन पर बटन दिखता है. इससे पुष्टि होती है कि सोर्स कोड अपडेट करने से पहले, गड़बड़ी ठीक हो गई है.