स्टेजहैंड + स्क्रेपलेस: एक क्लाउड ब्राउज़र पर एआई ब्राउज़र ऑटोमेशन

TL;DR:

• Stagehand एक AI ब्राउज़र-ऑटोमेशन ढांचा है जो सीधे अंग्रेजी में निर्देशों को वास्तविक Playwright कोड के साथ जोड़ता है, जो एक Chrome DevTools प्रोटोकॉल सत्र के शीर्ष पर तीन मूल तत्वों — act, extract, और observe — को उजागर करता है।
• Stagehand को Scrapeless Scraping Browser पर इंगित करें एक फ़ील्ड सेट करके: localBrowserLaunchOptions.cdpUrl को Scrapeless WebSocket अंत बिंदु पर। आपके Stagehand कोड में कुछ और नहीं बदलता।
• ब्राउज़र फिर क्लाउड में चलता है, इसलिए आपका ऑटोमेशन प्रबंधित सत्र, फिंगरप्रिंटिंग, और आवासीय आउटग्रेस प्राप्त करता है, बजाय एक स्थानीय Chromium के जिसे आपको लॉन्च, स्केल और अनब्लॉक रखना होता है।
• आप अपने स्वयं के मॉडल कुंजी लाते हैं। Stagehand act/extract/observe के लिए एक भाषा मॉडल कॉल करता है; ब्राउज़र और मॉडल अलग-अलग चिंताएँ हैं।
• नि:शुल्क प्रारंभ करें। नए Scrapeless खातों में मुफ्त Scraping Browser क्रेडिट शामिल हैं — app.scrapeless.com पर साइन अप करें।

Stagehand, Browserbase द्वारा विकसित ओपन-सोर्स ढांचा, दो चरम सीमाओं के बीच बैठता है: कमजोर चयनकर्ता स्क्रिप्ट जो हर मार्कअप परिवर्तन पर टूट जाती हैं, और मुक्त गमन एजेंट जिनका आप पूर्वानुमान नहीं कर सकते। यह आपको तीन संयुक्त मूल तत्व प्रदान करता है — act कुछ करने के लिए, extract संरचित डेटा निकालने के लिए, और observe तत्वों को खोजने के लिए — प्रत्येक एक प्राकृतिक-भाषा निर्देश द्वारा संचालित होती है और प्रत्येक आपके नियंत्रण में वापस आती है। Stagehand को अभी एक ब्राउज़र की आवश्यकता है। उस ब्राउज़र को स्थानीय रूप से चलाना Chromium को लॉन्च करने, उसे स्केल करने और उसे ब्लॉक होने से रोकने का मतलब है। यह मार्गदर्शिका Stagehand को Scrapeless Scraping Browser से जोड़ती है, इसलिए ढांचा वही रहता है और ब्राउज़र क्लाउड में चला जाता है। नीचे दिए गए प्रत्येक कमांड और आउटपुट को एक लाइव रन से कैप्चर किया गया था।

यह एकीकरण आपको क्या देता है

Stagehand एक ब्राउज़र से Chrome DevTools Protocol के माध्यम से जुड़ता है। Scrapeless Scraping Browser ठीक यही उजागर करता है: एक वास्तविक Chrome वातावरण जिसे आप एक WebSocket URL के माध्यम से पहुँचते हैं। दोनों को एक साथ जोड़ने का मतलब है:

• कोई स्थानीय ब्राउज़र संचालित करने की आवश्यकता नहीं। आप Chromium को लॉन्च, पैच या स्केल नहीं करते; सत्र सर्वर-साइड पर चलता है और आप इससे कनेक्ट करते हैं।
• प्रबंधित सत्र और आउटग्रेस। क्लाउड ब्राउज़र यथार्थवादी डिवाइस प्रोफाइल और आवासीय रूटिंग संभालता है, इसलिए पृष्ठ जिन्हें Stagehand पढ़ता है वे एक वास्तविक आगंतुक की तरह दिखते हैं।
• वही Stagehand API। act, extract, और observe स्थानीय या दूरस्थ ब्राउज़र होने पर समान व्यवहार करते हैं — केवल कनेक्शन URL बदलता है।
• चिंताओं का साफ विभाजन। Scrapeless ब्राउज़र चलाता है; आपका चयनित मॉडल तर्क चलाता है। आप बिना दूसरे को छुए किसी भी एक को स्वैप कर सकते हैं।

आवश्यकताएँ

• Node.js 20.19+ या 22.12+ और एक पैकेज प्रबंधक (यह मार्गदर्शिका pnpm का उपयोग करती है)।
• Scrapeless API कुंजी Scraping Browser के लिए — app.scrapeless.com पर मुफ्त योजना पर एक प्राप्त करें।
• एक मॉडल-प्रदाता API कुंजी। Stagehand अपने मूल तत्वों के लिए एक भाषा मॉडल कॉल करता है; कोई भी समर्थित प्रदाता काम करता है।

इंस्टॉल करें

Stagehand और Zod को जोड़ें, जो extract के संरचित आउटपुट का टाइप करता है:

pnpm add @browserbasehq/stagehand zod

Stagehand को Scraping Browser से कनेक्ट करें

पूरा एकीकरण एक फ़ील्ड है। Stagehand का localBrowserLaunchOptions.cdpUrl एक CDP WebSocket अंत बिंदु स्वीकार करता है; Scrapeless Scraping Browser URL पास करें, अपनी API कुंजी को token क्वेरी पैरामीटर के रूप में। मॉडल अलग से एक llmClient के रूप में प्रदान किया जाता है।

import { Stagehand, AISdkClient, getAISDKLanguageModel } from "@browserbasehq/stagehand";
import { z } from "zod";

// आपके अपने मॉडल प्रदाता (यहाँ OpenAI; किसी भी समर्थित प्रदाता कुंजी का उपयोग करें)।
const model = getAISDKLanguageModel("openai", "gpt-4o-mini", {
  apiKey: process.env.OPENAI_API_KEY,
});

const stagehand = new Stagehand({
  env: "LOCAL",
  llmClient: new AISdkClient({ model }),
  localBrowserLaunchOptions: {
    cdpUrl:
      `wss://browser.scrapeless.com/api/v2/browser` +
      `?token=${process.env.SCRAPELESS_API_KEY}` +
      `&session_ttl=180&proxy_country=US`,
  },
});

await stagehand.init();

init() के बाद, Stagehand Scrapeless द्वारा संचालित एक Chrome सत्र चला रहा है। Playwright संदर्भ stagehand.context के रूप में उपलब्ध है, और तीन AI मूल तत्व stagehand उदाहरण पर मौजूद हैं।

पृष्ठ चलाना

नविगेशन मानक प्ले राइट संदर्भ का उपयोग करता है। सक्रिय पृष्ठ को पकड़ो और लक्ष्य पर जाओ:

const context = stagehand.context;
const page = context.pages()[0] ?? (await context.newPage());
await page.goto("https://news.ycombinator.com", { waitUntil: "domcontentloaded" });

अवलोकन — सरल अंग्रेजी में एक तत्व खोजें

observe एक हल किए गए चयनकर्ता के साथ उम्मीदवार तत्वों को लौटता है, ताकि आप देख सकें कि कोई क्रिया क्या लक्षित करेगी इससे पहले कि आप इसे चलाएं:

const candidates = await stagehand.observe("उपरी नेविगेशन बार में लॉगिन लिंक");
console.log(candidates[0]);

एक लाइव रन ने एकल हल किए गए उम्मीदवार को लौटाया:

// Scrapeless Scraping Browser के खिलाफ एक लाइव स्क्रैपर रन से कैप्चर किया गया।
{
  "description": "उपरी नेविगेशन बार में लॉगिन पृष्ठ का लिंक",
  "method": "click",
  "arguments": [],
  "selector": "xpath=/html[1]/body[1]/center[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[1]/td[3]/span[1]/a[1]"
}

निष्कर्ष — एक पृष्ठ को टाइप किए गए डेटा में बदलें

extract एक निर्देश और एक Zod स्कीमा लेता है, और उस डेटा को लौटाता है जो स्कीमा से मेल खाता है। स्कीमा अनुबंध है; स्टेजहैंड इसे पृष्ठ से भरता है:

const result = await stagehand.extract(
  "मुख्य पृष्ठ से शीर्ष 3 कहानी शीर्षकों और उनके अंक गणनाओं को निकालें",
  z.object({
    stories: z.array(z.object({ title: z.string(), points: z.number() })).max(3),
  }),
);
console.log(result);

लाइव रन ने मुख्य पृष्ठ से सीधे प्रकार की पंक्तियां लौटाईं:

// लाइव रन से कैप्चर किया गया — मुख्य पृष्ठ से वास्तविक शीर्षक और अंक गणना।
{
  "stories": [
    { "title": "Running Gemma 4 26B at 5 tokens/sec on a 13-year-old Xeon with no GPU (neomindlabs.com)", "points": 82 },
    { "title": "Telegram डेटा केंद्रों के रहस्य (dev.moe)", "points": 163 },
    { "title": "कोडिंग एजेंटों के लिए ओपन-सोर्स मेमोरी, SSH के माध्यम से सिंक्रनाइज़ की गई (github.com/vshulcz)", "points": 43 }
  ]
}

कार्य — एक निर्देश से क्रिया करें

act पृष्ठ पर एक साधारण-अंग्रेजी क्रिया को निष्पादित करता है। यहां यह एक नेविगेशन लिंक पर क्लिक करता है, जिससे सत्र एक नए URL पर जाता है:

console.log(page.url()); // https://news.ycombinator.com/
await stagehand.act("उपरी नेविगेशन में 'नया' लिंक पर क्लिक करें");
await page.waitForLoadState("domcontentloaded");
console.log(page.url()); // https://news.ycombinator.com/newest

लाइव रन ने https://news.ycombinator.com/ से https://news.ycombinator.com/newest पर नेविगेट किया, यह पुष्टि करते हुए कि निर्देश एक वास्तविक क्लिक में हल हुआ।

सत्र बंद करें

रन समाप्त होने पर क्लाउड ब्राउज़र छोड़ें:

await stagehand.close();

Scrapeless पर ब्राउज़र क्यों चलाएं

स्टेजहैंड जानबूझकर इस बात के बारे में निरपेक्ष है कि ब्राउज़र कहाँ स्थित है — यही है जो cdpUrl स्वैप को इतना साफ बनाता है। स्वयं क्रोमियम चलाना लैपटॉप डेमो के लिए ठीक है, लेकिन एक वास्तविक कार्यभार का मतलब समवर्तीता, सत्र स्वच्छता, और कई पृष्ठों के बीच अवरोध रहित रहना है। Scrapeless Scraping Browser एक वास्तविक क्रोम वातावरण है जिसमें वास्तविक उपकरण और फिंगरप्रिंट प्रोफाइल और आवासीय इग्रेस हैं, जो उसी CDP WebSocket के माध्यम से पहुँचते हैं जिससे स्टेजहैंड पहले से ही बात करता है। आप स्टेजहैंड के प्रोग्रामिंग मॉडल को बनाए रखते हैं और ब्राउज़र संचालन को एक प्रबंधित सेवा को सौंपते हैं। कनेक्शन विकल्प — सत्र जीवनकाल, क्षेत्र, और फिंगरप्रिंट — Scraping Browser दस्तावेज़ीकरण में कवर किए गए हैं, और एक अलग CDP-संचालित एजेंट एकीकरण के लिए हरमेस ब्राउज़र-कौशल वाकथ्रू देखें।

app.scrapeless.com पर मुफ्त योजना पर अपना कुंजी प्राप्त करें और स्क्रैपिंग ब्राउज़र क्रेडिट पहले रनों को कवर करते हैं।

निष्कर्ष

स्टेजहैंड आपको act, extract, और observe देता है एक ब्राउज़र पर जिसे आप एकल URL से इंगित करते हैं। localBrowserLaunchOptions.cdpUrl को Scrapeless Scraping Browser अंतिम बिंदु पर सेट करें, अपने मॉडल कुंजी को प्रदान करें, और ढांचा एक प्रबंधित क्लाउड ब्राउज़र पर बिना बदलाव के चलता है — extract स्कीमा-टाइप डेटा लौटाते हैं और act साधारण अंग्रेजी से पृष्ठ को संचालित करते हैं। कनेक्शन एक फ़ील्ड है; इसके ऊपर आप जो कुछ भी बनाते हैं वही बना रहता है।
क्या आप अपने स्टेजहैंड स्क्रिप्ट्स को क्लाउड ब्राउज़र पर चलाने के लिए तैयार हैं? स्क्रेपलेस डैशबोर्ड से मुफ्त में शुरू करें, स्क्रेपिंग ब्राउज़र उत्पाद पृष्ठ देखें, या स्क्रेपलेस मूल्य निर्धारण पर योजनाओं की तुलना करें।

सामान्य प्रश्न

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

प्र: स्टेजहैंड स्क्रेपलेस स्क्रेपिंग ब्राउज़र से कैसे जुड़ता है?
उ: स्टेजहैंड कन्‍स्ट्रक्‍टर में localBrowserLaunchOptions.cdpUrl को स्क्रेपलेस वेब-सॉक्‍ट एंडपॉइंट wss://browser.scrapeless.com/api/v2/browser पर सेट करें, जिसमें आपका एपीआई कुंजी token क्वेरी पैरामीटर के रूप में हो। फिर स्टेजहैंड क्लाउड सत्र को CDP के माध्यम से संचालित करता है।

प्र: क्या मुझे अभी भी एक भाषा मॉडल कुंजी की आवश्यकता है?
उ: हाँ। स्क्रेपलेस ब्राउज़र प्रदान करता है; स्टेजहैंड कार्य, निकालें, और अवलोकन के लिए एक मॉडल कॉल करता है। स्टेजहैंड के मॉडल कॉन्फ़िगरेशन के माध्यम से अपनी खुद की प्रदाता कुंजी प्रदान करें - ब्राउज़र और मॉडल अलग रहते हैं।

प्र: क्या जब मैं क्लाउड ब्राउज़र पर जाता हूं तो मेरा स्टेजहैंड कोड बदलता है?
उ: नहीं। केवल कनेक्शन यूआरएल बदलता है। कार्य, निकालें, अवलोकन, और प्ले राइट संदर्भ स्थानीय या दूरस्थ स्क्रेपलेस सत्र होने पर समान व्यवहार करते हैं।

प्र: मैं किसी पृष्ठ से संरचित डेटा कैसे निकालूं?
उ: extract को एक निर्देश और एक Zod स्कीमा के साथ कॉल करें। स्टेजहैंड एक ऐसा ऑब्जेक्ट लौटाता है जो स्कीमा से मेल खाता है - उदाहरण के लिए, एक { शीर्षक, अंक } की श्रृंखला - ताकि आपको कच्चे एचटीएमएल के बजाय प्रकारित डेटा मिले।

प्र: मैं ब्राउज़र के क्षेत्र को कैसे सेट करूं?
उ: स्क्रेपलेस CDP यूआरएल में एक proxy_country क्वेरी पैरामीटर जोड़ें, ताकि सत्र का निस्सरण उस बाजार से मेल खाता हो जिसे आप देखना चाहते हैं।

प्र: क्या मैं उस पर कार्य करने से पहले किसी तत्व का निरीक्षण कर सकता हूँ?
उ: हाँ। एक विवरण के साथ observe को कॉल करें; यह संभावित तत्वों के साथ एक हल किया हुआ चयनकर्ता और एक सुझाया गया विधि लौटाता है, जिसे आप act चलाने से पहले समीक्षा कर सकते हैं।