Construa um Agente de Navegação de IA com LLMs, Playwright, Uso de 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 e controlem navegadores da web de maneira inteligente e automatizada. Ele essencialmente preenche a lacuna entre as capacidades da IA e as interações reais com navegadores, 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 de navegadores. 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 que os agentes de IA interajam.

Características Principais do Uso do Navegador

Automação Baseada em IA

O Uso do Navegador aproveita a IA para entender e interagir com páginas da web. Por exemplo, ele 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

Ele 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 com elementos web estáticos e dinâmicos, mesmo que não possuam 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 a interação 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 entradas humanas durante etapas específicas no processo de automação.

Autocorreção

O Uso do Navegador inclui manipulação 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 grande (LLMs), incluindo o GPT-4 da OpenAI, o Claude da Anthropic e o 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 escaneia 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 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 Trabalho de Automação

O Browser Use permite aos usuários criar fluxos de trabalho 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 sem problemas, 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 requisitos e etapas que você forneceu. Este guia irá orientá-lo na configuração do Browser Use localmente em sua máquina.

Requisitos

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

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

   

  python --version
• 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ê deverá ver .venv no prompt do terminal, indicando que o ambiente virtual está ativo.

Passo 3: Instalar Dependências

Agora que 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 em requirements.txt:

uv pip install -r requirements.txt

O 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 WebUI do Browser Use

Depois de concluir as etapas de instalação para o Browser Use, você pode começar a executar a 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 a WebUI

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

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

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

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

Acessando a WebUI

Assim que a WebUI estiver em execução, abra seu navegador da web e acesse:

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 idioma, por exemplo, gêmeo. Gêmeo fornece a chave da API gratuita.

Na captura de tela abaixo, você pode ver que adicionamos as chaves da API geradas com o link acima.

Executar Agente

Em Executar agente, vamos dar o comando “ir para amazon.in e digitar ‘Playwright’, clicar em pesquisar e me dar o primeiro URL.”

Na captura de tela abaixo, você pode ver que quando executamos o comando, ele abrirá o navegador Chromium e interagirá com todo o DOM da página.

Por fim, ele inserirá o valor Playwright na caixa de pesquisa, e você pode ver na captura de tela abaixo.

No backend, você pode ver que todos os logs são executados; qualquer ação realizada pelo agente é registrada em logs no backend.

Resultado

Na aba de resultado, 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 de Gravações.Ao executar o vídeo, você 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 Uso de Navegador 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 Navegador