Amazon Bedrock AgentCore Browser: o que é e para quem serve
\n
A AWS lançou o Amazon Bedrock AgentCore Browser, um recurso que permite incorporar um agente de inteligência artificial (IA) navegando em tempo real dentro de aplicações React. Essa novidade é especialmente útil para desenvolvedores que querem criar experiências transparentes e confiáveis, em que o usuário acompanha visualmente as ações do agente de IA, como navegação, preenchimento de formulários e interações em páginas web.
\n
O componente principal dessa solução é o BrowserLiveView, parte do SDK TypeScript da Bedrock AgentCore, que integra um fluxo de vídeo ao vivo da sessão do agente diretamente no frontend React com apenas três linhas de código JSX. A transmissão utiliza o protocolo Amazon DCV, garantindo baixa latência e alta qualidade, sem a necessidade de infraestrutura própria para streaming.
\n\n
Benefícios práticos do Live View embutido
\n
- \n
- Transparência e confiança: Usuários veem em tempo real o que o agente está fazendo, aumentando a confiança nas ações automatizadas.
- Supervisão e auditoria: Supervisores podem monitorar fluxos sensíveis, intervindo se necessário, e a visualização serve como evidência para conformidade regulatória.
- Feedback imediato: Ao acompanhar cada passo, o usuário não precisa esperar o resultado final para saber se o agente está operando corretamente.
- Escalabilidade: Pode ser integrado em dashboards e sistemas com múltiplas sessões simultâneas, facilitando o monitoramento em larga escala.
\n
\n
\n
\n
\n\n
Como funciona a arquitetura da solução
\n
A arquitetura envolve três componentes principais:
\n
- \n
- Aplicação React no navegador do usuário: Renderiza o componente
BrowserLiveView, que estabelece uma conexão WebSocket para receber a transmissão do agente via protocolo DCV. - Servidor da aplicação: Atua como agente de IA, gerenciando sessões com a API Amazon Bedrock AgentCore, criando URLs pré-assinados para acesso seguro e temporário ao stream e orquestrando as ações do agente.
- Serviços AWS: Hospedam o navegador isolado e a infraestrutura de streaming, enviando o vídeo diretamente ao cliente, minimizando latência e carga do servidor da aplicação.
\n
\n
\n
\n
Essa arquitetura permite que o vídeo do agente seja transmitido diretamente da AWS para o navegador do usuário, sem passar pelo servidor da aplicação, o que reduz custos e complexidade.
\n\n
Pré-requisitos para usar o Amazon Bedrock AgentCore Browser
\n
- \n
- Node.js 20 ou superior instalado
- Conta AWS em uma região suportada
- Credenciais AWS com permissões específicas para o Amazon Bedrock AgentCore Browser
- Acesso a um modelo de IA para controlar o agente (a AWS usa o Amazon Bedrock Converse API com Anthropic Claude, mas o recurso é agnóstico a modelos)
- Uso recomendado de credenciais temporárias via AWS IAM Identity Center ou AWS STS, evitando chaves de acesso permanentes
- Instalação do SDK TypeScript do Amazon Bedrock AgentCore (
npm install bedrock-agentcore) e, para o agente IA, do AWS SDK para JavaScript (npm install @aws-sdk/client-bedrock-runtime)
\n
\n
\n
\n
\n
\n
\n\n
Passo a passo para implementar o Live View em React
\n
1. Iniciar sessão e gerar URL pré-assinado
\n
No backend, use a classe Browser do SDK para criar uma sessão do navegador e gerar uma URL de Live View com credenciais SigV4 temporárias. Essa URL será enviada ao frontend via API.
\n
import { Browser } from 'bedrock-agentcore/browser'\n\nconst browser = new Browser({ region: 'us-west-2' })\nawait browser.startSession({ viewport: { width: 1920, height: 1080 } })\nconst signedUrl = await browser.generateLiveViewUrl()\n// Envie signedUrl para o frontend\n\n\n
2. Renderizar o componente BrowserLiveView no React
\n
No frontend, importe o componente e renderize-o passando a URL pré-assinada e as dimensões do viewport configurado no backend. O componente gerencia a conexão WebSocket e a decodificação do vídeo.
\n
import { BrowserLiveView } from 'bedrock-agentcore/browser/live-view'\n\n<BrowserLiveView signedUrl={signedUrl} remoteWidth={1920} remoteHeight={1080} />\n\n\n
3. Conectar um agente IA para controlar o navegador
\n
Para tornar a visualização interessante, conecte um agente de IA que execute ações no navegador via protocolo Playwright Chrome DevTools. O exemplo da AWS usa o Amazon Bedrock Converse API para decidir as operações, como navegar, clicar e digitar, com todas as ações visíveis na Live View.
\n
import { BedrockRuntimeClient, ConverseCommand } from '@aws-sdk/client-bedrock-runtime'\nimport { PlaywrightBrowser } from 'bedrock-agentcore/browser/playwright'\n\nconst browser = new PlaywrightBrowser({ region: 'us-west-2' })\nawait browser.startSession()\n\nwhile (step < maxSteps) {\n const response = await bedrockClient.send(new ConverseCommand({\n modelId: modelId,\n system: [{ text: systemPrompt }],\n messages,\n toolConfig: browserTools,\n }))\n\n if (response.stopReason === 'tool_use') {\n // Execute ação no navegador e atualize conversa\n } else {\n break // Resposta final do modelo\n }\n}\n\n\n
Exemplo prático: aplicação demo no GitHub
\n
A AWS disponibiliza um exemplo completo no GitHub que integra os três passos, com um dashboard React exibindo a Live View, um log de atividades do agente e um servidor Fastify executando o agente IA. O agente navega na Wikipédia, realiza buscas e resume conteúdos enquanto o usuário assiste.
\n
Para testar, siga os comandos:
\n
git clone https://github.com/awslabs/bedrock-agentcore-samples-typescript.git\ncd bedrock-agentcore-samples-typescript/use-cases/browser-live-view-agent\nnpm install\n\nexport AWS_ACCESS_KEY_ID=<sua-chave>\nexport AWS_SECRET_ACCESS_KEY=<sua-chave-secreta>\nexport AWS_SESSION_TOKEN=<seu-token>\nexport AWS_REGION=us-west-2\n\nnpm run dev\n\n
Abra http://localhost:5173 no navegador, digite um prompt e clique em Launch Agent para ver o agente em ação.
\n\n
Considerações sobre segurança e custos
\n
- \n
- Use credenciais temporárias e aplique o princípio do menor privilégio nas permissões IAM.
- Finalize sessões e desligue o servidor ao terminar para evitar cobranças desnecessárias.
- Consulte a página oficial de preços do Amazon Bedrock AgentCore para detalhes sobre custos.
- Para produção, implemente autenticação, HTTPS, controle de CORS e limitação de taxa para maior segurança.
\n
\n
\n
\n
\n\n
Links úteis para aprofundamento
\n
