Bedrock AgentCore: Incorpore um Agente de Navegação de IA ao Vivo no React

• Se você estiver usando o AWS Bedrock para seu modelo de IA, instale o AWS SDK para JavaScript:

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

A base de código para implementar a Visualização ao Vivo é tipicamente dividida: o código do lado do servidor (para gerenciamento de sessão e lógica do agente de IA) é executado em Node.js, e o código do lado do cliente (para renderizar a Visualização ao Vivo) é executado dentro de uma aplicação React, frequentemente empacotada com ferramentas como Vite.

Integração Passo a Passo: Da Sessão ao Stream

Integrar um agente de navegação de IA ao vivo com o Amazon Bedrock AgentCore envolve um processo claro de três etapas, unindo sua lógica de lado do servidor com sua aplicação React de lado do cliente e as robustas capacidades da AWS Cloud.

1. Iniciando uma Sessão de Navegador e Gerando o URL da Visualização ao Vivo

O primeiro passo ocorre no seu servidor de aplicação. É aqui que sua lógica de backend inicia uma sessão de navegador dentro do Amazon Bedrock AgentCore e obtém de forma segura o URL necessário para transmitir a visualização ao vivo.

Você usará a classe Browser do SDK bedrock-agentcore. Esta classe lida com a complexidade de criar e gerenciar ambientes de navegador isolados na nuvem. A saída chave desta etapa é um URL pré-assinado SigV4, que concede acesso seguro e temporário ao stream de vídeo ao vivo da sessão do navegador.

// Exemplo de código do lado do servidor (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicialize o cliente Bedrock AgentCore (garanta que as credenciais AWS apropriadas estejam configuradas)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Use sua região desejada

async function startLiveSession() {
    // Crie uma nova sessão de navegador
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Gere o URL da Visualização ao Vivo
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('URL da Visualização ao Vivo:', liveViewUrl);

    // Armazene browser.sessionId para conectar seu agente de IA ou encerrar a sessão mais tarde
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Este `liveViewUrl` será enviado ao seu cliente React.

Este URL é então passado para o seu frontend React, que o usará para estabelecer o stream ao vivo.

2. Renderizando a Visualização ao Vivo em Sua Aplicação React

Uma vez que sua aplicação React recebe o liveViewUrl do seu servidor, renderizar o stream em tempo real é notavelmente simples, graças ao componente BrowserLiveView.

// Exemplo de código do lado do cliente (componente 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>Aguardando URL da Visualização ao Vivo...</p>;
    }

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

// No seu componente App principal ou página:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Busque o liveViewUrl do seu backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Visualização ao Vivo do Agente de IA</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Com apenas url={liveViewUrl}, o componente BrowserLiveView lida com os detalhes intrincados do estabelecimento da conexão WebSocket, do consumo do stream DCV e da renderização do feed de vídeo ao vivo dentro das suas dimensões especificadas. Esta integração JSX mínima simplifica muito o desenvolvimento frontend, permitindo que você se concentre na experiência do usuário em torno do agente ao vivo.

3. Conectando um Agente de IA para Controlar o Navegador

A etapa final conecta a inteligência do seu agente de IA às ações reais do navegador dentro da sessão isolada. Enquanto o BrowserLiveView fornece o feedback visual, seu agente de IA usa o Playwright CDP (Chrome DevTools Protocol) para interagir com o navegador programaticamente.

Seu servidor de aplicação, que também hospeda seu agente de IA, usará a propriedade page do objeto Browser (que é um objeto Page do Playwright) para executar ações do navegador.

// Exemplo de código do lado do servidor (continuação da etapa 1)
// Assumindo que você tem uma interface semelhante ao Playwright ou uso direto do Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (configuração anterior para criação do navegador) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Reconectar à sessão existente
    await browser.connect(); // Conectar à sessão do navegador

    const page = browser.page; // Obter o objeto Page do Playwright

    // Exemplo de lógica do agente de IA (simplificado para ilustração)
    // Aqui você integraria com seu LLM (por exemplo, Anthropic Claude via API Bedrock Converse)
    // para determinar ações com base em prompts do usuário e conteúdo da página.
    console.log("Agente navegando para example.com...");
    await page.goto('https://www.example.com');
    console.log("Agente esperou por 3 segundos...");
    await page.waitForTimeout(3000); // Simular tempo de processamento

    console.log("Agente digitando em uma caixa de pesquisa (hipotético)...");
    // Exemplo: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Exemplo: await page.click('#search-button');

    const content = await page.content();
    // Use um LLM para analisar 'content' e decidir os próximos passos
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // ou seu modelo preferido
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analise o conteúdo desta página web e sugira a próxima ação: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Ação sugerida pelo Modelo de IA:", parsedBody.content[0].text);

    // Com base na sugestão do LLM, execute mais ações na página...

    // Não se esqueça de fechar a sessão do navegador quando terminar
    // await browser.close();
}

// Após iniciar a sessão e obter o URL, você chamaria driveAgent(sessionId)

Este loop de interação – onde seu agente de IA analisa o conteúdo da página, determina a próxima ação e a executa via Playwright CDP – forma o núcleo de um agente de navegação autônomo. Todas essas ações são renderizadas visualmente em tempo real através do componente BrowserLiveView na tela do usuário.

Desbloqueando Novas Possibilidades com Agentes de IA Incorporados

A integração do BrowserLiveView do Amazon Bedrock AgentCore é mais do que apenas um recurso técnico; é uma mudança de paradigma na forma como os usuários interagem e confiam em agentes de IA. Ao incorporar feedback visual em tempo real, os desenvolvedores podem criar aplicações impulsionadas por IA que são não apenas eficientes, mas também transparentes, auditáveis e fáceis de usar.

Essa capacidade é particularmente transformadora para aplicações que envolvem:

• Fluxos de Trabalho Complexos: Automatização de processos online com várias etapas, como entrada de dados, integração de usuários (onboarding) ou conformidade regulatória, onde a visibilidade em cada etapa é primordial.
• Suporte ao Cliente: Permitindo que agentes observem copilotos de IA resolvendo consultas de clientes ou navegando em sistemas, garantindo precisão e oferecendo oportunidades de intervenção.
• Treinamento e Depuração: Fornecendo a desenvolvedores e usuários finais uma ferramenta poderosa para entender o comportamento do agente, depurar problemas e treinar agentes por meio de observação direta.
• Trilhas de Auditoria Aprimoradas: Gerando registros visuais das ações do agente, que podem ser combinados com gravações de sessão para o Amazon S3 para uma revisão pós-evento e conformidade abrangentes.

A capacidade de transmitir diretamente sessões de navegador da AWS Cloud para navegadores clientes, contornando o servidor de aplicação para o stream de vídeo, oferece vantagens significativas em termos de desempenho e escalabilidade. Essa arquitetura minimiza a latência e reduz a carga na sua infraestrutura de backend, permitindo que você implante soluções de agente de IA altamente responsivas e escaláveis.

Ao adotar o BrowserLiveView, você não está apenas construindo agentes de IA; você está construindo confiança, controle e uma experiência de usuário mais rica. Explore as possibilidades e capacite seus usuários com a confiança para delegar tarefas web complexas a agentes inteligentes.