Por que incorporar Live View em sua aplicação
Quando você constrói aplicações com IA, uma questão fundamental emerge: como seus usuários podem confiar em agentes que navegam de forma autônoma pela web? Quando um agente interage com conteúdo web por conta própria, os usuários precisam enxergar o que está acontecendo para manter controle e confiança — capacidades que hoje faltam na maioria das implementações.
A Amazon Bedrock AgentCore Browser agora oferece uma solução para esse desafio através do componente BrowserLiveView. Este componente fornece um feed de vídeo em tempo real da sessão de navegação do agente diretamente dentro de sua aplicação React. Trata-se de um recurso que faz parte do Bedrock AgentCore TypeScript SDK, permitindo que você integre um stream de browser ao vivo com apenas três linhas de código.
O componente BrowserLiveView utiliza o protocolo Amazon DCV para renderizar a sessão do browser, criando transparência completa das ações do agente. A implementação requer apenas uma URL pré-assinada do seu servidor, sem necessidade de construir infraestrutura de streaming do zero.
Incorporar o Live View dentro de sua própria aplicação desbloqueia valor adicional para seus usuários em escala. Com o Live View embutido, seus usuários acompanham cada navegação, cada envio de formulário e cada busca conforme o agente as realiza. Eles recebem confirmação visual imediata de que o agente está na página correta, interagindo com os elementos apropriados e avançando pelo fluxo de trabalho.
Essa retroalimentação em tempo real oferece aos usuários finais visibilidade direta do comportamento do agente sem ter que esperar pelo resultado final. Usuários que delegam tarefas de navegação para um agente de IA sentem-se mais seguros quando conseguem observar o trabalho acontecendo. Observar o agente preenchendo um formulário campo por campo é mais tranquilizador do que receber apenas uma confirmação textual.
Para fluxos de trabalho regulamentados, a evidência visual das ações do agente pode atender a requisitos de auditoria. Em workflows que exigem supervisão humana — como lidar com contas de clientes e processar dados sensíveis — um supervisor pode utilizar o Live View embutido para observar o agente em tempo real e intervir se necessário, tudo sem sair de sua aplicação.
As organizações também ganham suporte a trilhas de auditoria através de evidência visual das ações do agente, valor essencial para conformidade regulatória e cenários de troubleshooting. Combinada com gravações de sessão para Amazon Simple Storage Service (Amazon S3) e replay de sessão baseado em console, você obtém tanto observação em tempo real quanto revisão posterior.
Como funciona a arquitetura
A integração possui três componentes principais:
No browser do usuário: Uma aplicação React contém o componente BrowserLiveView, que recebe uma URL pré-assinada com credenciais SigV4 e estabelece uma conexão WebSocket persistente para receber o stream de vídeo DCV da sessão de browser remoto. A aplicação React gerencia a renderização de vídeo e apresentação da interface enquanto mantém a conexão WebSocket para streaming contínuo.
No servidor de aplicação: Funciona como um agente de IA dentro do ciclo de vida da sessão Amazon Bedrock, orquestrando a conexão entre browsers do cliente e sessões de browser hospedadas na nuvem. Ele inicia sessões usando a API Amazon Bedrock AgentCore e gera URLs pré-assinadas com SigV4 que concedem acesso seguro e limitado no tempo ao stream Live View. Esta camada gerencia autenticação, autenticação e distribuição de stream.
Na nuvem AWS: Hospeda Amazon Bedrock AgentCore Browser e serviços Amazon Bedrock que fornecem as capacidades subjacentes de automação de browser e streaming. O Amazon Bedrock AgentCore hospeda as sessões de browser isoladas dentro da nuvem AWS, oferecendo tanto o endpoint de automação (usando o Playwright Chrome DevTools Protocol) quanto o endpoint de streaming Live View (DCV).
A vantagem de eficiência-chave nesta arquitetura é que o stream Live View DCV flui diretamente de Amazon Bedrock AgentCore para o browser do usuário. Ele não passa pelo seu servidor de aplicação. Seu servidor gera a URL e executa o agente, mas o stream de vídeo é uma conexão WebSocket direta da AWS para o cliente. Isso ajuda a minimizar latência e reduzir requisitos de infraestrutura.
Implementação passo a passo
Pré-requisitos
Antes de começar, verifique se você possui:
- Node.js 20 ou posterior
- Uma conta AWS em uma região AWS suportada
- Credenciais AWS com permissões Amazon Bedrock AgentCore Browser
- Acesso a um modelo de IA para dirigir o agente (este artigo usa a Amazon Bedrock Converse API com Anthropic Claude, mas Live View é agnóstico a modelo e você pode usar qualquer provedor ou framework de sua escolha)
Observação importante: Live View (Passos 1 e 2) requer apenas permissões Amazon Bedrock AgentCore. Ele não depende de Amazon Bedrock ou nenhum modelo de IA específico. O agente de IA no Passo 3 usa a Amazon Bedrock Converse API, que requer permissões adicionais de Amazon Bedrock, mas isto é específico ao nosso exemplo. Você pode substituir por um provedor de modelo ou framework de agente de sua escolha.
Use credenciais temporárias do AWS IAM Identity Center ou AWS Security Token Service (AWS STS). Não use chaves de acesso de longa duração. Siga o princípio do menor privilégio ao configurar permissões AWS Identity and Access Management (IAM).
Instale o Amazon Bedrock AgentCore TypeScript SDK:
npm install bedrock-agentcorePara o agente de IA no Passo 3, você também precisa do AWS SDK para JavaScript:
npm install @aws-sdk/client-bedrock-runtimeO código neste artigo executa em dois ambientes: código servidor (Passos 1 e 3) executa em Node.js, e código cliente (Passo 2) executa em uma aplicação React empacotada com Vite.
Passo 1: Inicie uma sessão de browser e gere a URL Live View
No seu servidor de aplicação, use a classe Browser para iniciar uma sessão e gerar a URL pré-assinada. A API retorna um identificador de sessão e URL de streaming, que o servidor converte em uma URL pré-assinada com tempo de expiração definido (300 segundos por padrão). Ela contém credenciais SigV4 nos parâmetros de query, portanto nenhum segredo atinge o browser. Passe esta URL para seu frontend através de um endpoint de API.
import { Browser } from 'bedrock-agentcore/browser'
const browser = new Browser({ region: 'us-west-2' })
await browser.startSession({ viewport: { width: 1920, height: 1080 } })
const signedUrl = await browser.generateLiveViewUrl()
// Send signedUrl to your frontend via APIPasso 2: Renderize o componente BrowserLiveView em sua aplicação React
No seu browser, importe o componente BrowserLiveView do Bedrock AgentCore TypeScript SDK e renderize-o com a URL pré-assinada. O componente gerencia conexão WebSocket, negociação do protocolo DCV, decodificação do stream de vídeo e renderização de frames. Ele se adapta automaticamente para caber em seu container pai enquanto preserva a proporção de aspecto. Os valores remoteWidth e remoteHeight devem corresponder ao viewport definido no Passo 1. Valores incompatíveis causam corte ou barras pretas.
import { BrowserLiveView } from 'bedrock-agentcore/browser/live-view'
Após adicionar este componente, o Live View começa a fazer streaming assim que a URL pré-assinada é válida e a sessão de browser está ativa. Você deve ver o desktop do browser remoto aparecer dentro do container do componente. Se o container permanecer vazio, verifique se a URL pré-assinada não expirou e se a sessão de browser ainda está em execução.
Passo 3: Conecte um agente de IA para dirigir as ações do browser
Com o Live View já fazendo streaming, você precisa de algo interessante para observar. O exemplo a seguir usa a Amazon Bedrock Converse API, mas Live View é agnóstico a modelo. Você pode usar um modelo de IA ou framework de agente de sua escolha para dirigir o browser. O código cria um cliente PlaywrightBrowser, que inicia uma nova sessão AgentCore Browser e se conecta a ela usando o protocolo Playwright Chrome DevTools. Trata-se do mesmo tipo de sessão de browser em nuvem do Passo 1, mas acessado através da interface de automação Playwright em vez da interface Live View. O modelo decide quais ferramentas de browser chamar, incluindo navigate, click, type, getText, getHtml e pressKey. Seu servidor executa essas ferramentas e alimenta os resultados de volta ao modelo para a próxima iteração.
import { BedrockRuntimeClient, ConverseCommand } from '@aws-sdk/client-bedrock-runtime'
import { PlaywrightBrowser } from 'bedrock-agentcore/browser/playwright'
const browser = new PlaywrightBrowser({ region: 'us-west-2' })
await browser.startSession()
// Define browser tools as JSON Schema
// (navigate, click, type, getText, and more)
while (step < maxSteps) {
const response = await bedrockClient.send(
new ConverseCommand({
modelId: modelId,
system: [{ text: systemPrompt }],
messages,
toolConfig: browserTools,
})
)
if (response.stopReason === 'tool_use') {
// Run browser tool, add result
// to conversation, continue loop
} else {
break // Final answer from model
}
}O modelo é configurável. Você pode usar Anthropic Claude, Amazon Nova ou outro modelo Amazon Bedrock que suporte uso de ferramentas. Cada chamada de ferramenta que o modelo faz fica visível ao seu usuário através do Live View. Ele vê o browser navegar, a caixa de busca preencher e a página de resultados carregar.
Observação: O TypeScript SDK também inclui uma integração Vercel AI SDK (BrowserTools) que envolve essas operações de browser como ferramentas nativas do framework.
Testando com a aplicação de exemplo
A AWS construiu uma aplicação de exemplo completa no GitHub que integra os Passos 1–3. A amostra inclui um dashboard React com o Live View embutido, um log de atividades mostrando raciocínio e ações do agente, e um servidor Fastify executando o agente de IA. O agente navega para Wikipedia, busca um tópico, lê o conteúdo da página e resume o que encontra enquanto você observa cada passo.
Clonando e executando a aplicação de exemplo
Siga os passos abaixo para clonar e executar a aplicação de exemplo:
Etapa 1: Clone o repositório e navegue para a pasta de exemplo.
git clone https://github.com/awslabs/bedrock-agentcore-samples-typescript.git
cd bedrock-agentcore-samples-typescript
cd use-cases/browser-live-view-agentEtapa 2: Instale as dependências.
npm installEtapa 3: Exporte suas credenciais AWS.
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=
export AWS_SESSION_TOKEN=
export AWS_REGION=us-west-2 Importante: Use credenciais temporárias. Não faça commit de credenciais no controle de versão.
Etapa 4: Inicie a aplicação.
npm run devEtapa 5: Abra http://localhost:5173, digite um prompt e escolha Launch Agent.
Configuração do bundler
O componente BrowserLiveView utiliza o Amazon DCV Web Client SDK, que distribui arquivos vendored dentro do pacote npm bedrock-agentcore. Você não precisa baixar ou instalar DCV separadamente. Sua configuração Vite precisa de três adições:
- resolve.alias aponta os identificadores bare dcv e dcv-ui para os arquivos SDK vendored.
- resolve.dedupe verifica que React e dependências compartilhadas são resolvidas de seu node_modules, não do caminho vendored.
- viteStaticCopy copia os arquivos de runtime DCV (workers, decodificadores WASM) para sua saída de build.
O arquivo vite.config.ts da aplicação de exemplo possui a configuração completa pronta para usar. Para mais detalhes sobre o componente BrowserLiveView, consulte a pasta source live-view no TypeScript SDK.
Limpando recursos
Para evitar incorrer em cobranças, pare a sessão de browser e desligue a aplicação quando terminar:
- Na interface da aplicação, escolha Stop Session para encerrar a sessão Amazon Bedrock AgentCore Browser.
- No seu terminal, pressione Ctrl+C para parar os servidores de desenvolvimento.
- Se você criou funções ou políticas IAM especificamente para esta demonstração, delete-as do console IAM.
As sessões Amazon Bedrock AgentCore Browser incorrem em cobranças enquanto ativas. Para detalhes de preços, consulte a página de preços Amazon Bedrock AgentCore.
Próximos passos
Agora que você tem uma integração Live View funcional, aqui estão algumas coisas para explorar.
Para começar, clone a aplicação de exemplo, preencha suas credenciais AWS e execute npm run dev para ver a demonstração completa em ação. Para instruções, consulte a seção Como clonar e executar a aplicação de exemplo neste artigo.
A aplicação de exemplo usa Anthropic Claude por padrão, mas você pode trocar para Amazon Nova ou outro modelo Amazon Bedrock que suporte uso de ferramentas definindo a variável de ambiente BEDROCK_MODEL_ID. Para uma lista de modelos disponíveis e suas capacidades de uso de ferramentas, consulte a documentação de modelos Amazon Bedrock.
O dashboard React na aplicação de exemplo é um ponto de partida para sua própria implementação. Você pode adaptar o layout para corresponder ao seu sistema de design, integrar o Live View em uma aplicação existente ou adicionar controles que permitam aos usuários intervir no meio do fluxo de trabalho. Para orientação sobre construção de aplicações React com o AgentCore SDK, consulte a documentação do Bedrock AgentCore TypeScript SDK.
O componente BrowserLiveView suporta múltiplas instâncias na mesma página, cada uma fazendo streaming de uma sessão de browser diferente. Esta capacidade é útil para dashboards de monitoramento. O código-fonte do componente, incluindo lógica de scaling e fluxo de autenticação DCV, está disponível na pasta source live-view no TypeScript SDK.
Conclusão
Neste artigo, você aprendeu como usar o componente BrowserLiveView para incorporar uma visualização ao vivo de uma sessão Amazon Bedrock AgentCore Browser dentro de sua aplicação React. A implementação em três passos e a arquitetura que transmite vídeo diretamente da AWS para browsers do cliente tornam a visualização de agentes ao vivo acessível sem necessidade de expertise em streaming especializado.
Para uma análise mais profunda das capacidades de Amazon Bedrock AgentCore Browser, consulte a documentação Amazon Bedrock AgentCore Browser. Se tiver feedback ou perguntas, abra uma issue no repositório GitHub.
Importante: Esta aplicação de exemplo destina-se a desenvolvimento local e demonstração. Para uso em produção, adicione autenticação aos seus endpoints de API, habilite HTTPS, restrinja origens CORS, implemente rate limiting e siga o pilar de segurança da AWS Well-Architected Framework.
Fonte
Embed a live AI browser agent in your React app with Amazon Bedrock AgentCore (https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/)
Leave a Reply