Como incorporar um agente de IA ao vivo no navegador em apps React com Amazon Bedrock AgentCore

Amazon Bedrock AgentCore Browser: o que é e para quem serve

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.

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.

Benefícios práticos do Live View embutido

• 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.

Como funciona a arquitetura da solução

A arquitetura envolve três componentes principais:

1. 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.
2. 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.
3. 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.

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.

Pré-requisitos para usar o Amazon Bedrock AgentCore Browser

• 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)

Passo a passo para implementar o Live View em React

1. Iniciar sessão e gerar URL pré-assinado

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.

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()
// Envie signedUrl para o frontend

2. Renderizar o componente BrowserLiveView no React

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.

import { BrowserLiveView } from 'bedrock-agentcore/browser/live-view'

<BrowserLiveView signedUrl={signedUrl} remoteWidth={1920} remoteHeight={1080} />

3. Conectar um agente IA para controlar o navegador

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.

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()

while (step < maxSteps) {
  const response = await bedrockClient.send(new ConverseCommand({
    modelId: modelId,
    system: [{ text: systemPrompt }],
    messages,
    toolConfig: browserTools,
  }))

  if (response.stopReason === 'tool_use') {
    // Execute ação no navegador e atualize conversa
  } else {
    break // Resposta final do modelo
  }
}

Exemplo prático: aplicação demo no GitHub

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.

Para testar, siga os comandos:

git clone https://github.com/awslabs/bedrock-agentcore-samples-typescript.git
cd bedrock-agentcore-samples-typescript/use-cases/browser-live-view-agent
npm install

export AWS_ACCESS_KEY_ID=<sua-chave>
export AWS_SECRET_ACCESS_KEY=<sua-chave-secreta>
export AWS_SESSION_TOKEN=<seu-token>
export AWS_REGION=us-west-2

npm run dev

Abra http://localhost:5173 no navegador, digite um prompt e clique em Launch Agent para ver o agente em ação.

Considerações sobre segurança e custos

• 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.

Links úteis para aprofundamento

• Repositório GitHub com exemplos
• Documentação do Amazon Bedrock AgentCore Browser
• Amazon Bedrock Converse API
• Guia rápido do AgentCore Browser
• Regiões AWS suportadas
• Página de preços do Amazon Bedrock AgentCore