ऑटो-कनेक्ट की सुविधा का इस्तेमाल करके, अपने एआई एजेंट को निजी ब्राउज़र से कनेक्ट करना

ऑटो-कनेक्ट सुविधा की मदद से, अपने एआई एजेंट को सीधे तौर पर अपने चालू ब्राउज़र इंस्टेंस से कनेक्ट करें. इससे आपका एजेंट, सैंडबॉक्स की सीमाओं को अनदेखा कर सकता है. इसके लिए, वह आपके मौजूदा टैब, ब्राउज़र एक्सटेंशन, और ऐप्लिकेशन की लाइव स्थिति को इनहेरिट करता है.

वर्कफ़्लो का कॉन्टेक्स्ट इनहेरिट करने से, आपका एजेंट सेशन डेटा को खोए बिना, कोड लिखने से लेकर लाइव ब्राउज़र की स्थिति को डीबग करने तक का काम कर सकता है. यह तब काम आता है, जब आपने किसी ऐप्लिकेशन की स्थिति को पहले ही तय कर लिया हो. जैसे, चेकआउट प्रोसेस का मुश्किल फ़्लो या मैन्युअल तरीके से दोहराई गई गड़बड़ी. ऐसे में, आपको अपने एजेंट को तकनीकी जांच करने की अनुमति देनी होती है, ताकि वह उन चरणों को मैन्युअल तरीके से फिर से लागू न करे.

अपने-आप कनेक्ट होने की सुविधा चालू करने से पहले, इन बातों का ध्यान रखें:

  • सुरक्षा और निजता: ऑटो-कनेक्ट की सुविधा चालू होने पर, आपके एजेंट के पास आपकी ब्राउज़र प्रोफ़ाइल में मौजूद सभी डेटा का ऐक्सेस होता है. इसमें खुले हुए टैब, सेशन स्टोरेज, लोकल स्टोरेज, कुकी, और JavaScript API के ज़रिए उपलब्ध कराया गया अन्य डेटा शामिल है.
  • डेटा की निजता की गारंटी: Chrome DevTools for agents सर्वर, एक लोकल प्रोसेस है. यह आपके ब्राउज़र का डेटा, सेशन टोकन या टेलीमेट्री को Google को नहीं भेजता है.
  • भरोसा और प्रॉम्प्ट: इस मोड का इस्तेमाल सिर्फ़ उन एजेंट के साथ करें जिन पर आपको भरोसा है. साथ ही, प्रॉम्प्ट में शामिल की जाने वाली जानकारी के बारे में सावधानी बरतें.

ज़रूरी शर्तें

अपने-आप कनेक्ट होने की सुविधा का इस्तेमाल करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:

  • Chrome 144 या इसके बाद का वर्शन: अपने-आप कनेक्ट होने की सुविधा के लिए, डीबग करने के आधुनिक प्रोटोकॉल की ज़रूरत होती है. ये प्रोटोकॉल, Chrome के मौजूदा वर्शन में उपलब्ध हैं.
  • सही Chrome चैनल: आपका एजेंट डिफ़ॉल्ट रूप से Chrome स्टेबल चैनल से कनेक्ट होता है. Canary या बीटा चैनल का इस्तेमाल करने के लिए, अपने कॉन्फ़िगरेशन में चैनल की जानकारी दें.
  • रिमोट डीबगिंग चालू है: अपने ब्राउज़र और एजेंट के बीच ब्रिज को मैन्युअल तरीके से चालू करें.
  • सही कॉन्फ़िगरेशन: आपको एमसीपी कॉन्फ़िगरेशन को अपडेट करना होगा, ताकि उसमें --autoConnect फ़्लैग शामिल हो. ज़्यादा जानकारी के लिए, कॉन्फ़िगरेशन देखें.

अपने-आप कनेक्ट होने की सुविधा सेट अप करना

अपने एमसीपी सर्वर में अपने-आप कनेक्ट होने की सुविधा कॉन्फ़िगर करने के लिए, यह तरीका अपनाएं:

  1. Chrome ब्राउज़र में, chrome://inspect/#remote-debugging पर जाएं और रिमोट डीबगिंग चालू करें.
  2. --autoConnect फ़्लैग को शामिल करने के लिए, एमसीपी कॉन्फ़िगरेशन अपडेट करें:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. अपने एजेंट को, खुले हुए 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.

एजेंट के काम करने का उदाहरण: यह आपकी चालू विंडो से कनेक्ट होता है. इसलिए, आपका एजेंट लेआउट का विश्लेषण करता है और तुरंत गड़बड़ी ठीक कर देता है. आपको स्क्रीन पर 'बदलें' बटन दिखेगा. इससे यह पुष्टि होती है कि सोर्स कोड अपडेट करने से पहले, समस्या ठीक हो गई है.