Construa um Agente de Navegação com IA Usando LLMs, Playwright e Navegador

O Uso do Navegador é uma ferramenta ou plataforma projetada para permitir que agentes de IA (como os modelos GPT da OpenAI ou outros grandes modelos de linguagem) interajam com e controlem navegadores da web de maneira inteligente e automatizada. Ele essencialmente fecha a lacuna entre as capacidades da IA e as interações reais de navegação, tornando possível que sistemas de IA realizem tarefas como navegar em sites, extrair dados, preencher formulários, clicar em botões e mais — assim como um usuário humano faria.

O objetivo principal do Uso do Navegador é tornar os sites acessíveis e acionáveis para agentes de IA, abstraindo as complexidades da automação do navegador. Em vez de exigir que os desenvolvedores escrevam scripts intrincados para localizar e interagir com elementos de páginas da web, o Uso do Navegador simplifica esse processo extraindo todos os elementos interativos (como botões, campos de entrada, links, etc.) e fornecendo uma interface estruturada para os agentes de IA interagirem.

Principais Características do Uso do Navegador

Automação Orientada por IA

O Uso do Navegador aproveita a IA para entender e interagir com páginas da web. Por exemplo, pode analisar o conteúdo de uma página da web, identificar ações relevantes (como clicar em um botão ou preencher um formulário) e executar essas ações de forma autônoma.

Visão + Extração de HTML

Combina compreensão visual (reconhecendo elementos na tela) com extração da estrutura HTML (analisando o código subjacente de uma página da web). Essa abordagem dupla garante que os agentes de IA possam interagir tanto com elementos web estáticos quanto dinâmicos, mesmo que não tenham identificadores claros como IDs ou classes.

Gerenciamento de Múltiplas Abas

O uso do navegador pode lidar com várias abas do navegador simultaneamente, permitindo que agentes de IA realizem fluxos de trabalho complexos que envolvem interagir com várias páginas da web ao mesmo tempo.

A ferramenta rastreia as ações exatas realizadas pelo agente de IA (por exemplo, clicar em um botão ou preencher um formulário) e pode replicar essas ações de forma consistente, mesmo que o layout do site mude ligeiramente. Isso é particularmente útil para criar testes autoconsertáveis na automação de QA.

Ações Personalizadas

Os usuários podem estender o uso do navegador adicionando ações personalizadas, como salvar dados em arquivos, realizar operações de banco de dados, enviar notificações ou lidar com a entrada humana durante etapas específicas do processo de automação.

Auto-Correção

O uso do navegador inclui manuseio inteligente de erros e mecanismos automáticos de recuperação. Se algo der errado durante a automação (por exemplo, um elemento ausente ou um tempo limite de rede), a ferramenta pode detectar o problema e tentar se recuperar automaticamente, garantindo que os fluxos de trabalho continuem sem interrupções.

Compatibilidade com Vários LLMs

O uso do navegador suporta vários modelos de linguagem de grande porte (LLMs), incluindo o GPT-4 da OpenAI, Claude da Anthropic e Llama 2 da Meta. Essa flexibilidade permite que os usuários escolham o melhor modelo de IA para suas necessidades específicas.

Como o uso do navegador funciona

O Browser Use analisa uma página da web e extrai todos os elementos interativos (botões, campos de entrada, links, formulários, etc.). Em seguida, fornece uma representação estruturada desses elementos que os agentes de IA podem entender e interagir.

Interação de IA

Uma vez que os elementos interativos são identificados, os agentes de IA podem realizar ações como clicar em botões, preencher formulários, navegar entre páginas ou extrair dados. O agente de IA também pode analisar o conteúdo da página da web e tomar decisões com base nas informações encontradas.

Fluxos de Automação

O Browser Use permite aos usuários criar fluxos de automação complexos. Por exemplo, um agente de IA poderia navegar por um site de e-commerce, adicionar itens a um carrinho de compras e concluir uma compra – tudo sem intervenção humana.

Tratamento de Erros e Recuperação

Se algo der errado durante o processo de automação (por exemplo, um elemento ausente ou uma página de carregamento lento), o Browser Use pode detectar o problema e tentar se recuperar automaticamente. Isso garante que os fluxos de trabalho continuem suavemente, mesmo em ambientes imprevisíveis.

Guia de Instalação

Começar com o Browser Use é simples, mas requer alguma configuração inicial para garantir que tudo funcione sem problemas. Abaixo está um guia de instalação detalhado com base nos pré-requisitos e etapas que você forneceu. Este guia irá orientá-lo na configuração do Browser Use localmente em sua máquina.

Pré-requisitos

Antes de começar, certifique-se de que seu sistema atenda aos seguintes requisitos:

• Python 3.11 ou superior. Você pode verificar sua versão do Python executando o comando:
  Python

   

  python --versão
• Git. O Git é necessário para clonar o repositório

Instalação Local

Passo 1: Clone o Repositório

git clone https://github.com/browser-use/web-ui.git

cd web-ui

Passo 2: Configure o Ambiente Python

Recomendamos o uso do uv para gerenciar o ambiente Python (recomendado para Mac):

curl -LsSf https://astral.sh/uv/install.sh | sh

uv venv -- python 3.11

2. Activate the virtual environment.

• Windows (prompt de comando):
  Shell

  .venv\Scripts\activate
• macOS/Linux:
  Shell

  source .venv/bin/activate

Uma vez ativado, você deve ver .venv no prompt do terminal, indicando que o ambiente virtual está ativo.

Passo 3: Instalar Dependências

Agora que o seu ambiente está configurado, é hora de instalar as dependências necessárias.

Instalar pacotes Python. Use o seguinte comando para instalar os pacotes Python necessários listados no arquivo requirements.txt:

uv pip install -r requirements.txt

Playwright é uma biblioteca de automação de navegador usada pelo Browser Use.

Para instalá-lo, execute o comando:

playwright install

Guia de Configuração Local para o WebUI do Browser Use

Depois de concluir as etapas de instalação para o Browser Use, você pode começar a executar o WebUI localmente. Este guia irá orientá-lo sobre como iniciar a aplicação, personalizar suas configurações e configurá-la para usar seu próprio navegador, se necessário.

Executando o WebUI

Após completar as etapas de instalação, você pode iniciar o Browser Use WebUI executando o seguinte comando:

python webui.py --ip 127.0.0.1 --port 7788

O WebUI oferece várias opções para personalizar seu comportamento. Aqui está uma explicação das flags disponíveis:

• --ip– o endereço IP para vincular o WebUI
  • Padrão – 127.0.0.1 (localhost)
• --port– a porta para vincular o WebUI
  • Padrão – 7788
• --tema – o tema para a interface do usuário

Acessando o WebUI

Uma vez que o WebUI esteja em execução, abra seu navegador da web e navegue para:

http://127.0.0.1:7788

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

Na configuração do LLM, selecione um modelo de linguagem, por exemplo, gemini. Gemini fornece a chave de API gratuita.

No screenshot abaixo, você pode ver que adicionamos as chaves de API geradas com o link acima.

Executar Agente

Na execução do agente, vamos dar o comando “vá para amazon.in e digite ‘Playwright’, clique em pesquisar e me dê a primeira URL.”

No screenshot abaixo, você pode ver que ao executar o comando, ele abrirá o navegador Chromium e interagirá com todo o DOM da página.

Finalmente, ele inserirá o valor Playwright na caixa de pesquisa, e você pode ver o screenshot abaixo.

No backend, você pode ver que todos os logs estão sendo executados; qualquer que seja o agente que estiver realizando seu log, todos os logs estão no backend.

Resultado

No painel de resultados, você pode ver o resultado final, ação do modelo, pensamentos do modelo, arquivo de rastreamento e histórico do agente.

Vídeo

Você pode baixar o vídeo clicando no link fornecido. Você também pode ver o vídeo anexado na aba Gravações. Quando você executar o vídeo, verá todos os passos que o agente executou.

Abaixo estão algumas capturas de tela do vídeo.

Conclusão

A integração de LLMs, Playwright e o Uso de Navegadores representa um novo salto na automação de navegadores e fluxos de trabalho impulsionados por IA. Combinar essas ferramentas permitirá que você crie agentes de navegador inteligentes capazes de realizar tarefas complexas com mínima intervenção humana. Desde a automação de processos repetitivos até a habilitação de testes de QA dinâmicos e tomada de decisões em tempo real, as possibilidades são infinitas.

Referência

• Uso de Navegadores