تعمل معظم وكلاء المتصفح مثل سائح يحمل كاميرا. تلتقط لقطة شاشة، وتمررها إلى نموذج رؤية، وتخمّن إحداثيات البكسل لزر ما، ثم تنقر. إنها عملية بطيئة ومكلفة وهشّة؛ فتعديل بسيط في الـ CSS كفيل بإفشال التخمين بالكامل. أما مكتبة Page Agent الجديدة من علي بابا، المفتوحة المصدر، فتتخلى عن هذا الأسلوب تماماً. فبدلاً من النظر إلى الصفحة، تقرأها، إذ تعمل مباشرة على الـ DOM كنص، تماماً كما يفعل المطوّر عند فحص لوحة العناصر.
النتيجة مكتبة TypeScript خفيفة الوزن، مرخّصة برخصة MIT، تحوّل أي واجهة ويب إلى شيء يستطيع نموذج لغوي قيادته بجمل بسيطة. لا خادم Python خلفي، ولا عنقود Chrome بلا واجهة، ولا نموذج متعدد الوسائط. مجرد وسم script واحد.
ما هي Page Agent فعلاً
Page Agent هي وكيل واجهة رسومية مدمج داخل الصفحة. يعيش داخل صفحة الويب كشيفرة JavaScript عادية ويتصرف كالمستخدم الحقيقي: ينقر ويكتب ويمرّر ويتنقّل عبر الـ DOM الحيّ. ولأنه يعمل في جانب العميل ضمن السياق نفسه لتطبيقك، فإنه لا يحتاج إلى أذونات خاصة من المتصفح ولا إلى بنية تحتية خارجية للأتمتة.
الفكرة الجوهرية هي تقنية يسميها المشروع تجفيف الـ DOM. إن الـ DOM الكامل لتطبيق ويب حديث ضخم ومزدحم؛ آلاف العُقَد المتداخلة، معظمها لا صلة له بأي مهمة بعينها. تضغط Page Agent هذا في بنية نصية مدمجة تسميها FlatDomTree: خريطة مسطّحة ومنزوعة التكرار لا تضم سوى العناصر التفاعلية ذات المعنى. هذا الضغط هو ما يجعل هذا النهج قابلاً للعمل مع نماذج نصية أصغر وأرخص. فأنت لا تطلب من نموذج رؤية متطور أن يحلّل لقطة بدقة 4K، بل تسلّم نموذجاً نصياً قائمة واضحة بما هو موجود على الصفحة وما يمكن فعله به.
لماذا القراءة أفضل من النظر
يبدو هذا التمييز نظرياً حتى تحسب التكاليف. الوكيل المعتمد على لقطات الشاشة يدفع مقابل:
- رموز الصورة في كل خطوة (التقاط صفحة كاملة مكلف)
- نموذج متعدد الوسائط، أغلى وأبطأ من نموذج نصي فقط
- تخمين الإحداثيات، الذي ينهار مع التصاميم المتجاوبة ومستويات التكبير
تتجنّب Page Agent هذه العقبات الثلاث. فقراءة الـ DOM تمنحها مراجع عناصر دقيقة بدلاً من تخمينات البكسل، فتوجّه النقرة إلى العُقدة الفعلية بدلاً من إحداثية (x, y) تتزحزح عند إعادة تدفق التخطيط. إنها أسرع لأن الاستدلال النصي أسرع، وأرخص لعدم وجود رموز صور، وأدق لانعدام التخمين.
هناك أيضاً جانب عملي يتعلق بالنشر. فيما مضى، كان إضافة تحكم باللغة الطبيعية إلى تطبيق ويب يعني إقامة خدمة خلفية، وإدارة عملية أتمتة متصفح منفصلة، وربط كل ذلك معاً. تختصر Page Agent هذا كله في بضعة أسطر تعمل حيث يعمل تطبيقك أصلاً.
البدء
التثبيت في حزمة واحدة:
npm install page-agentأو أدرجها في أي صفحة عبر وسم script من شبكة CDN للاختبار السريع:
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>واجهة البرمجة مقصودة أن تكون صغيرة. تنشئ وكيلاً بإعدادات نموذجك وتمنحه مهمة باللغة الطبيعية:
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'YOUR_API_KEY',
language: 'ar-SA',
})
await agent.execute('انقر على زر تسجيل الدخول')ولأن الوصول إلى النموذج يتم عبر نقطة نهاية متوافقة مع OpenAI، فإن Page Agent محايدة تجاه النموذج. وجّه baseURL نحو DashScope من علي بابا، أو بوابتك الخاصة، أو خادم محلي، أو أي مزوّد يتحدث صيغة محادثة OpenAI. وحقل model مجرد نص تفهمه نقطة النهاية؛ استبدل Qwen بنموذج آخر دون المساس ببقية شيفرتك.
بناء سير عمل حقيقي
يقلّل مثال النقرة الواحدة من قيمتها. فالفائدة الحقيقية هي ضغط سير عمل متعدد الخطوات في تعليمة واحدة. تخيّل وكيل دعم يملأ أداة تذاكر داخلية:
await agent.execute(
'افتح تذكرة جديدة عالية الأولوية، واضبط العميل على Acme Corp، ' +
'وأسندها إلى فريق الفوترة، وأضف ملاحظة بأن الفاتورة أُرسلت مرتين.'
)هذا قد يعني عشرات النقرات وتعديلات الحقول عبر لوحة إدارة مزدحمة، مُعبَّراً عنها بجملة واحدة. هنا تستهدف المكتبة مباشرة أنظمة تخطيط الموارد (ERP) وإدارة العملاء (CRM) ولوحات التحكم الداخلية؛ الواجهات الكثيفة عالية الاحتكاك حيث يوفّر اختصار اللغة الطبيعية أكبر قدر من الوقت.
الإنسان في الحلقة افتراضياً
تسليم وكيل مفاتيح لوحة تحكم إنتاجية حيّة أمر مقلق، والمشروع يأخذ ذلك على محمل الجد. تتضمّن Page Agent خطوة موافقة بشرية مدمجة، بحيث يمكن للوكيل اقتراح إجراء وانتظار تأكيد شخص ما قبل أن يمسّ أي شيء ذي أثر. هذا يبقي الأتمتة نافعة للأدوات الداخلية الحقيقية دون تحويلها إلى بوت غير خاضع للإشراف قد يرسل النموذج الخاطئ. ولأي شيء يعدّل البيانات، أبقِ الموافقات مفعّلة.
أبعد من تبويب واحد
يدفع امتدادان Page Agent إلى ما وراء حالة الصفحة الواحدة:
- امتداد Chrome — يتيح التحكم عبر التبويبات، فيستطيع الوكيل تنسيق سير عمل يمتد عبر عدة صفحات أو تطبيقات بدلاً من حبسه في مستند واحد.
- خادم MCP (تجريبي) — يعرض الوكيل المدمج عبر بروتوكول سياق النموذج (MCP)، مما يسمح لوكلاء خارجيين بقيادة المتصفح. هذا هو الجانب المثير للنظام البيئي الأوسع للوكلاء: مساعد مكتبي أو طبقة تنسيق تتحدث MCP يمكنها الآن الوصول إلى تطبيق ويب حيّ وتشغيله، مستخدمةً Page Agent كيديها. وإن كنت تتابع صعود MCP كمعيار للربط، فهذا يتكامل معه تماماً.
أين تناسب وأين لا تناسب
تناسب Page Agent بقوة حين تتحكم أنت في تطبيق الويب وتريد إضافة طبقة لغة طبيعية إليه: لوحات الإدارة الداخلية، ومنتجات SaaS التي تقدّم مساعداً ذكياً، وأدوات إتاحة الوصول، وملء النماذج الذكي. ولأنها تقرأ الـ DOM، فإنها تتدهور بلطف أيضاً؛ إذ تعمل مع البنية الدلالية للصفحة بدلاً من مواضع البكسل الهشّة.
وهي أقل ملاءمة للأتمتة العدائية عبر مواقع لا تتحكم فيها، حيث يتعذّر حقن سكربت وحيث تحتفظ الوكلاء المعتمدة على لقطات الشاشة مع تحكّم كامل بالمتصفح بدور. ومثل أي أداة تقرأ الـ DOM، تعتمد على أن تكون الصفحة منظّمة بشكل معقول؛ فتطبيق مرسوم على canvas بلا DOM يمكن الوصول إليه لا يترك لها ما تقرأه.
الإشارة الأكبر
أكثر ما يثير الاهتمام في Page Agent ليس ميزة بعينها، بل الرهان الكامن. فمع استهلاك سير العمل الوكيلي مزيداً من الرموز لكل مهمة، فإن أذكى استثمار على المدى الطويل ليس النموذج بل طبقة أدوات السياق المحيطة به. وPage Agent هي تلك الطبقة بالضبط للمتصفح: طريقة قابلة لإعادة الاستخدام ومحايدة تجاه النموذج لتسليم أي نموذج لغوي رؤية نظيفة وقابلة للتنفيذ لصفحة ويب. النموذج قابل للتبديل، أما خط أنابيب تجفيف الـ DOM الذي يجعل النماذج الرخيصة تتصرف بدقة فهو الجزء الدائم.
بالنسبة للفرق التي تبني أدوات داخلية أو منتجات مدعومة بالذكاء الاصطناعي في منطقة الشرق الأوسط وشمال إفريقيا وما بعدها، فهي وسيلة منخفضة الالتزام لإضافة تحكم حقيقي باللغة الطبيعية إلى واجهة قائمة: وسم script واحد، ونموذجك الخاص، وخريطة نصية للصفحة بدلاً من تخمين على لقطة شاشة. وإن أردت مساعدة في تصميم تجارب مدفوعة بالوكلاء داخل منتجاتك، فريقنا يعمل على هذا تحديداً.