Bedrock AgentCore: Nhúng Trình duyệt AI Agent Trực tiếp vào React

Kỷ nguyên của các AI agent hoạt động như những "hộp đen" mờ ám đang nhanh chóng kết thúc. Khi trí tuệ nhân tạo đảm nhận các tác vụ ngày càng phức tạp và tự chủ, đặc biệt là trong môi trường web, nhu cầu về sự minh bạch, tin cậy và kiểm soát của người dùng chưa bao giờ cao hơn thế. Người dùng cần hiểu và xác minh các hành động mà một AI agent thực hiện thay mặt họ, đặc biệt khi những hành động đó liên quan đến việc điều hướng các trang web, tương tác với dữ liệu nhạy cảm hoặc thực hiện các quy trình làm việc quan trọng.

Để giải quyết thách thức cơ bản này, Amazon Web Services giới thiệu một giải pháp mạnh mẽ: thành phần Amazon Bedrock AgentCore BrowserLiveView. Công cụ sáng tạo này trao quyền cho các nhà phát triển nhúng nguồn cấp dữ liệu video trực tiếp, thời gian thực của phiên duyệt web của một AI agent trực tiếp vào các ứng dụng React của họ. Sự tích hợp này không chỉ làm sáng tỏ hành vi của agent mà còn cung cấp cho người dùng khả năng hiển thị chưa từng có và cảm giác kiểm soát quan trọng.

Là một phần của SDK TypeScript của Bedrock AgentCore, thành phần BrowserLiveView đơn giản hóa việc tích hợp các luồng trình duyệt trực tiếp vào ứng dụng của bạn chỉ với một vài dòng JavaScript XML (JSX). Sử dụng giao thức Amazon DCV hiệu suất cao, nó hiển thị phiên của agent, biến một quy trình truyền thống ẩn thành một trải nghiệm có thể kiểm chứng bằng hình ảnh. Bài viết này sẽ hướng dẫn bạn qua quy trình, từ việc bắt đầu một phiên và tạo URL Chế độ xem trực tiếp, đến việc hiển thị luồng trong ứng dụng React của bạn, và cuối cùng, kết nối một AI agent để điều khiển trình duyệt khi người dùng của bạn xem.

Nâng cao sự minh bạch của AI Agent với BrowserLiveView

Trong bối cảnh AI tác tử đang phát triển nhanh chóng ngày nay, khả năng ủy thác các tác vụ duyệt web cho các AI agent hứa hẹn mang lại những lợi ích hiệu quả to lớn. Tuy nhiên, lời hứa này thường bị hạn chế bởi những lo ngại về độ tin cậy, độ chính xác và bảo mật của agent. Nếu không có một cửa sổ rõ ràng để nhìn vào hoạt động của agent, người dùng sẽ phải tin tưởng vào một hệ thống mà họ không thể quan sát, điều này có thể cản trở việc áp dụng và hạn chế triển khai trong các tình huống nhạy cảm.

Thành phần BrowserLiveView trực tiếp đối mặt với thách thức này bằng cách mở "mắt" của AI agent cho người dùng. Hãy tưởng tượng một AI agent được giao nhiệm vụ điền vào một biểu mẫu trực tuyến phức tạp hoặc truy xuất thông tin cụ thể từ nhiều trang web. Theo truyền thống, người dùng sẽ chỉ nhận được một kết quả cuối cùng hoặc một bản tóm tắt các hành động, khiến họ phải tự hỏi về các bước trung gian. Với Chế độ xem trực tiếp được nhúng, người dùng có thể theo dõi mọi thao tác điều hướng, gửi biểu mẫu và truy vấn tìm kiếm theo thời gian thực khi agent thực hiện chúng.

Xác nhận trực quan ngay lập tức này là vô giá. Nó trấn an người dùng rằng agent đang ở đúng trang, tương tác với đúng các yếu tố và đang tiến hành quy trình làm việc theo đúng dự kiến. Vòng lặp phản hồi thời gian thực này vượt xa các xác nhận bằng văn bản đơn thuần; nó cung cấp một dấu vết kiểm tra hữu hình, có thể kiểm chứng về hành vi của agent, thúc đẩy sự tự tin và tin cậy lớn hơn. Đối với các quy trình làm việc được quy định hoặc liên quan đến dữ liệu khách hàng nhạy cảm, bằng chứng trực quan này có thể rất quan trọng để tuân thủ và chịu trách nhiệm. Hơn nữa, trong các tình huống yêu cầu sự giám sát của con người, một người giám sát có thể trực tiếp quan sát các hành động của agent trong ứng dụng, can thiệp nếu cần, mà không làm gián đoạn quy trình.

Kiến trúc đằng sau việc quan sát Agent theo thời gian thực

Việc tích hợp liền mạch một AI agent trình duyệt trực tiếp trong ứng dụng React được hỗ trợ bởi Amazon Bedrock AgentCore được điều phối thông qua một kiến trúc tinh vi nhưng hiệu quả bao gồm ba thành phần chính. Hiểu rõ sự tương tác giữa các phần này là rất quan trọng để triển khai và vận hành thành công.

Sự tương tác bắt đầu với trình duyệt web của người dùng, trình duyệt này chạy ứng dụng React của bạn. Trong ứng dụng này, thành phần BrowserLiveView được hiển thị, chờ đợi một URL được ký trước bằng SigV4 an toàn, có giới hạn thời gian. URL này, được tạo bởi máy chủ ứng dụng của bạn, là chìa khóa để thiết lập một kết nối WebSocket liên tục trực tiếp đến dịch vụ Bedrock AgentCore trong AWS Cloud.

Máy chủ ứng dụng của bạn phục vụ hai mục đích: nó lưu trữ logic của AI agent và hoạt động như một trung gian cho việc quản lý phiên. Nó gọi API Amazon Bedrock AgentCore để khởi tạo các phiên trình duyệt và sau đó tạo các URL được ký trước bằng SigV4 một cách an toàn để cấp cho trình duyệt khách của bạn quyền truy cập vào luồng Chế độ xem trực tiếp. Điều quan trọng là, trong khi máy chủ của bạn điều phối các hành động của agent và tạo các thông tin xác thực cần thiết, nó không trực tiếp xử lý luồng video.

Phần việc nặng nhọc của tự động hóa trình duyệt và truyền phát video diễn ra trong AWS Cloud. Amazon Bedrock AgentCore lưu trữ các phiên trình duyệt đám mây biệt lập, cung cấp cả điểm cuối tự động hóa—mà AI agent của bạn tương tác bằng cách sử dụng Giao thức Công cụ dành cho nhà phát triển Chrome (CDP) của Playwright—và điểm cuối truyền phát Chế độ xem trực tiếp, được hỗ trợ bởi Amazon DCV. Thiết kế này đảm bảo rằng luồng Chế độ xem trực tiếp của DCV chảy trực tiếp từ Amazon Bedrock AgentCore đến trình duyệt của người dùng. Kết nối WebSocket trực tiếp này bỏ qua máy chủ ứng dụng của bạn, giảm thiểu độ trễ, giảm chi phí cơ sở hạ tầng của bạn và đảm bảo trải nghiệm xem mượt mà, thời gian thực.

Điều kiện tiên quyết để triển khai AI Agent trực tiếp của bạn

Trước khi đi sâu vào việc triển khai AI agent trình duyệt trực tiếp của bạn, điều cần thiết là phải đảm bảo môi trường phát triển của bạn được cấu hình đúng cách và bạn có các tài nguyên và quyền AWS cần thiết. Tuân thủ các điều kiện tiên quyết này sẽ giúp hợp lý hóa quy trình phát triển của bạn và giúp duy trì tư thế hoạt động an toàn.

1. Môi trường Node.js: Bạn sẽ cần Node.js phiên bản 20 trở lên được cài đặt trên hệ thống của mình để chạy các thành phần phía máy chủ của ứng dụng.
2. Tài khoản và Khu vực AWS: Cần có một tài khoản AWS đang hoạt động, với quyền truy cập vào một Khu vực AWS được hỗ trợ nơi Amazon Bedrock AgentCore khả dụng.
3. Thông tin xác thực và Quyền AWS: Thông tin xác thực AWS của bạn phải có các quyền Amazon Bedrock AgentCore Browser thích hợp. Điều quan trọng là phải tuân thủ nguyên tắc đặc quyền tối thiểu khi cấu hình các quyền Quản lý danh tính và truy cập AWS (IAM). Để tăng cường bảo mật, hãy luôn sử dụng thông tin xác thực tạm thời được lấy từ Trung tâm danh tính AWS IAM hoặc Dịch vụ mã thông báo bảo mật AWS (AWS STS), tránh các khóa truy cập có thời gian tồn tại dài.
4. Truy cập mô hình AI: Nếu bạn dự định sử dụng mô hình AI để điều khiển agent (như được minh họa trong ví dụ, sử dụng API Amazon Bedrock Converse với Anthropic Claude), bạn sẽ cần quyền truy cập vào mô hình cụ thể đó và bất kỳ quyền AWS Bedrock liên quan nào. Tuy nhiên, hãy nhớ rằng bản thân Chế độ xem trực tiếp là độc lập với mô hình, cho phép bạn tích hợp bất kỳ nhà cung cấp mô hình hoặc framework agent nào mà bạn chọn.
5. Cài đặt SDK:
   • Cài đặt SDK TypeScript bedrock-agentcore để tương tác với AgentCore:

     npm install bedrock-agentcore
     

   • Nếu bạn đang sử dụng AWS Bedrock cho mô hình AI của mình, hãy cài đặt AWS SDK cho JavaScript:

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

Cơ sở mã để triển khai Chế độ xem trực tiếp thường được chia thành: mã phía máy chủ (để quản lý phiên và logic AI agent) chạy trong Node.js, và mã phía máy khách (để hiển thị Chế độ xem trực tiếp) chạy trong một ứng dụng React, thường được đóng gói bằng các công cụ như Vite.

Tích hợp từng bước: Từ phiên đến luồng

Tích hợp AI agent trình duyệt trực tiếp với Amazon Bedrock AgentCore bao gồm một quy trình ba bước rõ ràng, kết nối logic phía máy chủ của bạn với ứng dụng React phía máy khách và các khả năng mạnh mẽ của AWS Cloud.

1. Bắt đầu phiên trình duyệt và tạo URL Chế độ xem trực tiếp

Bước đầu tiên diễn ra trên máy chủ ứng dụng của bạn. Đây là nơi logic backend của bạn khởi tạo một phiên trình duyệt trong Amazon Bedrock AgentCore và bảo mật URL cần thiết để truyền phát chế độ xem trực tiếp.

Bạn sẽ sử dụng lớp Browser từ SDK bedrock-agentcore. Lớp này xử lý sự phức tạp của việc tạo và quản lý các môi trường trình duyệt biệt lập trên đám mây. Đầu ra chính từ bước này là một URL được ký trước bằng SigV4, cấp quyền truy cập an toàn, tạm thời vào luồng video trực tiếp của phiên trình duyệt.

// Ví dụ mã phía máy chủ (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Khởi tạo máy khách Bedrock AgentCore (đảm bảo thông tin xác thực AWS phù hợp được cấu hình)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Sử dụng khu vực mong muốn của bạn

async function startLiveSession() {
    // Tạo một phiên trình duyệt mới
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Tạo URL Chế độ xem trực tiếp
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Lưu browser.sessionId để sau này kết nối AI agent của bạn hoặc chấm dứt phiên
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// `liveViewUrl` này sẽ được gửi đến máy khách React của bạn.

URL này sau đó được chuyển đến giao diện người dùng React của bạn, giao diện này sẽ sử dụng nó để thiết lập luồng trực tiếp.

2. Hiển thị Chế độ xem trực tiếp trong ứng dụng React của bạn

Khi ứng dụng React của bạn nhận được liveViewUrl từ máy chủ, việc hiển thị luồng thời gian thực trở nên cực kỳ đơn giản, nhờ vào thành phần BrowserLiveView.

// Ví dụ mã phía máy khách (thành phần 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>Đang chờ URL Chế độ xem trực tiếp...</p>;
    }

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

// Trong thành phần App chính hoặc trang của bạn:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Lấy liveViewUrl từ backend của bạn
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Agent Live View</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Chỉ với url={liveViewUrl}, thành phần BrowserLiveView xử lý các chi tiết phức tạp của việc thiết lập kết nối WebSocket, tiêu thụ luồng DCV và hiển thị nguồn cấp dữ liệu video trực tiếp trong các kích thước đã chỉ định của bạn. Việc tích hợp JSX tối thiểu này giúp đơn giản hóa đáng kể việc phát triển giao diện người dùng, cho phép bạn tập trung vào trải nghiệm người dùng xung quanh agent trực tiếp.

3. Kết nối AI Agent để điều khiển trình duyệt

Bước cuối cùng kết nối trí thông minh của AI agent của bạn với các hành động trình duyệt thực tế trong phiên biệt lập. Trong khi BrowserLiveView cung cấp phản hồi trực quan, AI agent của bạn sử dụng Playwright CDP (Giao thức Công cụ dành cho nhà phát triển Chrome) để tương tác với trình duyệt theo chương trình.

Máy chủ ứng dụng của bạn, nơi cũng lưu trữ AI agent của bạn, sẽ sử dụng thuộc tính page của đối tượng Browser (là một đối tượng Playwright Page) để thực thi các hành động trình duyệt.

// Ví dụ mã phía máy chủ (tiếp tục từ bước 1)
// Giả sử bạn có giao diện giống như Playwright hoặc sử dụng Playwright trực tiếp
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (thiết lập trước đó để tạo trình duyệt) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Kết nối lại với phiên hiện có
    await browser.connect(); // Kết nối với phiên trình duyệt

    const page = browser.page; // Lấy đối tượng Playwright Page

    // Ví dụ logic AI agent (đơn giản hóa để minh họa)
    // Tại đây, bạn sẽ tích hợp với LLM của mình (ví dụ: Anthropic Claude qua Bedrock Converse API)
    // để xác định các hành động dựa trên lời nhắc của người dùng và nội dung trang.
    console.log("Agent đang điều hướng đến example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent đã đợi 3 giây...");
    await page.waitForTimeout(3000); // Mô phỏng thời gian xử lý

    console.log("Agent đang gõ vào hộp tìm kiếm (giả định)...");
    // Ví dụ: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Ví dụ: await page.click('#search-button');

    const content = await page.content();
    // Sử dụng LLM để phân tích 'content' và quyết định các bước tiếp theo
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // hoặc mô hình ưu tiên của bạn
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Phân tích nội dung trang web này và đề xuất hành động tiếp theo: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Model đã đề xuất hành động:", parsedBody.content[0].text);

    // Dựa trên đề xuất của LLM, thực hiện các hành động trang tiếp theo...

    // Đừng quên đóng phiên trình duyệt khi hoàn tất
    // await browser.close();
}

// Sau khi bắt đầu phiên và lấy URL, bạn sẽ gọi driveAgent(sessionId)

Vòng lặp tương tác này—nơi AI agent của bạn phân tích nội dung trang, xác định hành động tiếp theo và thực hiện nó qua Playwright CDP—tạo thành cốt lõi của một agent duyệt web tự động. Tất cả các hành động này được hiển thị trực quan theo thời gian thực thông qua thành phần BrowserLiveView trên màn hình người dùng.

Mở khóa những khả năng mới với các AI Agent được nhúng

Việc tích hợp BrowserLiveView của Amazon Bedrock AgentCore không chỉ là một tính năng kỹ thuật; đó là một sự thay đổi mô hình trong cách người dùng tương tác và tin tưởng vào các AI agent. Bằng cách nhúng phản hồi trực quan thời gian thực, các nhà phát triển có thể tạo ra các ứng dụng được hỗ trợ bởi AI không chỉ hiệu quả mà còn minh bạch, có thể kiểm toán và thân thiện với người dùng.

Khả năng này đặc biệt mang tính chuyển đổi cho các ứng dụng liên quan đến:

• Quy trình làm việc phức tạp: Tự động hóa các quy trình trực tuyến nhiều bước như nhập dữ liệu, giới thiệu hoặc tuân thủ quy định, nơi khả năng hiển thị từng bước là tối quan trọng.
• Hỗ trợ khách hàng: Cho phép các agent quan sát AI co-pilot giải quyết các truy vấn của khách hàng hoặc điều hướng hệ thống, đảm bảo độ chính xác và cung cấp cơ hội can thiệp.
• Đào tạo và gỡ lỗi: Cung cấp cho các nhà phát triển và người dùng cuối một công cụ mạnh mẽ để hiểu hành vi của agent, gỡ lỗi các vấn đề và đào tạo agent thông qua quan sát trực tiếp.
• Dấu vết kiểm toán nâng cao: Tạo các bản ghi trực quan về các hành động của agent, có thể được kết hợp với các bản ghi phiên cho Amazon S3 để xem xét toàn diện sau sự việc và tuân thủ.

Khả năng truyền trực tiếp các phiên trình duyệt từ AWS Cloud đến trình duyệt máy khách, bỏ qua máy chủ ứng dụng đối với luồng video, mang lại những lợi thế đáng kể về hiệu suất và khả năng mở rộng. Kiến trúc này giảm thiểu độ trễ và giảm gánh nặng cho cơ sở hạ tầng backend của bạn, cho phép bạn triển khai các giải pháp AI agent có khả năng phản hồi cao và có thể mở rộng.

Bằng cách áp dụng BrowserLiveView, bạn không chỉ xây dựng các AI agent; bạn đang xây dựng sự tin tưởng, kiểm soát và trải nghiệm người dùng phong phú hơn. Khám phá các khả năng và trao quyền cho người dùng của bạn với sự tự tin để ủy thác các tác vụ web phức tạp cho các agent thông minh.