AWS mostra como integrar a visualização ao vivo de um agente de IA ao React com o Bedrock AgentCore

Em 9 de abril de 2026, a AWS publicou um artigo técnico que explica como integrar a um app React a visualização ao vivo de um agente de IA que opera um navegador, usando o Amazon Bedrock AgentCore. O agente deixa de funcionar como uma caixa-preta: enquanto ele executa a tarefa, o usuário acompanha na interface cada navegação, clique e entrada de dados.

Para que serve o Live View

O foco do post está na transparência, e não em mais uma forma de automatizar o navegador. Quando o agente navega sozinho por sites, busca dados, preenche formulários e toma decisões intermediárias, o usuário precisa entender o que está acontecendo na tela. A AWS propõe embutir essa camada visual no próprio produto: um painel React pode exibir a sessão remota do navegador em tempo real, sem obrigar a pessoa a alternar para o console, um serviço de streaming separado ou um painel administrativo externo.

Os usuários precisam de visibilidade sobre as ações do agente para

manter a confiança e o controle.

A abordagem é especialmente útil quando há necessidade de verificação manual ou auditoria: portais de clientes, sistemas operacionais internos, serviços com dados sensíveis e cenários regulados. A AWS destaca que observar as ações do agente reduz a desconfiança. Ver o modelo abrir a página certa, digitar a consulta e obter o resultado transmite mais segurança do que uma mensagem seca de "tarefa concluída". As sessões também podem ser gravadas no Amazon S3 para análise posterior.

Como a arquitetura funciona

A arquitetura tem três partes. No cliente, roda um app React com o componente `BrowserLiveView`, que recebe uma URL assinada e abre uma conexão WebSocket persistente para o stream de vídeo. No servidor, a aplicação cria a sessão de navegador pela API do Bedrock AgentCore, gerencia seu ciclo de vida e gera uma URL SigV4 temporária. Já a parte em nuvem da AWS mantém a sessão de navegador isolada e transmite o stream via Amazon DCV, de modo que o desenvolvedor não precisa montar uma infraestrutura de streaming própria.

Um detalhe importante: 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 correta; o stream segue direto do AgentCore para o navegador do usuário via WebSocket. Isso reduz a latência, diminui as exigências de infraestrutura e dispensa a equipe de manter um serviço de mídia separado ou um proxy próprio para o tráfego de vídeo.

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

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

Para colocar tudo no ar, bastam três passos principais: criar a sessão, passar a URL assinada para o frontend e renderizar o componente com as mesmas dimensões de viewport definidas no servidor. A AWS faz um alerta específico: se `remoteWidth` e `remoteHeight` não coincidirem com os parâmetros da sessão, a imagem na interface sai cortada ou com bordas pretas. No exemplo do post, a resolução é de 1920 por 1080 e o TTL padrão do link é de 300 segundos.

O que o exemplo inclui

Junto com o guia, a AWS publicou no GitHub um app de demonstração pronto. Ele traz um dashboard React com o Live View embutido, um log das ações do agente com timestamps, um campo para digitar o prompt e um servidor Fastify que executa o modelo e as ferramentas de navegador. O cenário de demonstração é simples, mas ilustrativo: o agente abre a Wikipedia, pesquisa um tema, lê a página e depois gera um resumo, enquanto o usuário acompanha todas as etapas em um único painel e vê quais comandos são executados ao longo do caminho.

A escolha do modelo não é fixa. O exemplo usa a Amazon Bedrock Converse API, e o motor pode ser o Anthropic Claude, o Amazon Nova ou outro modelo do Bedrock com suporte a tool use. O frontend é construído com Vite, e aqui há mais um ponto prático: o `BrowserLiveView` depende do Amazon DCV Web Client SDK, então a configuração do bundler precisa de aliases, deduplicação de dependências e cópia dos arquivos de runtime para o build. Para execução local, a AWS recomenda usar apenas credenciais temporárias; em produção, a orientação é adicionar desde o início autenticação, HTTPS, restrições de CORS e rate limiting.

O que isso significa

A AWS leva os agentes de IA que operam navegadores do modo de automação em segundo plano para uma interface observável, em que fica mais fácil confiar no sistema e intervir a tempo. Para equipes que constroem produtos com agentes em React, isso reduz a barreira de entrada: dá para pegar um componente pronto, conectar o navegador em nuvem e montar rapidamente uma experiência em que as ações do modelo ficam visíveis não só para o desenvolvedor, mas também para o usuário final.