عرضت AWS كيفية تضمين العرض المباشر لوكيل AI في React عبر Bedrock AgentCore

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

لماذا تكون المشاهدة المباشرة ضرورية

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

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

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

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

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

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

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

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

للبدء، ثلاث خطوات أساسية كافية: إنشاء جلسة، وتمرير عنوان URL موقع إلى الواجهة الأمامية، وعرض المكون بنفس أبعاد viewport التي تم تعيينها على الخادم. تحذر AWS بشكل خاص: إذا كان `remoteWidth` و `remoteHeight` لا يتطابقان مع معاملات الجلسة، ستتعرض الواجهة لقص الصور أو شريط أسود. على سبيل المثال، يستخدم المنشور دقة 1920 × 1080 وعمر افتراضي لعنوان URL مدته 300 ثانية.

ما هو موجود في المثال

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

ربط النموذج ليس صارماً. يستخدم النموذج API Amazon Bedrock Converse، ويمكنك اختيار Anthropic Claude أو Amazon Nova أو نموذج Bedrock آخر بدعم tool use كمحرك. بالنسبة للواجهة الأمامية، يتم بناء المشروع باستخدام Vite، وهناك نقطة عملية أخرى هنا: `BrowserLiveView` يعتمد على Amazon DCV Web Client SDK، لذا تحتاج إعدادات البناء إلى aliases وإزالة التكرار من التبعيات ونسخ ملفات وقت التشغيل إلى البناء.

للنشر المحلي، توصي AWS باستخدام بيانات اعتماد مؤقتة فقط، وللإنتاج، إضافة المصادقة على الفور وHTTPS وقيود CORS والتحديد الكمي للمعدل.

ماذا يعني هذا

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