AWS تُظهر كيفية دمج العرض المباشر لوكيل الذكاء الاصطناعي في React عبر Bedrock AgentCore

في 9 أبريل 2026 نشرت AWS تحليلاً تقنياً يشرح كيفية دمج عرض مباشر لعمل وكيل ذكاء اصطناعي يعمل عبر المتصفح في تطبيق React، وذلك من خلال Amazon Bedrock AgentCore. فبدلاً من نمط «الصندوق الأسود»، يرى المستخدم في الواجهة كل انتقال ونقرة وإدخال للبيانات أثناء تنفيذ الوكيل للمهمة.

لماذا نحتاج إلى Live View

لا تدور الفكرة الأساسية في المقال حول أتمتة جديدة للمتصفح، بل حول الشفافية. فعندما يتنقل الوكيل بنفسه بين المواقع، ويبحث عن البيانات، ويملأ النماذج، ويتخذ قرارات وسيطة، يحتاج المستخدم إلى فهم ما يجري بالضبط على الشاشة. وتقترح AWS دمج هذه الطبقة المرئية مباشرة في المنتج: ففي لوحة React يمكن عرض جلسة المتصفح البعيدة في الزمن الحقيقي، دون إجبار المستخدم على التبديل إلى وحدة التحكم أو إلى خدمة بث منفصلة أو لوحة إدارة خارجية.

يحتاج المستخدمون إلى رؤية إجراءات الوكيل للحفاظ على ثقتهم وسيطرتهم.

يفيد هذا النهج بصورة خاصة في الحالات التي تتطلب مراجعة يدوية أو تدقيقاً: في بوابات العملاء، وأنظمة العمليات الداخلية، والخدمات التي تتعامل مع بيانات حساسة، والسيناريوهات الخاضعة للتنظيم. وتؤكد AWS بشكل خاص أن مراقبة إجراءات الوكيل تقلل انعدام الثقة: فحين يرى الشخص النموذج يفتح الصفحة المطلوبة ويكتب الاستعلام ويحصل على النتيجة، يبدو ذلك أكثر موثوقية من رسالة نصية جافة تقول «تم تنفيذ المهمة». كما يمكن تسجيل الجلسات في Amazon S3 ثم تحليلها لاحقاً.

كيف تعمل البنية

تتألف البنية من ثلاثة أجزاء. على جانب العميل يعمل تطبيق React مع المكوّن `BrowserLiveView`، الذي يتلقى عنوان URL موقَّعاً ويفتح اتصال WebSocket دائماً لتدفق الفيديو. وعلى جانب الخادم، ينشئ التطبيق جلسة متصفح عبر Bedrock AgentCore API ويدير دورة حياتها ويولّد عنوان SigV4 URL مؤقتاً. أما الجزء السحابي لدى AWS فيحتفظ بجلسة متصفح معزولة ويقدّم البث عبر Amazon DCV، ولذلك لا يحتاج المطوّر إلى بناء بنية تحتية منفصلة للبث.

وثمة نقطة مهمة: الفيديو لا يمر عبر خادم التطبيق. فالخادم الخلفي يكتفي بتشغيل الجلسة وتوقيع العنوان المؤقت وربط العميل بالجلسة المطلوبة، بينما يتدفق البث نفسه مباشرة من AgentCore إلى متصفح المستخدم عبر WebSocket. وهذا يقلل زمن التأخير ويخفف متطلبات البنية التحتية، ويعفي الفريق من الحاجة إلى خدمة وسائط منفصلة أو إلى تمرير حركة الفيديو عبر وكيل خاص به.

في المخطط الأساسي تقترح AWS المسار التالي:

• يبدأ الخادم جلسة المتصفح ويولّد عنوان Live View URL
• يعرض مكوّن React المسمى `BrowserLiveView` البث في الواجهة
• يتحكم وكيل الذكاء الاصطناعي في المتصفح عبر `PlaywrightBrowser`
• يستدعي النموذج أدوات مثل `navigate` و`click` و`type` و`getText`
• يرى المستخدم كل إجراء في الزمن الحقيقي

يكفي للتشغيل ثلاث خطوات رئيسية: إنشاء الجلسة، وتمرير العنوان الموقَّع إلى الواجهة الأمامية، ثم عرض المكوّن بأبعاد viewport نفسها التي حُدّدت على الخادم. وتحذّر AWS تحديداً من أنه إذا لم تتطابق قيمتا `remoteWidth` و`remoteHeight` مع معلمات الجلسة، فستظهر الصورة مقتطعة أو بحواف سوداء. ويستخدم المثال في المقال دقة 1920 × 1080 ومدة صلاحية للرابط (TTL) تبلغ 300 ثانية افتراضياً.

ماذا يتضمن المثال

إلى جانب الدليل، نشرت AWS تطبيقاً تجريبياً جاهزاً على GitHub. يضم لوحة React مع Live View مدمجاً، وسجلاً لإجراءات الوكيل مع الطوابع الزمنية، وحقلاً لإدخال الأوامر النصية (prompt)، وخادم Fastify الذي يشغّل النموذج وأدوات المتصفح. والسيناريو التوضيحي بسيط لكنه معبّر: يفتح الوكيل Wikipedia، ويبحث عن موضوع، ويقرأ الصفحة، ثم يكتب ملخصاً موجزاً، بينما يتابع المستخدم جميع الخطوات في لوحة واحدة ويرى الأوامر التي تُنفَّذ أثناء ذلك.

ولا يرتبط النموذج بهذه الحزمة ارتباطاً صارماً. فالنموذج التوضيحي يستخدم Amazon Bedrock Converse API، ويمكن اختيار Anthropic Claude أو Amazon Nova أو أي نموذج آخر في Bedrock يدعم استخدام الأدوات (tool use) كمحرّك. أما الواجهة الأمامية فبُني المشروع فيها على Vite، وهنا نقطة عملية إضافية: يعتمد `BrowserLiveView` على Amazon DCV Web Client SDK، ولذلك يتطلب ملف إعداد أداة البناء استخدام alias، وإزالة تكرار الاعتماديات (dedupe)، ونسخ ملفات runtime إلى مجلد build. وللتشغيل المحلي تنصح AWS باستخدام بيانات اعتماد مؤقتة فقط، أما في بيئة الإنتاج (production) فتنصح بإضافة المصادقة وHTTPS وقيود CORS وتحديد معدل الطلبات (rate limiting) منذ البداية.

ماذا يعني ذلك

تنقل AWS وكلاء الذكاء الاصطناعي العاملين عبر المتصفح من نمط الأتمتة الخلفية إلى واجهة قابلة للمراقبة، حيث يسهل على الإنسان الوثوق بالنظام والتدخل في الوقت المناسب. وبالنسبة إلى الفرق التي تبني منتجات وكلاء على React، يخفض ذلك عتبة الانطلاق: يمكنها اعتماد مكوّن جاهز وربط متصفح سحابي وبناء تجربة سريعة تُرى فيها إجراءات النموذج، لا للمطوّر وحده بل للمستخدم النهائي أيضاً.