Bedrock AgentCore: הטמעת סוכן AI דפדפן חי ב-React

עידן סוכני ה-AI הפועלים כ"קופסאות שחורות" אטומות מתקרב במהירות לסיומו. ככל שהבינה המלאכותית מקבלת על עצמה משימות מורכבות ואוטונומיות יותר ויותר, במיוחד בסביבות ווב, הדרישה לשקיפות, אמון ובקרת משתמשים מעולם לא הייתה גבוהה יותר. משתמשים צריכים להבין ולאמת את הפעולות שסוכן AI מבצע בשמם, במיוחד כאשר פעולות אלו כרוכות בניווט באתרי אינטרנט, אינטראקציה עם נתונים רגישים או ביצוע תהליכי עבודה קריטיים.

כמענה לאתגר יסודי זה, Amazon Web Services מציגה פתרון רב עוצמה: רכיב ה-BrowserLiveView של Amazon Bedrock AgentCore. כלי חדשני זה מאפשר למפתחים להטמיע פיד וידאו חי ובזמן אמת של סשן גלישה של סוכן AI ישירות ביישומי ה-React שלהם. אינטגרציה זו לא רק מפיגה את מסתורין התנהגות הסוכן אלא גם מספקת למשתמשים נראות חסרת תקדים ותחושת שליטה חיונית.

כחלק מ-SDK ה-TypeScript של Bedrock AgentCore, רכיב ה-BrowserLiveView מפשט את שילוב זרמי דפדפן חיים באפליקציה שלכם באמצעות כמה שורות קוד JavaScript XML (JSX) בלבד. תוך שימוש בפרוטוקול Amazon DCV בעל הביצועים הגבוהים, הוא מציג את סשן הסוכן, ובכך הופך למעשה תהליך שהיה חבוי באופן מסורתי לחוויה הניתנת לאימות חזותי. מאמר זה ינחה אתכם בתהליך, החל מהפעלת סשן ויצירת כתובת ה-URL של התצוגה החיה, דרך הצגת הזרם באפליקציית ה-React שלכם, ולבסוף, חיבור סוכן AI כדי שיניע את הדפדפן בעוד המשתמשים שלכם צופים.

שיפור שקיפות סוכני AI עם BrowserLiveView

בנוף המשתנה במהירות של AI סוכנותי של ימינו, היכולת להאציל משימות גלישה באינטרנט לסוכני AI מבטיחה רווחי יעילות עצומים. עם זאת, הבטחה זו מרוסנת לעיתים קרובות על ידי חששות לגבי אמינות, דיוק ואבטחת הסוכן. ללא חלון ברור לפעולות הסוכן, משתמשים נאלצים לסמוך על מערכת שאינם יכולים לצפות בה, דבר שיכול להפריע לאימוץ ולהגביל פריסה בתרחישים רגישים.

רכיב ה-BrowserLiveView מתמודד ישירות עם אתגר זה על ידי פתיחת "עיני" סוכן ה-AI למשתמש. דמיינו סוכן AI שתפקידו למלא טופס מקוון מורכב או לאחזר מידע ספציפי ממספר אתרי אינטרנט. באופן מסורתי, המשתמש היה מקבל רק פלט סופי או סיכום של פעולות, מה שהיה מותיר אותו לתהות לגבי הצעדים הביניים. עם תצוגה חיה מוטמעת, משתמשים יכולים לעקוב אחר כל ניווט, שליחת טופס ושאילתת חיפוש בזמן אמת כפי שהסוכן מבצע אותם.

אישור ויזואלי מיידי זה הוא בעל ערך רב. הוא מרגיע את המשתמשים שהסוכן נמצא בדף הנכון, מקיים אינטראקציה עם האלמנטים הנכונים, ומתקדם בתהליך העבודה כמתוכנן. לולאת משוב בזמן אמת זו חורגת מעבר לאישורי טקסט בלבד; היא מספקת מסלול ביקורת מוחשי וניתן לאימות של התנהגות הסוכן, מטפחת אמון וביטחון גדולים יותר. עבור תהליכי עבודה המוסדרים או כרוכים בנתוני לקוחות רגישים, עדות ויזואלית זו יכולה להיות קריטית לצורך ציות ומתן דין וחשבון. יתרה מכך, בתרחישים הדורשים פיקוח אנושי, מפקח יכול לצפות ישירות בפעולות הסוכן בתוך האפליקציה, ולהתערב במידת הצורך, מבלי לשבש את הזרימה.

הארכיטקטורה מאחורי התצפית על סוכנים בזמן אמת

השילוב החלק של סוכן דפדפן AI חי בתוך יישום React המופעל על ידי Amazon Bedrock AgentCore מתבצע באמצעות ארכיטקטורה מתוחכמת אך יעילה המורכבת משלושה רכיבים עיקריים. הבנת יחסי הגומלין בין חלקים אלה חיונית ליישום ופריסה מוצלחים.

האינטראקציה מתחילה בדפדפן האינטרנט של המשתמש, המריץ את יישום ה-React שלכם. בתוך יישום זה, רכיב ה-BrowserLiveView מוצג, ממתין לכתובת URL מאובטחת ומוגבלת בזמן החתומה מראש ב-SigV4. כתובת URL זו, שנוצרה על ידי שרת היישומים שלכם, היא המפתח ליצירת חיבור WebSocket מתמשך ישירות לשירות Bedrock AgentCore בענן AWS.

שרת היישומים שלכם משמש למטרה כפולה: הוא מארח את הלוגיקה של סוכן ה-AI ופועל כמתווך לניהול סשנים. הוא קורא ל-API של Amazon Bedrock AgentCore כדי ליזום סשני דפדפן ולאחר מכן יוצר באופן מאובטח את כתובות ה-URL החתומות מראש ב-SigV4 המעניקות לדפדפן הלקוח שלכם גישה לזרם התצוגה החיה. באופן מכריע, בעוד שהשרת שלכם מתאם את פעולות הסוכן ומייצר את האישורים הדרושים, הוא אינו מטפל ישירות בזרם הווידאו עצמו.

העבודה הקשה של אוטומציית הדפדפן וזרם הווידאו מתרחשת בתוך ענן AWS. Amazon Bedrock AgentCore מארח סשני דפדפן ענן מבודדים, ומספק הן את נקודת הקצה לאוטומציה – אליה סוכן ה-AI שלכם מקיים אינטראקציה באמצעות 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. חשוב לעקוב אחר עקרון ההרשאה המינימלית בעת קביעת תצורת הרשאות AWS Identity and Access Management (IAM). לאבטחה משופרת, השתמשו תמיד באישורים זמניים שהושגו מ-AWS IAM Identity Center או AWS Security Token Service (AWS STS), הימנעו ממפתחות גישה ארוכי טווח.
4. גישה למודל AI: אם אתם מתכננים להשתמש במודל AI כדי להניע את הסוכן (כפי שהודגם בדוגמה, המשתמשת ב-Amazon Bedrock Converse API עם Anthropic Claude), תזדקקו לגישה למודל הספציפי הזה ולכל הרשאות AWS Bedrock הקשורות. עם זאת, זכרו כי התצוגה החיה עצמה אינה תלוית מודל, מה שמאפשר לכם לשלב כל ספק מודל או מסגרת סוכנים לבחירתכם.
5. התקנות SDK:
   • התקינו את SDK ה-TypeScript של bedrock-agentcore לצורך אינטראקציה עם AgentCore:

     npm install bedrock-agentcore
     

   • אם אתם משתמשים ב-AWS Bedrock עבור מודל ה-AI שלכם, התקינו את ה-AWS SDK עבור JavaScript:

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

בסיס הקוד ליישום התצוגה החיה מתחלק בדרך כלל: קוד צד השרת (לניהול סשנים ולוגיקת סוכן AI) פועל ב-Node.js, וקוד צד הלקוח (להצגת התצוגה החיה) פועל בתוך יישום React, לעיתים קרובות מאוגד עם כלים כמו Vite.

שילוב צעד אחר צעד: מסשן לזרם

שילוב סוכן דפדפן AI חי עם Amazon Bedrock AgentCore כרוך בתהליך ברור בן שלושה שלבים, המגשר על לוגיקת צד השרת שלכם עם יישום ה-React בצד הלקוח והיכולות החזקות של AWS Cloud.

1. הפעלת סשן דפדפן ויצירת כתובת ה-URL של התצוגה החיה

השלב הראשון מתרחש בשרת היישומים שלכם. כאן, לוגיקת ה-backend שלכם יוזמת סשן דפדפן בתוך 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 זו מועברת לאחר מכן ל-frontend של 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>
    );
};

// ברכיב ה-App הראשי או בדף שלכם:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // אחזר את liveViewUrl מה-backend שלך
//         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 מינימלית זו מפשטת מאוד את פיתוח ה-frontend, ומאפשרת לכם להתמקד בחווית המשתמש סביב הסוכן החי.

3. חיבור סוכן AI להנעת הדפדפן

השלב האחרון מחבר את האינטליגנציה של סוכן ה-AI שלכם לפעולות הדפדפן בפועל בתוך הסשן המבודד. בעוד שה-BrowserLiveView מספק את המשוב הוויזואלי, סוכן ה-AI שלכם משתמש ב-Playwright CDP (Chrome DevTools Protocol) כדי לקיים אינטראקציה עם הדפדפן באופן תכנותי.

שרת היישומים שלכם, המארח גם את סוכן ה-AI שלכם, ישתמש במאפיין page של אובייקט ה-Browser (שהוא אובייקט Page של Playwright) כדי לבצע פעולות דפדפן.

// דוגמת קוד צד שרת (המשך משלב 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)

לולאת אינטראקציה זו – שבה סוכן ה-AI שלכם מנתח את תוכן הדף, קובע את הפעולה הבאה ומבצע אותה באמצעות Playwright CDP – מהווה את הליבה של סוכן גלישה אוטונומי. כל הפעולות הללו מוצגות חזותית בזמן אמת באמצעות רכיב ה-BrowserLiveView על מסך המשתמש.

פתיחת אפשרויות חדשות עם סוכני AI מוטמעים

השילוב של BrowserLiveView של Amazon Bedrock AgentCore הוא יותר מסתם תכונה טכנית; זוהי שינוי פרדיגמה באופן שבו משתמשים מקיימים אינטראקציה עם סוכני AI וסומכים עליהם. על ידי הטמעת משוב ויזואלי בזמן אמת, מפתחים יכולים ליצור יישומים מבוססי AI שהם לא רק יעילים אלא גם שקופים, ניתנים לביקורת וידידותיים למשתמש.

יכולת זו משנה במיוחד עבור יישומים הכוללים:

• תהליכי עבודה מורכבים: אוטומציה של תהליכים מקוונים מרובי שלבים כמו הזנת נתונים, קליטה (onboarding) או עמידה בתקנות, כאשר נראות של כל שלב היא חיונית.
• תמיכת לקוחות: מתן אפשרות לסוכנים לצפות בעוזרי AI המטפלים בפניות לקוחות או מנווטים במערכות, תוך הבטחת דיוק ומתן הזדמנויות להתערבות.
• הדרכה וניפוי באגים: מתן כלי רב עוצמה למפתחים ולמשתמשי קצה כדי להבין את התנהגות הסוכן, לנפות באגים ולאמן סוכנים באמצעות תצפית ישירה.
• מסלולי ביקורת משופרים: יצירת רשומות ויזואליות של פעולות סוכן, אותן ניתן לשלב עם הקלטות סשנים ל-Amazon S3 לבדיקה מקיפה לאחר מעשה ולעמידה בתקנות.

היכולת להזרים ישירות סשני דפדפן מענן AWS לדפדפני לקוחות, תוך עקיפת שרת היישומים עבור זרם הווידאו, מציעה יתרונות משמעותיים מבחינת ביצועים ומדרגיות. ארכיטקטורה זו ממזערת חביון ומפחיתה את העומס על תשתית ה-backend שלכם, ומאפשרת לכם לפרוס פתרונות סוכן AI מגיבים וניתנים להרחבה בקלות.

על ידי אימוץ BrowserLiveView, אתם לא רק בונים סוכני AI; אתם בונים אמון, שליטה וחווית משתמש עשירה יותר. חקרו את האפשרויות והעצימו את המשתמשים שלכם בביטחון להאציל משימות ווב מורכבות לסוכנים חכמים.