Bouw een AI-browseragent met LLM’s, Playwright, browsergebruik

Handleidingen

Browser Use is een tool of platform dat is ontworpen om AI-agenten (zoals de GPT-modellen van OpenAI of andere grote taalmodellen) in staat te stellen om op een intelligente en geautomatiseerde manier met webbrowsers te interageren en deze te controleren. Het overbrugt in wezen de kloof tussen AI-capaciteiten en echte browserinteracties, waardoor het mogelijk wordt voor AI-systemen om taken uit te voeren zoals het navigeren op websites, het extraheren van gegevens, het invullen van formulieren, het klikken op knoppen en meer – net zoals een menselijke gebruiker zou doen.

Het primaire doel van Browser Use is om websites toegankelijk en actiegericht te maken voor AI-agenten door de complexiteit van browserautomatisering te abstraheren. In plaats van dat ontwikkelaars ingewikkelde scripts moeten schrijven om elementen op webpagina’s te vinden en ermee te interageren, vereenvoudigt Browser Use dit proces door alle interactieve elementen (zoals knoppen, invoervelden, links, enz.) te extraheren en een gestructureerde interface te bieden voor AI-agenten om mee te interageren.

Belangrijkste Kenmerken van Browser Use

AI-gestuurde Automatisering

Browser Use benut AI om webpagina’s te begrijpen en ermee te interageren. Het kan bijvoorbeeld de inhoud van een webpagina analyseren, relevante acties identificeren (zoals het klikken op een knop of het invullen van een formulier) en deze acties autonoom uitvoeren.

Visie + HTML-extractie

Het combineert visueel begrip (het herkennen van elementen op het scherm) met HTML-structuurextractie (het parseren van de onderliggende code van een webpagina). Deze dubbele aanpak zorgt ervoor dat AI-agenten kunnen interageren met zowel statische als dynamische web-elementen, zelfs als ze geen duidelijke identificatoren zoals ID’s of klassen hebben.

Multi-Tab Beheer

Browser Use kan meerdere browsertabbladen tegelijkertijd verwerken, waardoor AI-agenten complexe workflows kunnen uitvoeren die het interactie vereisen met verschillende webpagina’s tegelijkertijd.

De tool houdt de exacte acties bij die worden uitgevoerd door de AI-agent (bijv. het klikken op een knop of het invullen van een formulier) en kan die acties consistent repliceren, zelfs als de lay-out van de website enigszins verandert. Dit is vooral nuttig voor het maken van zelfherstellende tests in QA-automatisering.

Aangepaste Acties

Gebruikers kunnen Browser Use uitbreiden door aangepaste acties toe te voegen, zoals het opslaan van gegevens naar bestanden, het uitvoeren van databasebewerkingen, het verzenden van meldingen of het behandelen van menselijke invoer tijdens specifieke stappen in het automatiseringsproces.

Zelfcorrigerend

Browser Use bevat intelligente foutafhandeling en automatische herstelmechanismen. Als er iets misgaat tijdens de automatisering (bijv. een ontbrekend element of een netwerktimeout), kan de tool het probleem detecteren en automatisch proberen te herstellen, waardoor workflows zonder onderbreking kunnen doorgaan.

Compatibiliteit met Meerdere LLM’s

Browser Use ondersteunt verschillende grote taalmodellen (LLM’s), waaronder OpenAI’s GPT-4, Anthropic’s Claude en Meta’s Llama 2. Deze flexibiliteit stelt gebruikers in staat om het beste AI-model te kiezen voor hun specifieke behoeften.

Hoe Browser Use Werkt

Browser Use scant een webpagina en haalt alle interactieve elementen (knoppen, invoervelden, links, formulieren, enz.) eruit. Vervolgens biedt het een gestructureerde representatie van deze elementen die AI-agenten kunnen begrijpen en waarmee ze kunnen communiceren.

AI-interactie

Zodra de interactieve elementen zijn geïdentificeerd, kunnen AI-agenten acties uitvoeren zoals het klikken op knoppen, het invullen van formulieren, het navigeren tussen pagina’s of het extraheren van gegevens. De AI-agent kan ook de inhoud van de webpagina analyseren en beslissingen nemen op basis van de informatie die het vindt.

Automatiseringsworkflows

Browser Use stelt gebruikers in staat om complexe automatiseringsworkflows te creëren. Zo zou een AI-agent kunnen navigeren door een e-commerce site, items aan een winkelwagentje toevoegen en een aankoop voltooien – allemaal zonder menselijke tussenkomst.

Foutafhandeling en herstel

Als er iets misgaat tijdens het automatiseringsproces (bijv. een ontbrekend element of een langzaam ladende pagina), kan Browser Use het probleem detecteren en automatisch proberen te herstellen. Zo wordt ervoor gezorgd dat workflows soepel blijven verlopen, zelfs in onvoorspelbare omgevingen.

Installatiehandleiding

Aan de slag gaan met Browser Use is eenvoudig, maar het vereist enige initiële setup om ervoor te zorgen dat alles soepel verloopt. Hieronder volgt een gedetailleerde installatiehandleiding op basis van de vereisten en stappen die je hebt verstrekt. Deze handleiding zal je begeleiden bij het lokaal instellen van Browser Use op je machine.

Vereisten

Voordat je begint, zorg ervoor dat jouw systeem voldoet aan de volgende vereisten:

  • Python 3.11 of hoger. Je kunt je Python-versie controleren door het volgende commando uit te voeren:
    Python

     

  • Git. Git is vereist om het repository te klonen

Lokale Installatie

Stap 1: Kloon het Repository

Shell

 

Stap 2: Opzetten van de Python Omgeving

We raden aan om uv te gebruiken voor het beheren van de Python omgeving (aanbevolen voor Mac):

Shell

 

1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:

Shell

 

2. Activate the virtual environment.
  • Windows (opdrachtprompt):
    Shell

  • macOS/Linux:
    Shell

     

Zodra geactiveerd, zou je .venv moeten zien in je terminalprompt, wat aangeeft dat de virtuele omgeving actief is.

Stap 3: Afhankelijkheden Installeren

Nu je omgeving is opgezet, is het tijd om de benodigde afhankelijkheden te installeren.

Python-pakketten installeren. Gebruik de volgende opdracht om de vereiste Python-pakketten in requirements.txt te installeren:

Shell

 

Stap 4: Playwright Installeren

Playwright is een browserautomatiseringsbibliotheek die wordt gebruikt door Browser Use.

Om het te installeren, voer je de volgende opdracht uit:

Shell

 

Lokale Installatiehandleiding voor Browser Use WebUI

Zodra je de installatiestappen voor Browser Use hebt voltooid, kun je de WebUI lokaal starten. Deze handleiding zal je begeleiden bij het starten van de toepassing, het aanpassen van de instellingen en het configureren om je eigen browser te gebruiken indien nodig.

Het starten van de WebUI

Na het voltooien van de installatiestappen, kun je de Browser Use WebUI starten door de volgende opdracht uit te voeren:

Shell

 

De WebUI biedt verschillende opties om het gedrag aan te passen. Hier is een overzicht van de beschikbare vlaggen:

  • --ip– het IP-adres waaraan de WebUI moet worden gebonden
    • Standaard – 127.0.0.1 (localhost)
  • --port– de poort waaraan de WebUI moet worden gebonden
    • Standaard – 7788
  • --thema – het thema voor de gebruikersinterface

Toegang tot de WebUI

Zodra de WebUI actief is, opent u uw webbrowser en gaat u naar:

Plain Text

 

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.

LLM-configuratie

In LLM-configuratie selecteert u een taalmodel, bijv. gemini. Gemini biedt de gratis API-sleutel.

Generate the API keys from the link attached below.

In de onderstaande schermafbeelding ziet u dat we de met de bovenstaande link gegenereerde API-sleutels hebben toegevoegd.

Agent uitvoeren

In Run agent, laten we de prompt “ga naar amazon.in en typ ‘Playwright’, klik op zoeken en geef me de eerste URL.”

In de onderstaande schermafbeelding ziet u dat wanneer we de prompt uitvoeren, de Chromium-browser wordt geopend en communiceert met het volledige DOM van de pagina.

Uiteindelijk zal de waarde Playwright in het zoekvak worden ingevoerd, en dat kunt u zien in de onderstaande schermafbeelding.

In the below screenshot, you can see it gives us the first URL.

Aan de backend kunt u zien dat alle logs worden uitgevoerd; alle logs die de agent uitvoert, bevinden zich in de backend.

Resultaat

In het resultaten-tabblad ziet u het uiteindelijke resultaat, modelactie, modelgedachten, tracebestand en agentgeschiedenis.

Video

U kunt de video downloaden door te klikken op de verstrekte link. U kunt de bijgevoegde video ook zien onder het tabblad Opnames.Wanneer u de video afspeelt, ziet u alle stappen die de agent heeft uitgevoerd.

Hieronder staan enkele screenshots van de video.

Conclusie

De integratie van LLM’s, Playwright en Browsergebruik vertegenwoordigt een nieuwe sprong in browserautomatisering en AI-gedreven workflows. Het combineren van deze tools stelt je in staat om intelligente browseragents te creëren die in staat zijn om complexe taken uit te voeren met minimale menselijke tussenkomst. Van het automatiseren van repetitieve processen tot het mogelijk maken van dynamische QA-tests en realtime besluitvorming, de mogelijkheden zijn eindeloos.

Referentie

Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use