Bedrock AgentCore: دمج وكيل متصفح AI مباشر في React

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

لمعالجة هذا التحدي الأساسي، تقدم Amazon Web Services حلاً قويًا: مكون Amazon Bedrock AgentCore BrowserLiveView. تُمكّن هذه الأداة المبتكرة المطورين من دمج بث فيديو مباشر في الوقت الفعلي لجلسة تصفح وكيل الذكاء الاصطناعي مباشرةً داخل تطبيقات React الخاصة بهم. لا يزيل هذا التكامل الغموض عن سلوك الوكيل فحسب، بل يوفر للمستخدمين أيضًا رؤية غير مسبوقة وشعورًا حاسمًا بالتحكم.

يُعد مكون BrowserLiveView جزءًا من حزمة SDK لـ Bedrock AgentCore TypeScript، وهو يبسّط دمج البث المباشر للمتصفح في تطبيقك ببضع أسطر فقط من JavaScript XML (JSX). باستخدام بروتوكول Amazon DCV عالي الأداء، فإنه يعرض جلسة الوكيل، مما يحول بفعالية العملية المخفية تقليديًا إلى تجربة يمكن التحقق منها بصريًا. سترشدك هذه المقالة خلال العملية، بدءًا من بدء جلسة وإنشاء عنوان URL للعرض المباشر، وصولاً إلى عرض البث في تطبيق React الخاص بك، وأخيرًا، ربط وكيل AI لقيادة المتصفح بينما يشاهد المستخدمون.

تعزيز شفافية وكيل AI باستخدام BrowserLiveView

في المشهد المتطور بسرعة لـ الذكاء الاصطناعي الوكيلي اليوم، تعد القدرة على تفويض مهام تصفح الويب لوكلاء الذكاء الاصطناعي بمكاسب هائلة في الكفاءة. ومع ذلك، غالبًا ما يتم كبح هذا الوعد بمخاوف بشأن موثوقية الوكيل ودقته وأمانه. بدون نافذة واضحة على عمليات الوكيل، يُترك المستخدمون ليثقوا بنظام لا يمكنهم مراقبته، مما قد يعيق التبني ويحد من النشر في السيناريوهات الحساسة.

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

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

الهندسة المعمارية وراء المراقبة في الوقت الفعلي للوكلاء

يتم تنسيق الدمج السلس لوكيل متصفح AI مباشر داخل تطبيق React المدعوم من Amazon Bedrock AgentCore من خلال بنية معمارية متطورة وفعالة تتكون من ثلاثة مكونات رئيسية. يعد فهم التفاعل بين هذه الأجزاء أمرًا بالغ الأهمية للتنفيذ والنشر الناجحين.

يبدأ التفاعل بمتصفح الويب الخاص بالمستخدم، الذي يشغل تطبيق React الخاص بك. داخل هذا التطبيق، يتم عرض مكون BrowserLiveView، بانتظار عنوان URL آمن ومُوقّع مسبقًا (SigV4-presigned URL) ومحدد بوقت. عنوان URL هذا، الذي يتم إنشاؤه بواسطة خادم تطبيقك، هو المفتاح لإنشاء اتصال WebSocket مستمر مباشرةً بخدمة Bedrock AgentCore في سحابة AWS.

يخدم خادم تطبيقك غرضًا مزدوجًا: فهو يستضيف منطق وكيل الذكاء الاصطناعي ويعمل كوسيط لإدارة الجلسة. يستدعي واجهة برمجة تطبيقات Amazon Bedrock AgentCore لبدء جلسات المتصفح ثم ينشئ عناوين URL مُوقّعة مسبقًا (SigV4-presigned URLs) بشكل آمن تمنح متصفح العميل الخاص بك الوصول إلى بث العرض المباشر. الأهم من ذلك، بينما ينسق خادمك إجراءات الوكيل وينشئ بيانات الاعتماد الضرورية، فإنه لا يتعامل مباشرةً مع بث الفيديو نفسه.

يتم العمل الشاق لأتمتة المتصفح وبث الفيديو داخل سحابة AWS. تستضيف Amazon Bedrock AgentCore جلسات متصفح سحابية معزولة، مما يوفر كلاً من نقطة نهاية الأتمتة - التي يتفاعل معها وكيل الذكاء الاصطناعي الخاص بك باستخدام بروتوكول Playwright Chrome DevTools Protocol (CDP) - ونقطة نهاية بث العرض المباشر، المدعومة من Amazon DCV. يضمن هذا التصميم أن يتدفق بث DCV Live View مباشرةً من Amazon Bedrock AgentCore إلى متصفح المستخدم. يتجاوز اتصال WebSocket المباشر هذا خادم تطبيقك، مما يقلل من زمن الانتقال، ويقلل من عبء البنية التحتية الخاصة بك، ويضمن تجربة مشاهدة سلسة وفي الوقت الفعلي.

المتطلبات الأساسية لنشر وكيل AI المباشر الخاص بك

قبل الغوص في تطبيق وكيل متصفح AI المباشر الخاص بك، من الضروري التأكد من تكوين بيئة التطوير الخاصة بك بشكل صحيح، وأن لديك موارد AWS والأذونات اللازمة. سيؤدي الالتزام بهذه المتطلبات الأساسية إلى تبسيط عملية التطوير الخاصة بك والمساعدة في الحفاظ على وضع تشغيلي آمن.

1. بيئة Node.js: ستحتاج إلى تثبيت Node.js الإصدار 20 أو أحدث على نظامك لتشغيل مكونات جانب الخادم لتطبيقك.
2. حساب ومنطقة AWS: مطلوب حساب AWS نشط، مع إمكانية الوصول إلى منطقة AWS مدعومة حيث يتوفر Amazon Bedrock AgentCore.
3. بيانات اعتماد وأذونات AWS: يجب أن تحتوي بيانات اعتماد AWS الخاصة بك على أذونات Amazon Bedrock AgentCore Browser المناسبة. من الضروري اتباع مبدأ أقل الامتيازات عند تكوين أذونات AWS Identity and Access Management (IAM). لتعزيز الأمان، استخدم دائمًا بيانات اعتماد مؤقتة تم الحصول عليها من AWS IAM Identity Center أو AWS Security Token Service (AWS STS)، وتجنب مفاتيح الوصول طويلة الأجل.
4. الوصول إلى نموذج AI: إذا كنت تخطط لاستخدام نموذج AI لقيادة الوكيل (كما هو موضح في المثال، الذي يستخدم واجهة برمجة تطبيقات Amazon Bedrock Converse مع Anthropic Claude)، فستحتاج إلى الوصول إلى هذا النموذج المحدد وأي أذونات AWS Bedrock مرتبطة به. ومع ذلك، تذكر أن Live View نفسه مستقل عن النموذج، مما يسمح لك بدمج أي مزود نموذج أو إطار عمل وكيل من اختيارك.
5. تثبيتات SDK:
   • قم بتثبيت حزمة SDK لـ bedrock-agentcore TypeScript للتفاعل مع AgentCore:

     npm install bedrock-agentcore
     

   • إذا كنت تستخدم AWS Bedrock لنموذج AI الخاص بك، فقم بتثبيت حزمة AWS SDK لـ JavaScript:

     npm install @aws-sdk/client-bedrock-runtime
     

يتم تقسيم قاعدة التعليمات البرمجية لتطبيق Live View عادةً: التعليمات البرمجية لجانب الخادم (لإدارة الجلسة ومنطق وكيل AI) تعمل في Node.js، والتعليمات البرمجية لجانب العميل (لعرض Live View) تعمل داخل تطبيق React، غالبًا ما يتم تجميعها باستخدام أدوات مثل Vite.

تكامل خطوة بخطوة: من الجلسة إلى البث

يتضمن دمج وكيل متصفح AI مباشر مع Amazon Bedrock AgentCore عملية واضحة من ثلاث خطوات، تربط منطق جانب الخادم الخاص بك بتطبيق React لجانب العميل والقدرات القوية لسحابة AWS.

1. بدء جلسة متصفح وإنشاء عنوان URL للعرض المباشر

الخطوة الأولى تحدث على خادم التطبيق الخاص بك. هذا هو المكان الذي يبدأ فيه منطق الواجهة الخلفية الخاص بك جلسة متصفح داخل Amazon Bedrock AgentCore ويحصل بشكل آمن على عنوان URL اللازم لبث العرض المباشر.

ستستخدم فئة Browser من حزمة SDK لـ bedrock-agentcore. تتعامل هذه الفئة مع تعقيد إنشاء وإدارة بيئات المتصفح المعزولة في السحابة. الإخراج الرئيسي من هذه الخطوة هو عنوان URL موقع مسبقًا من نوع SigV4، والذي يمنح وصولاً آمنًا ومؤقتًا إلى بث الفيديو المباشر لجلسة المتصفح.

// مثال على كود جانب الخادم (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// تهيئة عميل Bedrock AgentCore (تأكد من تكوين بيانات اعتماد AWS المناسبة)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // استخدم المنطقة التي تريدها

async function startLiveSession() {
    // إنشاء جلسة متصفح جديدة
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // إنشاء عنوان URL للعرض المباشر
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // تخزين browser.sessionId للاتصال بوكيل AI الخاص بك لاحقًا أو إنهاء الجلسة
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// سيتم إرسال `liveViewUrl` هذا إلى عميل React الخاص بك.

يتم بعد ذلك تمرير عنوان URL هذا إلى الواجهة الأمامية لتطبيق React الخاص بك، والتي ستستخدمه لإنشاء البث المباشر.

2. عرض العرض المباشر في تطبيق React الخاص بك

بمجرد أن يتلقى تطبيق React الخاص بك liveViewUrl من الخادم الخاص بك، يصبح عرض البث في الوقت الفعلي أمرًا سهلاً بشكل ملحوظ، بفضل مكون BrowserLiveView.

// مثال على كود جانب العميل (مكون React)
import React, { useEffect, useState } from 'react';
import { BrowserLiveView } from 'bedrock-agentcore';

interface LiveAgentViewerProps {
    liveViewUrl: string;
}

const LiveAgentViewer: React.FC<LiveAgentViewerProps> = ({ liveViewUrl }) => {
    if (!liveViewUrl) {
        return <p>جاري انتظار عنوان URL للعرض المباشر...</p>;
    }

    return (
        <div style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}>
            <BrowserLiveView url={liveViewUrl} />
        </div>
    );
};

// في مكون التطبيق الرئيسي أو الصفحة الخاصة بك:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // جلب liveViewUrl من الواجهة الخلفية الخاصة بك
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>عرض مباشر لوكيل AI</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

بمجرد url={liveViewUrl}، يتولى مكون BrowserLiveView التفاصيل المعقدة لإنشاء اتصال WebSocket، واستهلاك بث DCV، وعرض بث الفيديو المباشر ضمن الأبعاد المحددة. يبسط هذا التكامل البسيط لـ JSX تطوير الواجهة الأمامية بشكل كبير، مما يسمح لك بالتركيز على تجربة المستخدم حول الوكيل المباشر.

3. ربط وكيل AI لقيادة المتصفح

تربط الخطوة الأخيرة ذكاء وكيل الذكاء الاصطناعي الخاص بك بإجراءات المتصفح الفعلية ضمن الجلسة المعزولة. بينما يوفر BrowserLiveView التغذية الراجعة المرئية، يستخدم وكيل الذكاء الاصطناعي الخاص بك Playwright CDP (Chrome DevTools Protocol) للتفاعل مع المتصفح برمجيًا.

سيستخدم خادم التطبيق الخاص بك، الذي يستضيف أيضًا وكيل الذكاء الاصطناعي الخاص بك، خاصية page لكائن Browser (وهو كائن Playwright Page) لتنفيذ إجراءات المتصفح.

// مثال على كود جانب الخادم (تتمة من الخطوة 1)
// بافتراض أن لديك واجهة تشبه Playwright أو استخدام Playwright المباشر
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (الإعداد السابق لإنشاء المتصفح) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // إعادة الاتصال بجلسة موجودة
    await browser.connect(); // الاتصال بجلسة المتصفح

    const page = browser.page; // الحصول على كائن Playwright Page

    // مثال على منطق وكيل AI (مبسط للتوضيح)
    // هنا ستدمج مع LLM الخاص بك (مثل Anthropic Claude عبر Bedrock Converse API)
    // لتحديد الإجراءات بناءً على مطالبات المستخدم ومحتوى الصفحة.
    console.log("الوكيل يتجه إلى example.com...");
    await page.goto('https://www.example.com');
    console.log("انتظر الوكيل 3 ثوانٍ...");
    await page.waitForTimeout(3000); // محاكاة وقت المعالجة

    console.log("الوكيل يكتب في مربع البحث (افتراضي)...");
    // مثال: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // مثال: await page.click('#search-button');

    const content = await page.content();
    // استخدم LLM لتحليل 'content' وتحديد الخطوات التالية
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // أو النموذج المفضل لديك
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `حلل محتوى صفحة الويب هذه واقترح الإجراء التالي: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("نموذج AI اقترح الإجراء:", parsedBody.content[0].text);

    // بناءً على اقتراح LLM، نفّذ المزيد من الإجراءات على الصفحة...

    // لا تنسَ إغلاق جلسة المتصفح عند الانتهاء
    // await browser.close();
}

// بعد بدء الجلسة والحصول على عنوان URL، ستستدعي driveAgent(sessionId)

تشكل حلقة التفاعل هذه - حيث يحلل وكيل الذكاء الاصطناعي الخاص بك محتوى الصفحة، ويحدد الإجراء التالي، وينفذه عبر Playwright CDP - جوهر وكيل التصفح المستقل. يتم عرض كل هذه الإجراءات بصريًا في الوقت الفعلي من خلال مكون BrowserLiveView على شاشة المستخدم.

فتح آفاق جديدة مع وكلاء AI المضمنين

إن دمج BrowserLiveView من Amazon Bedrock AgentCore هو أكثر من مجرد ميزة تقنية؛ إنه تحول نموذجي في كيفية تفاعل المستخدمين مع وكلاء الذكاء الاصطناعي وثقتهم بهم. من خلال تضمين التغذية الراجعة المرئية في الوقت الفعلي، يمكن للمطورين إنشاء تطبيقات مدعومة بالذكاء الاصطناعي ليست فقط فعالة ولكنها أيضًا شفافة وقابلة للتدقيق وسهلة الاستخدام.

تعتبر هذه الإمكانية تحويلية بشكل خاص للتطبيقات التي تتضمن:

• سير العمل المعقد: أتمتة العمليات المتعددة الخطوات عبر الإنترنت مثل إدخال البيانات، أو الإعداد، أو الامتثال التنظيمي، حيث تكون الرؤية في كل خطوة أمرًا بالغ الأهمية.
• دعم العملاء: السماح للوكلاء بمراقبة المساعدين الأذكياء (co-pilots) وهم يحلون استفسارات العملاء أو يتنقلون في الأنظمة، مما يضمن الدقة ويوفر فرصًا للتدخل.
• التدريب وتصحيح الأخطاء: تزويد المطورين والمستخدمين النهائيين بأداة قوية لفهم سلوك الوكيل، وتصحيح المشكلات، وتدريب الوكلاء من خلال المراقبة المباشرة.
• مسارات التدقيق المعززة: إنشاء سجلات مرئية لإجراءات الوكيل، والتي يمكن دمجها مع تسجيلات الجلسة إلى Amazon S3 للمراجعة الشاملة بعد الحادث والامتثال.

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

من خلال اعتماد BrowserLiveView، أنت لا تبني وكلاء AI فحسب؛ بل تبني الثقة والتحكم وتجربة مستخدم أكثر ثراءً. استكشف الإمكانيات ومكّن مستخدميك من الثقة في تفويض مهام الويب المعقدة للوكلاء الأذكياء.