ما هو PageAgent ؟
PageAgent هي مكتبة JavaScript مفتوحة المصدر من Alibaba تسمح لأي عنصر واجهة (GUI) في صفحتك بأن يُتحكَّم فيه بلغة طبيعية بدلاً من النقرات اليدوية. بمعنى آخر، تكتب جملة مثل “سجّل دخولي” أو “املأ نموذج الطلب”، وتقوم المكتبة بتحليل الـ DOM (شجرة عناصر الصفحة) وتنفيذ الإجراء فعلياً داخل صفحتك، دون الحاجة إلى إضافة متصفح أو متصفح بدون واجهة (Headless Browser) أو بايثون.
لماذا تهتم بـ PageAgent؟
تخيّل أنك تبني لوحة تحكم CRM أو نظام ERP، والمستخدم يحتاج 20 نقرة متتالية لإنجاز مهمة بسيطة مثل “أضف عميلاً جديداً وحدد حالته كـ VIP”. كل نقرة إضافية تعني احتكاكاً (Friction) أكبر، ومعدل تسرّب أعلى، وشكاوى دعم فني أكثر. الحل التقليدي كان إما إعادة تصميم الواجهة بالكامل، أو بناء backend منفصل لأتمتة المهام — وكلاهما مكلف زمنياً ومالياً.
PageAgent يحل هذه المشكلة من الطرف العميل (Client-side) مباشرة: يقرأ عناصر صفحتك النصية (بدون لقطات شاشة أو نماذج متعددة الوسائط)، ويترجم طلب المستخدم إلى سلسلة إجراءات DOM حقيقية — نقر، كتابة، تمرير — بنفس الطريقة التي يفعلها المستخدم يدوياً. النتيجة: نموذج طلب من 20 خطوة يتحول إلى جملة واحدة.
كيف تبدأ؟
الخطوة 1: التثبيت السريع عبر CDN
إذا أردت تجربة الأداة فوراً بدون إعداد Backend، يمكنك تضمين سكربت تجريبي جاهز:
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>
⚠️ هذا الرابط يستخدم LLM (نموذج لغوي) تجريبياً مجانياً من الفريق، مخصص للتقييم الفني فقط وليس للإنتاج (Production).
الخطوة 2: التثبيت عبر npm للمشاريع الحقيقية
npm install page-agent
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-AR',
})
await agent.execute('اضغط على زر تسجيل الدخول')
شرح الكود: تستورد الكلاس PageAgent وتُنشئ نسخة (Instance) منه بتمرير إعدادات النموذج. لاحظ أن baseURL هنا يشير إلى Dashscope (خدمة Alibaba)، لكن الميزة الأساسية أن PageAgent مصمم ليعمل مع أي مزود LLM متوافق مع OpenAI API — يمكنك استبدالها بـ OpenAI أو أي نقطة نهاية (Endpoint) متوافقة أخرى. الدالة execute() هي نقطة الدخول الرئيسية: تستقبل جملة بلغة طبيعية وتُرجع Promise ينفّذ الإجراء داخل الصفحة.
مثال تطبيقي كامل
لنفترض أنك تبني نموذج بحث في متجر إلكتروني، وتريد إضافة قدرة “ابحث عن حذاء رياضي أسود مقاس 42 وأضفه للسلة”:
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'gpt-4o-mini',
baseURL: 'https://api.openai.com/v1',
apiKey: process.env.OPENAI_API_KEY,
language: 'ar-AR',
})
async function runShoppingAssistant(userQuery) {
try {
const result = await agent.execute(userQuery)
console.log('تم تنفيذ الطلب:', result)
} catch (error) {
console.error('فشل تنفيذ الإجراء:', error)
}
}
runShoppingAssistant('ابحث عن حذاء رياضي أسود مقاس 42 وأضفه للسلة')
شرح الكود: هنا استبدلنا baseURL بنقطة نهاية OpenAI مباشرة، مما يوضح مرونة “Bring your own LLM” (أحضر نموذجك الخاص) التي تتيحها المكتبة. الدالة runShoppingAssistant تُغلّف استدعاء execute() بمعالجة أخطاء (Try/Catch) — وهذا ضروري لأن أي فشل في تحليل النية (Intent) أو عدم وجود العنصر المطلوب في DOM يجب أن يُعالَج بأناقة بدلاً من كسر الواجهة كلياً أمام المستخدم.
إذا كنت تحتاج للتحكم عبر تبويبات متعددة أو من خارج المتصفح، توفر المكتبة أيضاً إضافة اختيارية لمتصفح Chrome، بالإضافة إلى خادم MCP (بروتوكول سياق النموذج) لا يزال في مرحلة Beta، يتيح لعملاء ذكاء اصطناعي خارجيين التحكم في المتصفح نفسه.
نصائح ومزالق يجب تجنبها
- لا تعتمد على السكربت التجريبي (Demo CDN) في الإنتاج: هو مخصص للتقييم فقط، ويخضع لشروط استخدام محددة — انتقل فوراً لمفتاح API خاص بك عند الجدية في المشروع.
- راجع بنية DOM في صفحتك: بما أن المكتبة تعتمد على قراءة نصية للعناصر وليس لقطات شاشة، فإن الصفحات ذات الـ ARIA labels أو النصوص الوصفية الضعيفة قد تقلل من دقة التنفيذ.
- اختبر النماذج المختلفة: نظراً لأن PageAgent يدعم أي نموذج متوافق مع OpenAI API، جرّب أكثر من نموذج (مثل Qwen أو GPT) لمعرفة أيها يوازن بين الدقة والتكلفة لحالتك تحديداً.
- لا تنسَ معالجة الأخطاء: تنفيذ إجراء غير موجود في الصفحة (مثل زر تمت إزالته) يجب أن يُعالَج، وإلا ستحصل على تجربة مستخدم مكسورة بصمت.
- تذكر أن المشروع يعتمد على DOM processing من مشروع
browser-use، لذا يُنصح بالاطلاع على وثائق ذلك المشروع لفهم كيفية معالجة العناصر تحت الغطاء بشكل أعمق.
الخلاصة والرأي
PageAgent فكرة ذكية وعملية لمن يبني منتجات SaaS أو لوحات تحكم إدارية معقدة ويريد إضافة طبقة “مساعد ذكي” بدون إعادة كتابة الـ Backend بالكامل. أكبر ميزة فيها هي أنها JavaScript بحتة تعمل داخل المتصفح مباشرة، وتدعم أي نموذج لغوي متوافق مع OpenAI API — وهذا يمنحك حرية اختيار التوازن بين التكلفة والدقة.
تستحق التجربة إذا كنت تعمل على أنظمة إدارية (ERP/CRM) بها Workflows طويلة، أو تريد تحسين إمكانية الوصول (Accessibility) في تطبيقك. لكن إذا كان مشروعك يحتاج أتمتة من طرف الخادم (Server-side) أو تحكماً كاملاً خارج نطاق المتصفح، فهذه ليست الأداة المناسبة — فهي مصممة صراحة كتحسين من طرف العميل، وليست بديلاً عن أدوات الأتمتة الخلفية.
جرّب الكود أعلاه في مشروعك وأخبرنا بالنتيجة. وإذا كنت تبني تطبيق Flutter ويهمك ربط واجهة الويب المصاحبة له بمساعد مشابه، فهذه تجربة تستحق التوثيق
