ملاحظة الكاتب: من التثبيت إلى استخدام snapshot وref والتحقق من النتائج، تعلّم في 5 خطوات دورة agent-browser: «قراءة الصفحة، والنقر على العناصر، ثم قراءة الصفحة مجددًا»، لتمكين وكيل الذكاء الاصطناعي من التحكم في متصفح حقيقي بثبات.
من التحديات الشائعة عند جعل وكيل الذكاء الاصطناعي يتعامل مع صفحات الويب أنه لا يرى الصفحة، ويصعب عليه النقر على العناصر المطلوبة بدقة وثبات. يستهلك الاعتماد على لقطات الشاشة والنقر بالإحداثيات عددًا كبيرًا من رموز الإدخال، وقد يؤدي إلى النقر في المكان الخطأ. أما تزويد النموذج بكامل شيفرة HTML فيملأ نافذة السياق بسرعة. في هذا المقال، نتعرف على دورة snapshot-ref في agent-browser، لتتعلم كيف تجعل الوكيل يتحكم في المتصفح «بأمر واحد في كل مرة».
هذا ليس مقالًا آخر يشرح مفاهيم أطر أتمتة المتصفح فحسب. بل سنستعرض، وفق ترتيب التطبيق العملي، تثبيت agent-browser، وكيفية استخدام snapshot وref معًا، واستراتيجية إعادة المحاولة عند الفشل، وطريقة دمجه في سير عمل الوكيل.
الفائدة الأساسية: بعد قراءة المقال، ستفهم لماذا تناسب دورة snapshot-ref في agent-browser نماذج اللغة الكبيرة، وستتمكن من تنفيذ أول مهمة متصفح في وكيلك باستخدام 5 أوامر.
أبرز نقاط دورة snapshot-ref في agent-browser
agent-browser أداة مفتوحة المصدر لأتمتة المتصفح من Vercel Labs، مرخّصة بموجب Apache-2.0. وهي أداة سطر أوامر أصلية مكتوبة بلغة Rust، وهدفها واضح: منح وكيل الذكاء الاصطناعي متصفحًا يمكنه التحكم فيه بأوامر متتابعة. بعد فتح الصفحة، يقرأها الوكيل كنص موجز على هيئة شجرة إمكانية الوصول (accessibility tree)، ثم ينفّذ العمليات على عناصرها باستخدام أوامر shell.
| النقطة | التوضيح | الفائدة للوكيل |
|---|---|---|
| نص snapshot الموجز | تُعرض الصفحة على هيئة شجرة إمكانية الوصول، ويُرفق بكل عنصر مرجع مثل @e1 |
يستهلك مساحة أقل من نافذة السياق مقارنةً بلقطات الشاشة وHTML الخام |
| تحديد دقيق باستخدام ref | تشير أوامر التنفيذ مباشرةً إلى المرجع، مثل click @e1 |
لا يحتاج النموذج إلى تركيب محددات CSS بنفسه |
| إبقاء المتصفح مفتوحًا | تُبقي خدمة تعمل في الخلفية المتصفح مفتوحًا | تقتصر كل خطوة على استدعاء قصير لأمر shell |
| الإبلاغ الصريح عن الفشل | تفشل عملية النقر إذا كان العنصر محجوبًا أو مخفيًا أو معطّلًا، بدلًا من الإبلاغ عن نجاح غير حقيقي | يستطيع الوكيل تحديد خطوته التالية بناءً على نتيجة فعلية |
| مهارات مدمجة | تتضمن أداة سطر الأوامر تعليمات استخدام متوافقة مع إصدارها | يقرأ الوكيل تعليمات تتوافق مع الإصدار المثبّت |
كيف تعمل دورة snapshot-ref
يمكن تلخيص الدورة في ثلاث خطوات: قراءة الصفحة باستخدام snapshot، ثم تنفيذ إجراء على أحد مراجع ref، ثم قراءة الصفحة مجددًا للتحقق من النتيجة، وتكرار ذلك. تتكون لقطة example.com في المثال الرسمي من سطر واحد: - link "Learn more" [ref=e1]. من هذا السطر، يعرف النموذج أن الصفحة تحتوي على رابط باسم Learn more، وأنه يستطيع النقر عليه باستخدام @e1.
يفصل هذا التصميم بين «فهم الصفحة» و«تنفيذ الإجراء» في خطوتين يمكن التحقق منهما، وهو ما يناسب طريقة استدعاء الأدوات لدى نموذج اللغة الكبير. لا يحتاج النموذج إلى فهم بنية DOM المعقدة؛ يكفي أن يجد العنصر المطلوب في النص ثم يستخدم مرجع ref المقابل له. كما أن التقاط صورة جديدة بعد كل إجراء يتيح للوكيل اتخاذ قراراته بناءً على أحدث حالة للصفحة، بدلًا من الاعتماد على الذاكرة والتخمين.
البنية الأساسية لـ agent-browser
لا تحتفظ واجهة سطر الأوامر CLI بالمتصفح مباشرةً. عند تنفيذ الأمر الأول، تبدأ عملية خلفية (daemon) تتحكم في المتصفح عبر Chrome DevTools Protocol، ثم تُرسل إليها أوامر CLI اللاحقة. بذلك يظل المتصفح مفتوحًا بين الأوامر، وتبقى حالة تسجيل الدخول وموضع الصفحة محفوظين.
لكل --session عملية خلفية ومتصفح مستقلان، مما يسهّل تشغيل مهام متعددة بالتوازي دون أن تتداخل. افتراضيًا، يُغلق المتصفح الذي يعمل دون واجهة رسومية إذا لم يتلقَّ أي أمر لمدة ساعة متواصلة، ثم تنتهي العملية الخلفية. أما إذا كانت استمرارية الجلسة (session persistence) مفعّلة، فتُحفظ الحالة قبل الخروج.
«العقل» الذي يدير هذه الدورة هو نموذج لغة كبير. يدخل نص كل لقطة إلى سياق النموذج، الذي يقرر الأمر التالي؛ لذا تؤثر قدرة النموذج على اتباع التعليمات وسعره مباشرةً في معدل نجاح المهمة وتكلفتها. تتيح APIYI استدعاء نماذج Claude وDeepSeek وKimi وغيرها من النماذج المذكورة في هذا المقال عبر API، مع دعم صيغتي واجهة OpenAI وAnthropic. تتوفر وثائق التكامل على docs.apiyi.com.
البدء السريع مع agent-browser: تشغيل دورة snapshot-ref في 5 خطوات
الخطوة 1: تثبيت agent-browser والمتصفح
الطريقة الأكثر شيوعًا هي التثبيت العام عبر npm، ثم تنزيل Chrome for Testing. تختار حزمة npm الملف التنفيذي الأصلي المناسب لمنصة الجهاز تلقائيًا، وهي تدعم حاليًا macOS (ARM64 وx64)، وLinux (ARM64 وx64، مع glibc وmusl)، وWindows (x64).
| طريقة التثبيت | الأمر | حالة الاستخدام |
|---|---|---|
| التثبيت العام عبر npm | أولًا npm install -g agent-browser، ثم agent-browser install |
معظم بيئات التطوير؛ يلزم تنزيل المتصفح عند الاستخدام لأول مرة |
| Homebrew | أولًا brew install agent-browser، ثم agent-browser install |
مستخدمو macOS |
| Linux مع التبعيات | agent-browser install --with-deps |
الخوادم والحاويات التي تحتاج أيضًا إلى تثبيت مكتبات النظام الخاصة بالمتصفح |
| دون تثبيت | npx agent-browser open example.com |
التجربة المؤقتة والمهام التي تُنفّذ مرة واحدة في CI |
| أوامر الصيانة | agent-browser upgrade، وagent-browser doctor |
ترقية الإصدار وتشخيص مشكلات البيئة |
للبناء من الشفرة المصدرية، تتطلب الأداة رسميًا Node.js 24 أو أحدث، وpnpm 11 أو أحدث، وسلسلة أدوات Rust. نفّذ الأوامر pnpm install وpnpm build:source وpnpm link --global بالترتيب، ثم شغّل agent-browser install. أما للاستخدام اليومي، فيكفي التثبيت مباشرة عبر npm.
الخطوات من 2 إلى 5: دورة عمل متكاملة بأقل عدد من الخطوات
بعد التثبيت، تشكّل الأوامر التالية دورة عمل متكاملة باستخدام snapshot-ref. يُنصح بتجربتها يدويًا أولًا في الطرفية والتحقق من مخرجات كل خطوة، ثم إسنادها إلى الوكيل لتنفيذها تلقائيًا.
| الخطوة | الأمر | الوظيفة | النتيجة المتوقعة |
|---|---|---|---|
| 2. فتح الصفحة | agent-browser open example.com |
تشغيل العملية الخلفية وفتح الموقع | يظل المتصفح قيد التشغيل في الخلفية |
| 3. قراءة اللقطة | agent-browser snapshot -i |
عرض العناصر القابلة للتفاعل فقط، مع معرّف ref لكل عنصر | مخرجات مثل link "Learn more" [ref=e1] |
| 4. التفاعل مع ref | agent-browser click @e1 |
النقر على العنصر المحدد في اللقطة | الانتقال إلى صفحة أخرى أو تغيّر الحالة |
| 5. التحقق من النتيجة | agent-browser get url |
قراءة عنوان URL الحالي للتأكد من نجاح الإجراء | إرجاع العنوان بعد الانتقال |
| الإنهاء | agent-browser close |
إغلاق المتصفح | تحرير الموارد |
الخيار -i في الخطوة 3 مهم، لأنه يعرض العناصر القابلة للتفاعل فقط، ما يقلّل طول نص اللقطة بشكل ملحوظ. وهذا مناسب خصوصًا عندما تكون ميزانية الرموز محدودة. كذلك لا ينبغي تخطي التحقق في الخطوة 5؛ فعلى الوكيل الاعتماد على النتيجة الفعلية لتحديد نجاح العملية، بدلًا من افتراض أن النقر يعني النجاح.
🚀 البدء السريع: بعد نجاح الدورة اليدوية، يمكنك إسناد مجموعة الأوامر إلى الوكيل. يُنصح بالحصول أولًا على رصيد تجريبي عبر APIYI على apiyi.com، ثم تجربة مجموعة المهام نفسها مع عدة نماذج لمعرفة أيها أفضل في اختيار ref الصحيح من نص اللقطة. تتوافق الواجهة مع تنسيقي OpenAI وAnthropic، لذا يكفي عادةً استبدال المفتاح والعنوان في أطر عمل الوكلاء الحالية. راجع وثائق docs.apiyi.com للتفاصيل.
صلاحية ref في agent-browser وإعادة أخذ لقطة
يشير ref إلى حالة الصفحة «لحظة أخذ اللقطة». وبمجرد الانتقال إلى صفحة أخرى أو تغيّر DOM، قد يصبح ref القديم غير صالح، أو حتى يشير إلى عنصر خاطئ. لذلك، القاعدة الأساسية هي: بعد كل انتقال أو تغيّر واضح في الصفحة، نفّذ snapshot مجددًا قبل استخدام ref الجديد.
من الأفضل إضافة هذه القاعدة مباشرةً إلى موجه النظام الخاص بالـ Agent. تتبع الدورة الموثوقة نمط «لقطة، إجراء، لقطة»، لا «لقطة واحدة، ثم عشرة إجراءات متتالية». فتكلفة أخذ لقطة إضافية أقل بكثير من تكلفة تتبع الخطأ والتراجع عنه بعد النقر على العنصر الخطأ.
التعامل مع فشل النقر في agent-browser
لا يتظاهر agent-browser بنجاح النقر. فعندما يكون العنصر المطلوب مخفيًا، أو معطّلًا، أو خارج نطاق العرض، أو محجوبًا بعنصر آخر مثل نافذة الموافقة على ملفات تعريف الارتباط، يعيد click نتيجة فشل مباشرةً. وهذا مفيد للـ Agent، لأن رسالة الخطأ نفسها تساعده على تحديد الخطوة التالية.
| سبب الفشل | الحالة المعتادة | الإجراء الموصى به |
|---|---|---|
| العنصر محجوب | نافذة موافقة أو طبقة عائمة تغطي الزر | أغلق العنصر الحاجب أولًا، ثم أعد أخذ لقطة وحاول مجددًا |
| خارج نطاق العرض | العنصر موجود في أسفل الصفحة | مرّر الصفحة باستخدام scroll، ثم أعد أخذ لقطة |
| العنصر معطّل | الزر غير قابل للنقر لأن النموذج لم يكتمل | أكمل الحقول المطلوبة باستخدام fill، ثم خذ لقطة للتحقق |
| العنصر مخفي | لا يظهر إلا بعد توسيع قائمة | انقر أولًا لفتح القائمة، ثم استخدم wait للانتظار قبل أخذ لقطة |
| انتهاء صلاحية ref | انتقلت الصفحة أو أُعيد تحميلها | نفّذ snapshot مجددًا للحصول على ref جديد |
إلى جانب ref، يدعم agent-browser محددات CSS والنصوص وXPath والمحددات الدلالية. على سبيل المثال، يعثر الأمر agent-browser find role button click --name "Submit" على زر الإرسال حسب دوره واسمه وينقر عليه. وعندما تكون بنية الصفحة مستقرة ودلالات العناصر واضحة، يمكن استخدام المحددات الدلالية إلى جانب ref.
مجموعات أوامر agent-browser الشائعة
تغطي أوامر agent-browser نطاقًا واسعًا من الاستخدامات. يمكنك عرض القائمة الكاملة باستخدام agent-browser --help، أو معرفة تفاصيل أمر معين باستخدام agent-browser <command> --help. فيما يلي مجموعات الأوامر الأكثر استخدامًا، مرتبة حسب الغرض، لمساعدتك على تحديد القدرات التي تريد إتاحتها للوكيل.
| المجموعة | أبرز الأوامر | الاستخدامات الشائعة |
|---|---|---|
| التنقل والقراءة | open، back، reload، read، snapshot، get، is |
فتح الصفحات، قراءة لقطات الصفحة، الاستعلام عن الحالة |
| التفاعل | click، fill، type، press، select، check، scroll، upload، find |
النقر، تعبئة النماذج، رفع الملفات |
| الانتظار | wait |
انتظار ظهور عنصر أو تحميل الصفحة |
| جمع المخرجات | screenshot، pdf، record، download، diff |
التقاط صور الشاشة، تصدير PDF، تسجيل الشاشة، مقارنة الصفحات |
| حالة الصفحة والشبكة | cookies، storage، network، eval |
إدارة ملفات تعريف الارتباط، اعتراض طلبات الشبكة، تنفيذ السكربتات |
| علامات التبويب والنوافذ المنبثقة | tab، frame، dialog |
التعامل مع علامات تبويب متعددة وإطارات iframe ومربعات الحوار |
| تصحيح الأخطاء والأداء | console، errors، trace، vitals، a11y |
التقاط أخطاء وحدة التحكم ومقاييس الأداء |
| الجلسات والمصادقة | session، state، auth، confirm، deny |
عزل الجلسات، إدارة حالة تسجيل الدخول، تأكيد العمليات الحساسة |
| التكامل مع الوكيل | skills، mcp، flow، batch، plugin |
تحميل المهارات، تشغيل خدمة MCP |
بالنسبة إلى محرك المتصفح، يُستخدم Chrome for Testing افتراضيًا. يمكنك أيضًا استخدام --cdp أو --auto-connect للاتصال بمتصفح Chrome قيد التشغيل، واستخدام --engine للتبديل إلى محرك Lightpanda أو Obscura، أو التحكم في Mobile Safari داخل محاكي iOS، أو الاتصال بخدمات المتصفحات السحابية مثل Browserbase وBrowserless وBrowser Use وKernel وAgentCore.
دمج agent-browser مع وكيل الذكاء الاصطناعي
تعليم الوكيل باستخدام المهارات المدمجة
من مزايا تصميم agent-browser أنه يوزّع تعليمات الاستخدام مع واجهة سطر الأوامر نفسها. يعرض الأمر agent-browser skills get core دورة العمل الأساسية، وطريقة استخدام ref، واستراتيجيات الانتظار، وسير العمل الشائعة. ويمكن إضافة --ref commands لعرض مرجع محدد، مثل قائمة الأوامر الكاملة، أو إضافة --full لإرفاق المرجع الكامل للأوامر والقوالب. كما يعرض agent-browser skills list المهارات المتخصصة، مثل electron وslack وdogfood.
في إطار عمل الوكيل، يمكنك تثبيت مهارة الاكتشاف باستخدام npx skills add vercel-labs/agent-browser. هذه المهارة ليست سوى دليل تمهيدي بسيط يوجّه الوكيل إلى تحميل agent-browser skills get core، وبذلك تظل التعليمات متوافقة دائمًا مع إصدار CLI المثبّت. وإذا كنت لا ترغب في تثبيت المهارة، يمكنك إضافة جملة إلى AGENTS.md: استخدم agent-browser لأتمتة المتصفح، وشغّل agent-browser skills get core قبل الاستخدام الأول، ثم اتبع تعليماته.
الاتصال عبر MCP
إذا كان عميلك يدعم MCP، فإن تشغيل agent-browser mcp يبدأ خادم MCP عبر stdio. وبذلك يمكن لتطبيقات سطح المكتب مثل Claude أو الوكلاء المطوّرين داخليًا استدعاء عمليات المتصفح كأدوات قياسية، دون الحاجة إلى إنشاء طبقة خاصة لتنفيذ أوامر shell.
اختيار نموذج التشغيل لدورة snapshot-ref
تتميز مهام المتصفح بتعدد الجولات، وتحمل كل جولة نصًا من لقطة، لذا تكون نسبة رموز الإدخال عادة أعلى بكثير من رموز الإخراج. عند اختيار النموذج، انتبه إلى سعر الإدخال وسعر التخزين المؤقت، إلى جانب قدرته على اتباع التعليمات. تستند الأسعار في الجدول إلى البيانات الفعلية في صفحة أسعار APIYI على docs.apiyi.com/models؛ راجع الصفحة لمعرفة الوحدات وطريقة احتساب التكلفة.
| النموذج | سعر الإدخال | سعر الإخراج | سعر التخزين المؤقت | الاستخدام المناسب | المنصة المتاحة |
|---|---|---|---|---|---|
| claude-opus-5-5 | $4 | $20 | $0.2 | المهام المعقدة متعددة الخطوات والصفحات الصعبة | APIYI apiyi.com |
| claude-sonnet-5-5 | $2 | $10 | $0.1 | نموذج التشغيل الأساسي للمهام اليومية | APIYI apiyi.com |
| kimi-k3.1-pro | $2 | $10 | $0.2 | التعامل مع صفحات الويب الصينية | APIYI apiyi.com |
| deepseek-v4.1-flash | $0.3 | $1.2 | $0.006 | النماذج البسيطة والفحص الجماعي | APIYI apiyi.com |
من الخيارات العملية استخدام deepseek-v4.1-flash للمهام الجماعية البسيطة ذات الخطوات الثابتة، وclaude-sonnet-5-5 كنموذج أساسي متعدد الاستخدامات، ثم الانتقال إلى claude-opus-5-5 عند التعامل مع تفاعلات معقدة أو صفحات تتكرر فيها حالات الفشل. وبما أن نصوص skills وموجهات النظام تتكرر في كل جولة، فإن النماذج ذات أسعار التخزين المؤقت المنخفضة تكون أوفر في الدورات الطويلة.
تجدر الإشارة إلى أن سلسلة 文心 ERNIE غير موجودة حاليًا في جدول أسعار APIYI، ولم تطرح APIYI هذا النموذج بعد، ونعمل على إتاحته في أقرب وقت. إذا كان وكيلك يعتمد على ERNIE، يمكنك اختبار أحد النماذج في الجدول أعلاه بديلًا مؤقتًا.
💡 نصيحة للاختيار: لا يوجد نموذج هو الأفضل لجميع المواقع. ننصحك باختيار 3 إلى 5 صفحات من بيئة عمل حقيقية لإجراء اختبار صغير، والتبديل بين النماذج عبر واجهة موحدة على APIYI apiyi.com، ثم مقارنة معدلات النجاح وتكلفة المهمة الواحدة قبل اختيار نموذجك الأساسي.
توصيات الاستخدام الآمن لـ agent-browser
عندما تتيح للوكيل (Agent) التعامل مع متصفح حقيقي، يجب تحديد حدود الأمان مسبقًا. يشرح قسم الأمان في الوثائق الرسمية لـ agent-browser آليات مثل خزنة بيانات الاعتماد (auth vault)، وقائمة النطاقات المسموح بها، وسياسات الإجراءات، وحدود المحتوى. وعلى مستوى الأوامر، يُستخدم auth لإدارة بيانات تسجيل الدخول، بينما يُستخدم الأمران confirm وdeny لتأكيد الإجراءات الحساسة أو رفضها.
في بيئة الإنتاج، يُنصح باتخاذ ثلاث خطوات على الأقل:
- تقييد النطاقات التي يمكن الوصول إليها: استخدم قائمة بالنطاقات المسموح بها لحصر الوكيل في المواقع المرتبطة بالعمل، ومنع الصفحات من استدراجه إلى مواقع غير معروفة.
- إبعاد بيانات الاعتماد عن السياق: ضع أسماء المستخدمين وكلمات المرور في خزنة بيانات الاعتماد بدلًا من كتابتها في الموجه، حتى لا تظهر في سجلات النموذج.
- اشتراط تأكيد بشري للإجراءات الحساسة: اضبط إجراءات مثل الدفع والحذف وإرسال الطلبات بحيث تتطلب تأكيدًا، ليبقى القرار النهائي بيد الإنسان.
قد يحتوي محتوى صفحات الويب نفسه على تعليمات خبيثة تستهدف الوكيل، لذا يجدر تفعيل آلية حدود المحتوى أيضًا. تساعد هذه الآلية النموذج على التمييز بوضوح بين «نص الصفحة» و«تعليمات المستخدم»، مما يقلل خطر حقن الموجهات.
الأسئلة الشائعة FAQ
Q1: ما حلقة snapshot-ref في agent-browser؟
هي طريقة العمل الأساسية في agent-browser: تبدأ بقراءة الصفحة باستخدام `snapshot` وتحويلها إلى نص موجز يتضمن مراجع ref، ثم تنفّذ إجراءً على أحد هذه المراجع، وتأخذ لقطة جديدة للتحقق من النتيجة، وتكرر العملية. تقسم هذه الطريقة فهم الصفحة وتنفيذ الإجراءات إلى خطوات صغيرة قابلة للتحقق، مما يناسب الاستدلال التدريجي لنموذج لغة كبير.
Q2: ما الفرق بين agent-browser ووكيل متصفح يعتمد على لقطات الشاشة؟
تتميز الحلول المعتمدة على لقطات الشاشة بمرونة أكبر في الفهم البصري، لكنها تستهلك عددًا أكبر من الرموز (tokens)، كما قد يؤدي النقر بالإحداثيات إلى إصابة موضع خاطئ. في المقابل، يستخدم agent-browser نص شجرة إمكانية الوصول ومراجع ref لتحديد العناصر، مما يجعل السياق أكثر إيجازًا والعمليات أكثر دقة. كما يُظهر أخطاء واضحة عند الفشل، لذا فهو أنسب لمهام الأتمتة التي تتطلب تنفيذًا مستقرًا.
Q3: لماذا لا يمكن الاستمرار في استخدام مراجع ref القديمة بعد الانتقال إلى صفحة أخرى؟
يصف كل مرجع ref الصفحة كما كانت لحظة أخذ اللقطة فقط. بعد الانتقال إلى صفحة أخرى أو تغير DOM، قد تختفي العناصر أو تُستبدل، وقد يصبح المرجع القديم غير صالح أو يشير إلى عنصر خاطئ. الطريقة الصحيحة هي إعادة تنفيذ `snapshot` بعد كل تغيير في الصفحة، ثم استخدام مراجع ref الجديدة.
Q4: ما حالات الاستخدام المناسبة لـ agent-browser؟
يناسب بشكل أساسي الحالات التالية:
– **التعبئة التلقائية للنماذج**: العمليات ذات الخطوات الثابتة، مثل إنشاء الحسابات والتسجيل وإدخال البيانات في لوحة الإدارة.
– **فحص المواقع واختبار الانحدار**: استخدام `errors` و`console` و`vitals` للتحقق من أخطاء الصفحات وأدائها.
– **جمع المعلومات**: تسجيل الدخول إلى لوحة الإدارة، ثم قراءة البيانات صفحةً بصفحة عبر القوائم.
– **حالات متخصصة مثل Electron وSlack**: توسيع الإمكانات باستخدام المهارات المتخصصة المتاحة في `skills list`.
Q5: كيف يمكن ربط النموذج الذي يشغّل agent-browser؟
يمكن اتباع الخطوات التالية:
1. تفضل بزيارة APIYI على apiyi.com لإنشاء حساب والحصول على مفتاح API.
2. اختر صيغة متوافقة مع OpenAI أو Anthropic في إطار عمل الوكيل، وأدخل معلمات الاتصال وفقًا لوثائق docs.apiyi.com.
3. استخدم الحلقة المكونة من 5 خطوات الواردة في هذا المقال كمهمة اختبار لمقارنة أداء النماذج المختلفة.
تتيح APIYI الوصول الموحد إلى نماذج متعددة، منها Claude وDeepSeek وKimi، ولا يتطلب التبديل بينها سوى تغيير اسم النموذج.
Q6: كيف يمكن تقدير تكلفة النموذج الذي ينفّذ حلقة snapshot-ref؟
تعتمد مهام المتصفح بشكل أساسي على رموز الإدخال، إذ تتضمن كل جولة نص اللقطة وموجه النظام. عند تقدير التكلفة، ركّز على سعر الإدخال وسعر التخزين المؤقت، واستخدم `snapshot -i` لتقليل حجم اللقطة قدر الإمكان. راجع صفحة أسعار APIYI على docs.apiyi.com/models لمعرفة الأسعار الفعلية لكل نموذج، ولا تعتمد على أسعار قديمة من جهات خارجية.
Q7: ما القيود المعروفة لـ agent-browser؟
تتطلب صلاحية مراجع ref قصيرة الأمد من الوكيل إعادة التقاط اللقطات باستمرار، ما يزيد عدد جولات التفاعل. وقد لا تكون اللقطة مكتملة في الصفحات التي تفتقر بشدة إلى معلومات إمكانية الوصول؛ عندها يمكن الاستعانة بمحددات CSS أو XPath أو لقطات الشاشة. كذلك، يُغلق المتصفح عديم الواجهة تلقائيًا بعد ساعة من الخمول، لذا تتطلب المهام الطويلة تهيئة استمرارية الجلسة.
أبرز النقاط حول snapshot-ref في agent-browser
- التعريف الأساسي: agent-browser أداة سطر أوامر مكتوبة بلغة Rust ومفتوحة المصدر من Vercel Labs، تتيح للوكيل التحكم في المتصفح بأمر تلو الآخر.
- الدورة الأساسية: التقاط لقطة لقراءة الصفحة، وتنفيذ إجراء على ref، ثم التقاط لقطة أخرى للتحقق؛ وتتكرر الخطوات الثلاث باستمرار.
- القاعدة الأساسية لـ ref: بعد الانتقال إلى صفحة أخرى أو تغيّر DOM، يجب التقاط لقطة جديدة قبل استخدام ref.
- الفشل إشارة مفيدة: يؤدي النقر على عنصر محجوب أو معطّل إلى ظهور خطأ، وعلى الوكيل معالجة سبب الحجب أولًا ثم إعادة المحاولة.
- طرق التكامل: استخدم
skills get coreلتحميل التعليمات المطابقة للإصدار، أوagent-browser mcpللتكامل مع عميل MCP. - الأمان أولًا: في بيئة الإنتاج، فعّل قائمة النطاقات المسموح بها وauth vault وتأكيد العمليات الحساسة.
- اختيار النموذج: قارن النماذج التي تقود الوكيل عبر واجهة موحدة على APIYI apiyi.com، وراجع الأسعار في docs.apiyi.com/models.
الخلاصة
أهم نقاط دورة snapshot-ref في agent-browser:
- استخدام النص بدلًا من لقطات الشاشة: تتيح لقطة شجرة إمكانية الوصول، مع مراجع ref، للنموذج فهم الصفحة بأقل استهلاك لنافذة السياق.
- التحقق بعد كل خطوة: اقرأ الصفحة أو عنوان URL بعد كل إجراء، حتى لا يواصل الوكيل العمل في حالة غير صحيحة.
- التعامل مع حالات الفشل: توجد طرق واضحة لمعالجة حجب العناصر، ومشكلات منطقة العرض، والعناصر المعطّلة، وانتهاء صلاحية ref.
- سهولة التكامل: يتيح التثبيت عبر npm، والمهارات المدمجة، وخدمة MCP ثلاث طرق سريعة لدمجه مع الوكيل الحالي.
يُنصح أولًا بتجربة الأوامر الخمسة open وsnapshot وclick وget وclose يدويًا في الطرفية، ثم كتابة قواعد الدورة في موجه النظام الخاص بالوكيل، وأخيرًا اختيار النموذج الذي سيشغّله باستخدام صفحات عمل حقيقية.
يمكنك استخدام APIYI على apiyi.com للتحقق سريعًا من أداء نماذج مختلفة في تشغيل agent-browser. تتوافق المنصة مع تنسيقات واجهات OpenAI وAnthropic؛ وتجد تعليمات التكامل على docs.apiyi.com، وأسعار النماذج المعتمدة على docs.apiyi.com/models.
📚 المراجع
- GitHub – agent-browser: المستودع الرسمي مفتوح المصدر
- الرابط:
github.com/vercel-labs/agent-browser -
الوصف: يتضمن طرق التثبيت، ودليل البدء السريع، ومجموعات الأوامر، وإرشادات التطوير
-
الوثائق الرسمية لـ agent-browser: الدليل الشامل ومرجع الأوامر
- الرابط:
agent-browser.dev -
الوصف: تغطي اللقطات، والمحدّدات، والجلسات، ووضع CDP، وآليات الأمان
-
وثائق أمان agent-browser: المصادقة والتحكم في الوصول
- الرابط:
agent-browser.dev/security -
الوصف: تشرح خزنة المصادقة، والقائمة البيضاء للنطاقات، وسياسات الإجراءات، وحدود المحتوى
-
مركز وثائق APIYI: إرشادات التكامل مع النماذج
- الرابط:
docs.apiyi.com -
الوصف: طرق التكامل باستخدام التنسيقات المتوافقة مع OpenAI وAnthropic
-
صفحة أسعار نماذج APIYI: التكلفة الفعلية لكل نموذج
- الرابط:
docs.apiyi.com/models - الوصف: تُعتمد هذه الصفحة مرجعًا لجميع أسعار النماذج الواردة في المقال
الكاتب: فريق APIYI التقني
التواصل التقني: يمكنكم التواصل معنا عبر الصفحة الرئيسية لموقع APIYI على apiyi.com، والاطلاع على المزيد من موارد التكامل في مركز الوثائق على docs.apiyi.com
