Bedrock AgentCore: Sematkan Ejen Pelayar AI Langsung dalam React

Era ejen AI yang beroperasi sebagai "kotak hitam" yang legap semakin hampir berakhir. Apabila kecerdasan buatan mengambil tugas yang semakin kompleks dan autonomi, terutamanya dalam persekitaran web, permintaan untuk ketelusan, kepercayaan, dan kawalan pengguna tidak pernah setinggi ini. Pengguna perlu memahami dan mengesahkan tindakan yang diambil oleh ejen AI bagi pihak mereka, terutamanya apabila tindakan tersebut melibatkan navigasi laman web, interaksi dengan data sensitif, atau pelaksanaan aliran kerja kritikal.

Menangani cabaran asas ini, Amazon Web Services memperkenalkan penyelesaian yang berkuasa: komponen Amazon Bedrock AgentCore BrowserLiveView. Alat inovatif ini memperkasakan pembangun untuk menyematkan suapan video masa nyata yang langsung dari sesi pelayaran ejen AI secara langsung dalam aplikasi React mereka. Integrasi ini bukan sahaja menyahmistifikasikan tingkah laku ejen tetapi juga menyediakan pengguna dengan keterlihatan yang belum pernah terjadi sebelumnya dan rasa kawalan yang penting.

Sebagai sebahagian daripada Bedrock AgentCore TypeScript SDK, komponen BrowserLiveView memudahkan integrasi aliran pelayar langsung ke dalam aplikasi anda dengan hanya beberapa baris XML JavaScript (JSX). Menggunakan protokol Amazon DCV berprestasi tinggi, ia memaparkan sesi ejen, dengan berkesan mengubah proses yang tersembunyi secara tradisional menjadi pengalaman yang boleh disahkan secara visual. Artikel ini akan membimbing anda melalui proses, dari memulakan sesi dan menjana URL Paparan Langsung, hingga memaparkan aliran dalam aplikasi React anda, dan akhirnya, menghubungkan ejen AI untuk memacu pelayar sementara pengguna anda menonton.

Meningkatkan Ketelusan Ejen AI dengan BrowserLiveView

Dalam landskap AI Beragen yang berkembang pesat hari ini, keupayaan untuk menyerahkan tugas pelayaran web kepada ejen AI menjanjikan keuntungan kecekapan yang besar. Walau bagaimanapun, janji ini sering dibayangi oleh kebimbangan mengenai kebolehpercayaan, ketepatan, dan keselamatan ejen. Tanpa tingkap yang jelas ke dalam operasi ejen, pengguna dibiarkan untuk mempercayai sistem yang tidak dapat mereka perhatikan, yang boleh menghalang penggunaan dan mengehadkan penempatan dalam senario sensitif.

Komponen BrowserLiveView secara langsung menghadapi cabaran ini dengan membuka "mata" ejen AI kepada pengguna. Bayangkan ejen AI yang ditugaskan untuk mengisi borang dalam talian yang kompleks atau mendapatkan maklumat khusus dari beberapa laman web. Secara tradisinya, pengguna hanya akan menerima output akhir atau ringkasan tindakan, menyebabkan mereka tertanya-tanya tentang langkah-langkah perantaraan. Dengan Paparan Langsung yang disematkan, pengguna dapat mengikuti setiap navigasi, penghantaran borang, dan pertanyaan carian dalam masa nyata semasa ejen melaksanakannya.

Pengesahan visual segera ini tidak ternilai. Ia meyakinkan pengguna bahawa ejen berada di halaman yang betul, berinteraksi dengan elemen yang betul, dan berkembang melalui aliran kerja seperti yang dimaksudkan. Gelung maklum balas masa nyata ini melangkaui pengesahan teks semata-mata; ia menyediakan jejak audit yang ketara dan boleh disahkan tentang tingkah laku ejen, memupuk keyakinan dan kepercayaan yang lebih besar. Untuk aliran kerja yang dikawal selia atau melibatkan data pelanggan yang sensitif, bukti visual ini boleh menjadi kritikal untuk pematuhan dan akauntabiliti. Tambahan pula, dalam senario yang memerlukan pengawasan manusia, penyelia boleh memerhati tindakan ejen secara langsung dalam aplikasi, campur tangan jika perlu, tanpa mengganggu aliran.

Seni Bina Di Sebalik Pemerhatian Ejen Masa Nyata

Integrasi lancar ejen pelayar AI langsung dalam aplikasi React yang dikuasakan oleh Amazon Bedrock AgentCore diorkestrasikan melalui seni bina yang canggih namun cekap yang terdiri daripada tiga komponen utama. Memahami interaksi antara bahagian-bahagian ini adalah penting untuk pelaksanaan dan penempatan yang berjaya.

Interaksi bermula dengan pelayar web pengguna, yang menjalankan aplikasi React anda. Dalam aplikasi ini, komponen BrowserLiveView dipaparkan, menunggu URL pra-tandatangan SigV4 yang selamat dan terhad masa. URL ini, yang dijana oleh pelayan aplikasi anda, adalah kunci untuk mewujudkan sambungan WebSocket berterusan terus ke perkhidmatan Bedrock AgentCore dalam AWS Cloud.

Pelayan aplikasi anda mempunyai tujuan dwi: ia mengehoskan logik ejen AI dan bertindak sebagai perantara untuk pengurusan sesi. Ia memanggil API Amazon Bedrock AgentCore untuk memulakan sesi pelayar dan kemudian menjana URL pra-tandatangan SigV4 secara selamat yang memberikan akses kepada pelayar klien anda ke aliran Paparan Langsung. Pentingnya, walaupun pelayan anda mengorkestrasikan tindakan ejen dan menjana kelayakan yang diperlukan, ia tidak secara langsung mengendalikan aliran video itu sendiri.

Beban kerja berat automasi pelayar dan penstriman video berlaku dalam AWS Cloud. Amazon Bedrock AgentCore mengehoskan sesi pelayar awan terpencil, menyediakan kedua-dua titik akhir automasi—yang berinteraksi dengan ejen AI anda menggunakan Protokol Alat Pembangun Chrome (CDP) Playwright—dan titik akhir penstriman Paparan Langsung, yang dikuasakan oleh Amazon DCV. Reka bentuk ini memastikan bahawa aliran Paparan Langsung DCV mengalir terus dari Amazon Bedrock AgentCore ke pelayar pengguna. Sambungan WebSocket langsung ini memintas pelayan aplikasi anda, meminimumkan kependaman, mengurangkan beban infrastruktur anda, dan memastikan pengalaman tontonan masa nyata yang lancar.

Prasyarat untuk Menggunakan Ejen AI Langsung Anda

Sebelum mendalami pelaksanaan ejen pelayar AI langsung anda, adalah penting untuk memastikan persekitaran pembangunan anda dikonfigurasikan dengan betul dan anda mempunyai sumber serta kebenaran AWS yang diperlukan. Mematuhi prasyarat ini akan memperkemas proses pembangunan anda dan membantu mengekalkan postur operasi yang selamat.

1. Persekitaran Node.js: Anda memerlukan Node.js versi 20 atau lebih baru dipasang pada sistem anda untuk menjalankan komponen sebelah pelayan aplikasi anda.
2. Akaun dan Rantau AWS: Akaun AWS aktif diperlukan, dengan akses ke Rantau AWS yang disokong di mana Amazon Bedrock AgentCore tersedia.
3. Kelayakan dan Kebenaran AWS: Kelayakan AWS anda mesti mempunyai kebenaran Pelayar Amazon Bedrock AgentCore yang sesuai. Sangat penting untuk mengikuti prinsip keistimewaan paling rendah apabila mengkonfigurasi kebenaran AWS Identity and Access Management (IAM). Untuk keselamatan yang dipertingkatkan, sentiasa gunakan kelayakan sementara yang diperoleh daripada AWS IAM Identity Center atau AWS Security Token Service (AWS STS), mengelakkan kunci akses jangka panjang.
4. Akses Model AI: Jika anda merancang untuk menggunakan model AI untuk memacu ejen (seperti yang ditunjukkan dalam contoh, yang menggunakan API Amazon Bedrock Converse dengan Anthropic Claude), anda memerlukan akses kepada model khusus itu dan sebarang kebenaran AWS Bedrock yang berkaitan. Walau bagaimanapun, ingat bahawa Paparan Langsung itu sendiri adalah agnostik model, membolehkan anda menyepadukan mana-mana penyedia model atau rangka kerja ejen pilihan anda.
5. Pemasangan SDK:
   • Pasang SDK TypeScript bedrock-agentcore untuk berinteraksi dengan AgentCore:

     npm install bedrock-agentcore
     

   • Jika anda menggunakan AWS Bedrock untuk model AI anda, pasang AWS SDK untuk JavaScript:

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

Pangkalan kod untuk melaksanakan Paparan Langsung biasanya dibahagikan: kod sebelah pelayan (untuk pengurusan sesi dan logik ejen AI) berjalan dalam Node.js, dan kod sebelah klien (untuk memaparkan Paparan Langsung) berjalan dalam aplikasi React, sering dibundel dengan alat seperti Vite.

Integrasi Langkah demi Langkah: Dari Sesi ke Aliran

Mengintegrasikan ejen pelayar AI langsung dengan Amazon Bedrock AgentCore melibatkan proses tiga langkah yang jelas, menghubungkan logik sebelah pelayan anda dengan aplikasi React sebelah klien anda dan keupayaan teguh AWS Cloud.

1. Memulakan Sesi Pelayar dan Menjana URL Paparan Langsung

Langkah pertama berlaku pada pelayan aplikasi anda. Di sinilah logik belakang anda memulakan sesi pelayar dalam Amazon Bedrock AgentCore dan mendapatkan URL yang diperlukan secara selamat untuk menstrim paparan langsung.

Anda akan menggunakan kelas Browser dari SDK bedrock-agentcore. Kelas ini mengendalikan kerumitan mencipta dan mengurus persekitaran pelayar terpencil dalam awan. Output utama dari langkah ini ialah URL pra-tandatangan SigV4, yang memberikan akses selamat dan sementara kepada aliran video langsung sesi pelayar.

// Contoh kod sebelah pelayan (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Memulakan klien Bedrock AgentCore (pastikan kelayakan AWS yang betul dikonfigurasi)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Gunakan rantau yang anda inginkan

async function startLiveSession() {
    // Mencipta sesi pelayar baru
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Menjana URL Paparan Langsung
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Simpan browser.sessionId untuk kemudian menyambungkan ejen AI anda atau menamatkan sesi
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// `liveViewUrl` ini akan dihantar ke klien React anda.

URL ini kemudiannya dihantar ke frontend React anda, yang akan menggunakannya untuk mewujudkan aliran langsung.

2. Memaparkan Paparan Langsung dalam Aplikasi React Anda

Setelah aplikasi React anda menerima liveViewUrl dari pelayan anda, memaparkan aliran masa nyata adalah sangat mudah, terima kasih kepada komponen BrowserLiveView.

// Contoh kod sebelah klien (komponen 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>Menunggu URL Paparan Langsung...</p>;
    }

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

// Dalam komponen atau halaman App utama anda:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Dapatkan liveViewUrl dari backend anda
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Paparan Langsung Ejen AI</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Dengan hanya url={liveViewUrl}, komponen BrowserLiveView mengendalikan butiran rumit mewujudkan sambungan WebSocket, menggunakan aliran DCV, dan memaparkan suapan video langsung dalam dimensi yang anda tentukan. Integrasi JSX yang minimal ini sangat memudahkan pembangunan frontend, membolehkan anda menumpukan pada pengalaman pengguna di sekitar ejen langsung.

3. Menghubungkan Ejen AI untuk Memacu Pelayar

Langkah terakhir menyambungkan kepintaran ejen AI anda kepada tindakan pelayar sebenar dalam sesi terpencil. Walaupun BrowserLiveView menyediakan maklum balas visual, ejen AI anda menggunakan Playwright CDP (Chrome DevTools Protocol) untuk berinteraksi dengan pelayar secara programatik.

Pelayan aplikasi anda, yang juga mengehoskan ejen AI anda, akan menggunakan ciri page objek Browser (yang merupakan objek Page Playwright) untuk melaksanakan tindakan pelayar.

// Contoh kod sebelah pelayan (disambung dari langkah 1)
// Anggap anda mempunyai antara muka seperti Playwright atau penggunaan Playwright secara langsung
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (persediaan sebelumnya untuk penciptaan pelayar) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Sambung semula ke sesi sedia ada
    await browser.connect(); // Sambung ke sesi pelayar

    const page = browser.page; // Dapatkan objek Playwright Page

    // Contoh logik ejen AI (dipermudahkan untuk ilustrasi)
    // Di sini anda akan berintegrasi dengan LLM anda (cth., Anthropic Claude melalui API Bedrock Converse)
    // untuk menentukan tindakan berdasarkan arahan pengguna dan kandungan halaman.
    console.log("Ejen menavigasi ke example.com...");
    await page.goto('https://www.example.com');
    console.log("Ejen menunggu selama 3 saat...");
    await page.waitForTimeout(3000); // Mensimulasikan masa pemprosesan

    console.log("Ejen menaip ke dalam kotak carian (hipotetikal)...");
    // Contoh: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Contoh: await page.click('#search-button');

    const content = await page.content();
    // Gunakan LLM untuk menganalisis 'content' dan memutuskan langkah seterusnya
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // atau model pilihan anda
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analisis kandungan halaman web ini dan cadangkan tindakan seterusnya: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Model AI mencadangkan tindakan:", parsedBody.content[0].text);

    // Berdasarkan cadangan LLM, laksanakan tindakan halaman selanjutnya...

    // Jangan lupa menutup sesi pelayar apabila selesai
    // await browser.close();
}

// Setelah memulakan sesi dan mendapatkan URL, anda kemudian akan memanggil driveAgent(sessionId)

Gelung interaksi ini—di mana ejen AI anda menganalisis kandungan halaman, menentukan tindakan seterusnya, dan melaksanakannya melalui Playwright CDP—membentuk inti ejen pelayaran autonomi. Semua tindakan ini dipaparkan secara visual dalam masa nyata melalui komponen BrowserLiveView pada skrin pengguna.

Membuka Kunci Kemungkinan Baharu dengan Ejen AI Tersemat

Integrasi BrowserLiveView Amazon Bedrock AgentCore lebih daripada sekadar ciri teknikal; ia adalah perubahan paradigma dalam cara pengguna berinteraksi dan mempercayai ejen AI. Dengan menyematkan maklum balas visual masa nyata, pembangun dapat mencipta aplikasi berkuasa AI yang bukan sahaja cekap tetapi juga telus, boleh diaudit, dan mesra pengguna.

Keupayaan ini amat transformatif untuk aplikasi yang melibatkan:

• Aliran Kerja Kompleks: Mengautomasikan proses dalam talian berbilang langkah seperti kemasukan data, penerimaan pekerja baharu, atau pematuhan peraturan, di mana keterlihatan setiap langkah adalah penting.
• Sokongan Pelanggan: Membolehkan ejen memerhati pembantu AI menyelesaikan pertanyaan pelanggan atau menavigasi sistem, memastikan ketepatan dan menyediakan peluang untuk campur tangan.
• Latihan dan Penyahpepijatan: Menyediakan pembangun dan pengguna akhir dengan alat yang berkuasa untuk memahami tingkah laku ejen, menyahpepijat isu, dan melatih ejen melalui pemerhatian langsung.
• Jejak Audit Dipertingkat: Menjana rekod visual tindakan ejen, yang boleh digabungkan dengan rakaman sesi ke Amazon S3 untuk semakan pasca-hoc yang komprehensif dan pematuhan.

Keupayaan untuk menstrim terus sesi pelayar dari AWS Cloud ke pelayar klien, memintas pelayan aplikasi untuk aliran video, menawarkan kelebihan yang signifikan dari segi prestasi dan kebolehskalaan. Seni bina ini meminimumkan kependaman dan mengurangkan beban pada infrastruktur belakang anda, membolehkan anda menggunakan penyelesaian ejen AI yang sangat responsif dan boleh diskalakan.

Dengan mengguna pakai BrowserLiveView, anda bukan sahaja membina ejen AI; anda membina kepercayaan, kawalan, dan pengalaman pengguna yang lebih kaya. Terokai kemungkinan dan berdayakan pengguna anda dengan keyakinan untuk menyerahkan tugas web yang kompleks kepada ejen pintar.