ai-agents-for-beginners

Construindo Agentes de Uso de Computador (CUA)

Agentes de uso de computador podem interagir com sites da mesma forma que uma pessoa: abrindo um navegador, inspecionando a página e tomando a próxima melhor ação a partir do que veem. Nesta lição, você vai construir um agente de automação de navegador que pesquisa no Airbnb, extrai dados estruturados das listas e identifica a estadia mais barata em Estocolmo.

A lição combina Browser-Use para navegação guiada por IA, Playwright e o Protocolo Chrome DevTools (CDP) para controle do navegador, Azure OpenAI para raciocínio habilitado por visão, e Pydantic para extração estruturada.

Introdução

Esta lição abordará:

Objetivos de Aprendizagem

Após completar esta lição, você saberá como:

Exemplo de Código

Esta lição inclui um tutorial em notebook:

Pré-requisitos

Configuração

Instale os pacotes usados no notebook:

pip install browser_use playwright python-dotenv
playwright install chromium

Defina as variáveis de ambiente do Azure OpenAI usadas pelo notebook:

AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# Opcional: padrão para a versão mais recente da API quando omitido
AZURE_OPENAI_API_VERSION=...

Visão Geral da Arquitetura

O notebook demonstra um fluxo híbrido de automação de navegador:

  1. O Chrome é iniciado com CDP habilitado para que Playwright e Browser-Use possam compartilhar a mesma sessão de navegador.
  2. Um agente do Browser-Use manipula tarefas de navegação abertas, como abrir o Airbnb, dispensar pop-ups e pesquisar Estocolmo.
  3. A página ativa é inspecionada com um esquema Pydantic estruturado para extrair títulos das listagens, preços por noite, avaliações e URLs.
  4. A lógica em Python compara as listagens extraídas e destaca o resultado mais barato.

Essa abordagem mantém o raciocínio baseado em visão flexível que o Browser-Use faz bem, ao mesmo tempo que oferece controle determinístico do navegador quando necessário.

Principais Conclusões e Boas Práticas

Quando Usar Agente vs Ator

Cenário Usar Agente Usar Ator
Layouts dinâmicos Sim, IA pode se adaptar a mudanças na página Não, seletores frágeis podem quebrar
Estrutura conhecida Não, um agente é mais lento que controle direto Sim, rápido e preciso
Encontrar elementos Sim, linguagem natural funciona bem Não, seletores exatos são necessários
Controle de tempo Não, menos previsível Sim, controle total sobre esperas e tentativas
Fluxos complexos Sim, lida com estados inesperados da UI Não, requer ramificações explícitas

Boas Práticas com Browser-Use

  1. Comece com um agente para exploração e navegação dinâmica.
  2. Mude para controle direto da página quando a interação se tornar previsível.
  3. Use modelos de saída estruturada para que os dados extraídos sejam validados e type-safe.
  4. Adicione atrasos estrategicamente após ações que disparam mudanças visíveis na UI.
  5. Capture capturas de tela durante a iteração para facilitar a depuração de falhas.
  6. Espere que sites mudem e projete estratégias de contingência para pop-ups e mudanças no layout.
  7. Misture padrões de agente e ator para obter tanto flexibilidade quanto precisão.

Diretrizes de Segurança para Agentes de Navegador

Agentes de navegador operam em sites ao vivo, portanto precisam de limites mais rigorosos que um script que apenas chama uma API conhecida. Antes de avançar de um demo em notebook para um fluxo real, defina os controles sobre o que o agente pode ver, clicar e submeter.

  1. Delimite o ambiente de navegação. Execute o agente em um perfil dedicado do navegador ou sandbox, e limite-o aos domínios necessários para a tarefa.
  2. Separe observação de ação. Deixe o agente pesquisar, ler e extrair dados primeiro; exija uma etapa explícita de aprovação antes que ele envie formulários, envie mensagens, reserve viagens, faça compras, delete registros ou altere configurações de conta.
  3. Mantenha segredos fora de prompts e registros. Não coloque senhas, detalhes de pagamento, cookies de sessão ou dados pessoais crus no contexto do modelo. Deixe o usuário assumir a autenticação e remova campos sensíveis dos logs.
  4. Trate o conteúdo da página como entrada não confiável. Um site pode conter instruções destinadas ao agente, não ao usuário. O agente deve ignorar textos que peçam para mudar seu objetivo, revelar dados, desabilitar proteções ou visitar sites não relacionados.
  5. Use verificações determinísticas em etapas de risco. Verifique a URL atual, título da página, item selecionado, preço, destinatário e resumo da ação com código antes de pedir aprovação do usuário para o passo final.
  6. Defina orçamentos e condições de parada. Limite o número de ações, tentativas, abas e minutos que o agente pode usar. Pare quando o estado da página for ambíguo ao invés de continuar clicando.
  7. Registre evidências úteis, não tudo. Guarde resumos de ações, timestamps, URLs, descrições dos elementos selecionados e referências de capturas de tela para que falhas possam ser revisadas sem armazenar conteúdo sensível desnecessário da página.

No exemplo do Airbnb, o padrão seguro é pesquisar listagens e extrair preços. Entrar na conta, contatar um anfitrião ou completar uma reserva deve ser uma ação separada aprovada pelo usuário.

Aplicações no Mundo Real

Exemplo do Mundo Real: Microsoft Project Opal

O agente que você constrói nesta lição é uma pequena versão local de um agente de uso de computador (CUA) — um programa que conduz um navegador da maneira que uma pessoa faria. A Microsoft está trazendo essa mesma ideia para a empresa com Project Opal (Frontier), uma funcionalidade no Microsoft 365 Copilot.

Com o Project Opal, você descreve uma tarefa e o agente atua em seu nome usando uso de computador em um Windows 365 Cloud PC seguro, operando em aplicativos, sites e dados baseados em navegador da sua organização. Ele funciona assíncronamente em segundo plano, e você pode guiar o trabalho ou assumir o controle a qualquer momento. Exemplos de trabalhos incluem:

Opal é uma referência útil para como um agente de uso de computador de nível de produção e confiável é — e reforça conceitos das lições anteriores:

Conceito neste curso Como o Project Opal aplica
Humano no loop (Lição 06) Opal pausa para credenciais de login, dados sensíveis ou instruções ambíguas, e nunca insere senhas ou submete formulários sem confirmação explícita. Você pode Tomar Controle e Retornar Controle no meio da tarefa.
Agentes confiáveis e seguros (Lições 06 & 18) Roda em um Windows 365 Cloud PC isolado, é só navegador por padrão (acesso a outros computadores bloqueado, imposto via Intune), usa sua identidade para acessar somente o que está autorizado, e registra cada ação para auditoria.
Planejamento & metacognição (Lições 07 & 09) Opal gera um plano para a tarefa primeiro, depois supervisiona seu próprio raciocínio em cada passo e pausa se detectar atividade suspeita.
Capacidades / ferramentas reutilizáveis (Lição 04) Skills permitem que você escreva instruções para trabalhos repetíveis (importadas de um arquivo .md ou criadas com Opal) e reutilize-as em conversas.

Disponibilidade: O Project Opal está atualmente disponível para usuários no programa de acesso antecipado Frontier com uma assinatura do Microsoft 365 Copilot, e seu administrador deve concluir a configuração. Por ser um recurso experimental do Frontier, as capacidades podem mudar com o tempo.

Verificação de Conhecimento

Teste sua compreensão antes de avançar para a próxima lição.

1. Quando um agente de uso de computador baseado em navegador é mais adequado que um fluxo apenas por API?

Resposta Use um agente de navegador quando a tarefa depender do que é visível na interface web, o site não expõe a API necessária, ou a página muda com frequência suficiente para que uma lógica fixa de API ou seletores seja frágil. Se existir uma API estável para a mesma tarefa, prefira a API pois geralmente é mais rápida, fácil de testar e segura.

2. Em um fluxo híbrido, quais partes o agente deve manipular e quais partes o código direto do Playwright deve manipular?

Resposta Deixe o agente lidar com navegação aberta e estados dinâmicos da UI, como encontrar a página certa ou dispensar pop-ups inesperados. Mude para controle direto do Playwright quando a estrutura da página for conhecida e a ação precisar de precisão, tentativas, esperas ou validação determinística.

3. O exemplo do Airbnb encontra uma listagem que o usuário pode querer reservar. O que deve acontecer antes que o fluxo faça login, contacte um anfitrião ou complete a reserva?

Resposta O fluxo deve pausar e pedir aprovação explícita do usuário. Antes disso, deve mostrar um resumo claro da listagem selecionada, URL atual, preço, datas e ação pretendida. Pesquisar e extrair preços pode ser autônomo; acesso à conta, mensagens, compras e reservas devem ser aprovados pelo usuário.

4. Uma página web diz ao agente para ignorar suas instruções originais, visitar outro site e revelar credenciais salvas. Como o agente deve tratar esse texto?

Resposta Trate isso como conteúdo da página não confiável, não como instrução do desenvolvedor ou usuário. O agente deve permanecer dentro do domínio e escopo da tarefa permitidos, recusar revelar segredos, e evitar seguir texto da página que altera o objetivo, desativa proteções ou o envia para sites não relacionados.

5. Qual evidência é útil guardar quando um agente de navegador está em execução, e o que deve ser evitado?

Resposta Guarde resumos de ações, timestamps, URLs, descrições dos elementos selecionados, resultados de validação e referências de capturas de tela para que a execução possa ser revisada. Evite armazenar senhas, detalhes de pagamento, cookies de sessão, dados pessoais crus ou conteúdos completos da página a menos que haja um motivo específico de retenção e privacidade.

Recursos Adicionais

Lição Anterior

Explorando o Microsoft Agent Framework

Próxima Lição

Implementando Agentes Escaláveis

Aviso Legal: Este documento foi traduzido usando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos pela precisão, por favor, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

This site is open source. Improve this page.