AWS mostrou como incorporar a visualização ao vivo de um agente de AI no React via Bedrock AgentCore

Em 9 de abril de 2026, a AWS publicou um breakdown técnico sobre como integrar a visualização ao vivo de um agente IA baseado em navegador em uma aplicação React através do Amazon Bedrock AgentCore. Em vez de modo caixa-preta, o usuário vê cada transição, clique e entrada de dados na interface enquanto o agente executa a tarefa.

Por Que Live View é Necessário

A ideia principal do post não é mais uma automação de navegador, mas transparência. Se um agente navega por sites por conta própria, busca dados, preenche formulários e toma decisões intermediárias, o usuário precisa entender o que exatamente está acontecendo na tela. A AWS propõe incorporar essa camada visual diretamente no produto: em um painel React, você pode exibir a sessão do navegador remoto em tempo real sem forçar uma pessoa a mudar para o console, um serviço de streaming separado ou um painel administrativo externo.

Os usuários precisam de visibilidade das ações do agente para manter

confiança e controle.

Essa abordagem é particularmente útil onde é necessária verificação manual ou auditoria: em portais de cliente, sistemas operacionais internos, serviços com dados sensíveis e cenários regulados. A AWS enfatiza especificamente que observar as ações do agente reduz a desconfiança: quando uma pessoa vê como o modelo abre a página correta, insere uma consulta e obtém resultados, isso é percebido como mais confiável do que uma mensagem de texto seca "tarefa concluída". Além disso, as sessões podem ser registradas no Amazon S3 e analisadas posteriormente.

Como Funciona a Arquitetura

A arquitetura consiste em três partes. No lado do cliente, uma aplicação React executa com um componente `BrowserLiveView` que recebe uma URL assinada e levanta uma conexão WebSocket persistente para o stream de vídeo. No lado do servidor, a aplicação cria uma sessão de navegador através da API Bedrock AgentCore, gerencia seu ciclo de vida e gera uma URL SigV4 temporária. A parte em nuvem da AWS em si mantém uma sessão de navegador isolada e entrega o stream através do Amazon DCV, para que o desenvolvedor não precise montar uma infraestrutura de streaming separada.

Um detalhe importante é que o vídeo não passa pelo servidor da aplicação. O backend apenas inicia a sessão, assina a URL temporária e conecta o cliente à sessão necessária, enquanto o stream vai diretamente do AgentCore para o navegador do usuário via WebSocket. Isso reduz a latência, diminui os requisitos de infraestrutura e elimina a necessidade de um serviço de mídia separado ou proxy de tráfego de vídeo proprietário.

No esquema básico, a AWS propõe o seguinte caminho:

• servidor inicia uma sessão de navegador e gera uma URL Live View
• componente React `BrowserLiveView` renderiza o stream na interface
• agente IA controla o navegador através do `PlaywrightBrowser`
• o modelo chama ferramentas como `navigate`, `click`, `type` e `getText`
• o usuário vê cada ação em tempo real

Para começar, três etapas básicas são suficientes: criar uma sessão, passar uma URL assinada para o frontend e renderizar o componente com as mesmas dimensões de viewport que foram definidas no servidor. A AWS avisa especificamente: se `remoteWidth` e `remoteHeight` não corresponderem aos parâmetros da sessão, a interface receberá corte de imagem ou barras pretas. Por exemplo, o post usa resolução de 1920 por 1080 e TTL padrão de URL de 300 segundos.

O Que Há no Exemplo

Junto com o guia, a AWS lançou uma aplicação demo pronta no GitHub. Ela inclui um painel React com Live View integrado, um log de ações do agente com timestamps, um campo de entrada de prompt e um servidor Fastify que inicia o modelo e as ferramentas de navegador. O cenário de demonstração é simples, mas instrutivo: o agente abre Wikipedia, busca um tópico, lê a página e depois faz um breve resumo enquanto o usuário observa todos os passos em um painel e vê quais comandos são executados no caminho.

A vinculação do modelo não é rígida. O exemplo usa a API Amazon Bedrock Converse, e você pode escolher Anthropic Claude, Amazon Nova ou outro modelo Bedrock com suporte a tool use como mecanismo. Para o frontend, o projeto é construído com Vite, e há outro ponto prático aqui: `BrowserLiveView` depende do Amazon DCV Web Client SDK, então o config de build precisa de aliases, deduplicação de dependências e cópia de arquivos de runtime para o build.

Para implantação local, a AWS recomenda usar apenas credenciais temporárias, e para produção, adicionar imediatamente autenticação, HTTPS, restrições CORS e rate limiting.

O Que Isso Significa

A AWS está movendo agentes IA de navegador do modo de automação em segundo plano para uma interface observável onde os humanos acham mais fácil confiar no sistema e intervir a tempo. Para equipes que constroem produtos de agente no React, isso reduz a barreira de entrada: você pode pegar um componente pronto, conectar um navegador em nuvem e construir rapidamente uma experiência onde as ações do modelo são visíveis não apenas para o desenvolvedor, mas para o usuário final.