वेब ऑटोमेशन एजेंट: Claude और Computer Use से ब्राउज़र नियंत्रण

आपकी कंपनी को एक सप्लायर पोर्टल से डेटा चाहिए जिसका कोई API नहीं है। यह एक वेब ऐप है जिसमें डायनामिक कंटेंट, मल्टी-स्टेप फॉर्म और एक लेआउट है जो हर कुछ महीनों में बदल जाता है। आपकी Selenium स्क्रिप्ट हर बार CSS अपडेट होने पर टूट जाती है। आप इसे लेगेसी कोड की तरह मेंटेन करते हैं — नाज़ुक, महंगा, और कोई इसे छूना नहीं चाहता।

एक विज़न-आधारित एजेंट को CSS सेलेक्टर्स की परवाह नहीं है। यह पेज देखता है, “Search” बटन को विज़ुअली खोजता है, क्लिक करता है, रिज़ल्ट टेबल पढ़ता है, और डेटा निकालता है। जब लेआउट बदलता है, तो एजेंट अनुकूलित हो जाता है क्योंकि यह पेज को एक इंसान की तरह पढ़ रहा है — DOM पार्स नहीं कर रहा।

यह लेख आपको Claude की computer use क्षमताओं का उपयोग करके वेब ऑटोमेशन एजेंट बनाना सिखाता है। आप विज़ुअल ऑटोमेशन की मूल मैकेनिक्स, विश्वसनीय नेविगेशन पैटर्न, डेटा एक्सट्रैक्शन तकनीकें, फॉर्म-फिलिंग वर्कफ़्लो, और एरर रिकवरी रणनीतियाँ सीखेंगे। अंत तक, आपके पास ऐसे पैटर्न होंगे जो किसी भी वेब इंटरफ़ेस के साथ इंटरैक्ट करने वाले एजेंट बनाने के लिए ज़रूरी हैं — सरल पेज रीड से लेकर जटिल मल्टी-स्टेप वर्कफ़्लो तक।

विज़ुअल बनाम पारंपरिक ऑटोमेशन

विज़न-आधारित एजेंट बनाने से पहले, आपको समझना होगा कि यह कब सही है — और कब नहीं। Selenium और Playwright जैसे पारंपरिक ऑटोमेशन टूल कहीं नहीं जा रहे। वे तेज़, डिटरमिनिस्टिक और अच्छी तरह समझे हुए हैं। सवाल यह है कि हर दृष्टिकोण कहाँ श्रेष्ठ है और कहाँ विफल होता है।

पारंपरिक ऑटोमेशन (Selenium/Playwright)

पारंपरिक ब्राउज़र ऑटोमेशन DOM के साथ इंटरैक्ट करके काम करता है। आप CSS सेलेक्टर्स या XPath एक्सप्रेशन का उपयोग करके एलिमेंट्स खोजते हैं, फिर उन पर प्रोग्रामेटिक रूप से एक्शन करते हैं:

# Traditional approach — fast but brittle
search_input = driver.find_element(By.CSS_SELECTOR, "#search-box-v3 > input.query")
search_input.send_keys("industrial bearings")
driver.find_element(By.CSS_SELECTOR, "button.search-submit-2024").click()

यह तेज़ है। यह डिटरमिनिस्टिक है। और जैसे ही कोई search-box-v3 को search-box-v4 में बदलता है या फॉर्म लेआउट को पुनर्गठित करता है, यह टूट जाता है। आप सेलेक्टर्स की एक मैपिंग मेंटेन करते रहते हैं जो साइट की आंतरिक संरचना को दर्पण करती है — एक ऐसी संरचना जो आपके नियंत्रण में नहीं है।

पारंपरिक ऑटोमेशन विज़ुअल-ओनली कंटेंट को भी हैंडल नहीं कर सकता। अगर आपको जो डेटा चाहिए वह <canvas> एलिमेंट में रेंडर किया गया है, किसी इमेज में एम्बेडेड है, या ब्राउज़र के अंदर PDF के रूप में दिखाया गया है, तो DOM सेलेक्टर्स उस तक नहीं पहुँच सकते।

विज़न-आधारित ऑटोमेशन (Computer Use)

विज़न-आधारित ऑटोमेशन उसी तरह काम करता है जैसे एक इंसान करता है। एजेंट एक स्क्रीनशॉट प्राप्त करता है, विज़ुअली उन एलिमेंट्स की पहचान करता है जिनकी उसे ज़रूरत है, और विशिष्ट कोऑर्डिनेट्स पर माउस/कीबोर्ड एक्शन जारी करता है:

# Vision-based approach — resilient but slower
# Agent sees the page, finds the search box visually, and types into it
# No selectors needed — it adapts to layout changes automatically

ट्रेडऑफ़: यह धीमा है (हर एक्शन के लिए एक इमेज के साथ API कॉल चाहिए), अधिक महंगा है (स्क्रीनशॉट्स के लिए टोकन), और नॉन-डिटरमिनिस्टिक है (एजेंट अलग-अलग रन में स्क्रीनशॉट को अलग तरह से इंटरप्रेट कर सकता है)। लेकिन यह लेआउट बदलावों के प्रति लचीला है, किसी भी विज़ुअल इंटरफ़ेस पर काम करता है, और पेज कंटेंट को सेमांटिक रूप से समझ सकता है।

हाइब्रिड दृष्टिकोण

सबसे व्यावहारिक रणनीति दोनों को जोड़ती है:

• पारंपरिक ऑटोमेशन का उपयोग करें स्थिर, अच्छी तरह से संरचित पेजों के लिए जहाँ आप इंटरफ़ेस को नियंत्रित करते हैं या यह शायद ही कभी बदलता है।
• विज़न-आधारित ऑटोमेशन का उपयोग करें डायनामिक पेजों, अपरिचित इंटरफ़ेस, विज़ुअल कंटेंट, या ऐसे वन-टाइम कार्यों के लिए जिनके लिए स्क्रिप्ट मेंटेन करना उचित नहीं है।
• फ़ॉलबैक के रूप में विज़न का उपयोग करें — पहले सेलेक्टर आज़माएँ; अगर विफल हो, तो विज़ुअल पहचान पर फ़ॉलबैक करें।

विज़न कब चुनें

विज़न-आधारित ऑटोमेशन सही विकल्प है जब:

• कोई API उपलब्ध नहीं है और वेब इंटरफ़ेस आपका एकमात्र विकल्प है
• पेज लेआउट बार-बार बदलता है और सेलेक्टर मेंटेनेंस बहुत महंगा है
• कंटेंट विज़ुअल है — चार्ट, इमेजेज़, कैनवस एलिमेंट्स, एम्बेडेड PDFs
• मल्टी-स्टेप वर्कफ़्लो को कॉन्टेक्स्ट की ज़रूरत है — अगला कदम तय करने के लिए स्क्रीन पर क्या है यह समझना
• वन-टाइम ऑटोमेशन जो एक मेंटेन की गई Selenium स्क्रिप्ट की इंजीनियरिंग लागत को उचित नहीं ठहराते
• अपरिचित इंटरफ़ेस जहाँ आप सेलेक्टर्स मैप करने के बजाय नेचुरल लैंग्वेज में टास्क का वर्णन कर सकते हैं

Claude Computer Use की बुनियादी बातें

Claude की computer use क्षमता मॉडल को कंप्यूटर स्क्रीन के साथ उसी तरह इंटरैक्ट करने देती है जैसे एक इंसान करता है — स्क्रीनशॉट देखकर और माउस तथा कीबोर्ड एक्शन जारी करके। विश्वसनीय एजेंट बनाने से पहले मैकेनिक्स को समझना ज़रूरी है।

यह कैसे काम करता है

कंप्यूटर यूज़ लूप सीधा है:

1. वर्तमान स्क्रीन (या ब्राउज़र विंडो) का स्क्रीनशॉट कैप्चर करें
2. स्क्रीनशॉट को टास्क विवरण के साथ Claude को भेजें
3. एक टूल कॉल प्राप्त करें — Claude आपको बताता है कि कौन सा एक्शन करना है (क्लिक, टाइप, स्क्रॉल)
4. ब्राउज़र में एक्शन निष्पादित करें
5. एक नया स्क्रीनशॉट कैप्चर करें
6. टास्क पूरा होने या एजेंट के done सिग्नल देने तक दोहराएँ

Claude कभी भी सीधे ब्राउज़र को नियंत्रित नहीं करता। आपका कोड मध्यस्थ के रूप में कार्य करता है — मॉडल से निर्देश प्राप्त करता है और उन्हें वास्तविक वातावरण में निष्पादित करता है।

टूल परिभाषाएँ

Computer use एक विशिष्ट टूल परिभाषा पर निर्भर करता है — computer_20241022 — जो उपलब्ध एक्शन का वर्णन करती है:

computer_tool = {
    "type": "computer_20241022",
    "name": "computer",
    "display_width_px": 1280,
    "display_height_px": 800,
    "display_number": 1,
}

उपलब्ध एक्शन में शामिल हैं:

• screenshot — वर्तमान स्क्रीन स्थिति कैप्चर करें
• mouse_move — कर्सर को विशिष्ट कोऑर्डिनेट्स पर ले जाएँ
• left_click / right_click / double_click — वर्तमान कर्सर स्थिति पर क्लिक करें
• left_click_drag — क्लिक करें और लक्ष्य स्थिति तक ड्रैग करें
• type — टेक्स्ट की एक स्ट्रिंग टाइप करें
• key — एक विशिष्ट की या की कॉम्बिनेशन दबाएँ (जैसे, Return, ctrl+a)
• scroll — वर्तमान कर्सर स्थिति पर ऊपर या नीचे स्क्रॉल करें

एक्शन लूप

यहाँ कोर कंप्यूटर यूज़ लूप का पूरा इम्प्लीमेंटेशन है:

import anthropic
import base64
import subprocess
import time

client = anthropic.Anthropic()

def capture_screenshot() -> str:
    """Capture screen and return base64-encoded PNG."""
    # Using scrot for X11; adapt for your environment
    subprocess.run(["scrot", "/tmp/screenshot.png"], check=True)
    with open("/tmp/screenshot.png", "rb") as f:
        return base64.standard_b64encode(f.read()).decode("utf-8")

def execute_action(action: dict):
    """Execute a computer use action using xdotool."""
    action_type = action.get("action")

    if action_type == "screenshot":
        return  # Screenshot will be taken in the main loop

    elif action_type == "mouse_move":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])

    elif action_type == "left_click":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        subprocess.run(["xdotool", "click", "1"])

    elif action_type == "type":
        text = action["text"]
        subprocess.run(["xdotool", "type", "--clearmodifiers", text])

    elif action_type == "key":
        key = action["key"]
        subprocess.run(["xdotool", "key", key])

    elif action_type == "scroll":
        x, y = action["coordinate"]
        direction = action["direction"]
        amount = action["amount"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        button = "5" if direction == "down" else "4"
        for _ in range(amount):
            subprocess.run(["xdotool", "click", button])

    time.sleep(0.5)  # Brief pause after each action

def run_computer_use_agent(task: str, max_steps: int = 50):
    """Run a computer use agent loop."""
    messages = [{"role": "user", "content": task}]

    for step in range(max_steps):
        # Capture current screen state
        screenshot_b64 = capture_screenshot()

        # Add screenshot to the conversation
        if step > 0:
            messages.append({
                "role": "user",
                "content": [{
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": screenshot_b64,
                    },
                }],
            })

        # Call Claude with computer use tool
        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=4096,
            tools=[computer_tool],
            messages=messages,
        )

        # Process response
        messages.append({"role": "assistant", "content": response.content})

        # Check if the agent is done
        if response.stop_reason == "end_turn":
            # Extract final text response
            for block in response.content:
                if hasattr(block, "text"):
                    return block.text
            return "Task completed."

        # Execute tool calls
        tool_results = []
        for block in response.content:
            if block.type == "tool_use":
                print(f"Step {step}: {block.input.get('action')} "
                      f"{block.input.get('coordinate', '')}")
                execute_action(block.input)
                tool_results.append({
                    "type": "tool_result",
                    "tool_use_id": block.id,
                    "content": "Action executed successfully.",
                })

        messages.append({"role": "user", "content": tool_results})

    return "Max steps reached."

रिज़ॉल्यूशन और कोऑर्डिनेट सिस्टम

Claude विज़ुअल कंटेंट को उन स्क्रीनशॉट आयामों के आधार पर x,y पिक्सेल कोऑर्डिनेट्स में मैप करता है जो आप टूल परिभाषा में निर्दिष्ट करते हैं। कुछ महत्वपूर्ण विवरण:

• अपने डिस्प्ले रिज़ॉल्यूशन को मैच करें टूल परिभाषा में display_width_px और display_height_px के साथ। बेमेल होने पर क्लिक गलत जगह पर होंगे।
• कम रिज़ॉल्यूशन बेहतर है। 1280×800 स्क्रीनशॉट Claude को टेक्स्ट पढ़ने और UI एलिमेंट्स की पहचान करने के लिए पर्याप्त विवरण देता है जबकि टोकन लागत प्रबंधनीय रहती है। 4K स्क्रीनशॉट न भेजें।
• कोऑर्डिनेट्स ऐब्सोल्यूट हैं — (0, 0) स्क्रीन का ऊपरी-बायाँ कोना है।

विश्वसनीय नेविगेशन पैटर्न

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

लोड की प्रतीक्षा करें

वेब ऑटोमेशन में सबसे आम गलती — पारंपरिक हो या विज़ुअल — पेज तैयार होने से पहले एक्शन लेना है। फिक्स्ड time.sleep() कॉल्स का उपयोग न करें। इसके बजाय, पेज स्थिति को विज़ुअली सत्यापित करें:

def wait_for_page_load(
    client: anthropic.Anthropic,
    expected_content: str,
    max_retries: int = 5,
    delay: float = 2.0,
) -> bool:
    """Wait for a page to load by checking for expected visual content."""
    for attempt in range(max_retries):

---

## संबंधित लेख

- [एजेंट एरर रिकवरी: प्रोडक्शन विश्वसनीयता के लिए 5 पैटर्न](/hi/blog/agent-error-recovery-patterns/)
- [एजेंट रिस्पॉन्स स्ट्रीमिंग: मल्टी-स्टेप वर्कफ्लो के लिए रियल-टाइम आउटपुट](/hi/blog/streaming-agent-responses-real-time-output-for-multi-step-workflows/)
- [टूल उपयोग पैटर्न: विश्वसनीय एजेंट-टूल इंटरफेस बनाना](/hi/blog/agent-tool-use-patterns/)
- [एजेंटिक विकास का परिचय](/hi/blog/introducing-agentic-development/)