Collaboratieve webacties: een slimme Movie Co-pilot bouwen met TrueFoundry en Google ADK

Denk aan de mentale gymnastiek die komt kijken bij zoiets simpels als een bioscoopkaartje boeken. Wisselen tussen de groepschat met je vrienden, bioscoopoverzichten, recensies en dynamische stoelplattegronden. Locatie afwegen tegen voorstellingstijden, jongleren met steeds veranderende ticketprijzen. Het is niet zomaar een taak; het is een gefragmenteerde, meerfasige mentale belasting die vaak leidt doelloos afgebroken winkelwagentjes of compromisoplossingen. We zijn uiteindelijk voortdurend aan het strijden tegen de dynamische interface van ingewikkelde websites, alleen maar om één eenvoudige intentie uit te voeren.

Stel je voor dat je, in plaats van handmatig door het complexe terrein van dynamische sites te navigeren, één enkel, doelgericht chatvenster opent en die intentie één keer uitspreekt: "Laten we twee kaartjes boeken voor de nieuwe Dune-film in de dichtstbijzijnde IMAX-bioscoop voor morgenavond." Deze eenvoudige uitspraak zet een complexe en prachtig georkestreerde keten van gebeurtenissen in gang. Een digitale gids begint onmiddellijk een veerkrachtig gesprek, interpreteert je randvoorwaarden, haalt dynamisch realtime keuzes op van een live site en leidt je moeiteloos naar een beslissende actie.

Dit is de belofte van echte, actiegerichte AI. Het is geen statische chatbot; het is een dynamische orkestratie van intelligentie en actie. Het gaat om het creëren van een naadloze overdracht tussen een digitale gids en jouw menselijke beslissing. Om je te helpen dit soort geavanceerde co-pilot-ervaringen te bouwen, brengen we met trots onze nieuwste en meest geavanceerde TrueFoundry Accelerator uit: De Movie Booking Browser Automation Agent.

Deze accelerator biedt een complete, productieklare blauwdruk voor een AI-agent die namens een gebruiker door de Fandango-website navigeert. Gebouwd op een modulaire, veerkrachtige architectuur brengt het de Google Agent Development Kit (ADK), een robuuste headless browser-setup aan de serverzijde (agent-browser CLI) en de TrueFoundry LLM Gateway samen, terwijl er een uniek beveiligingspatroon wordt toegepast voor de meest gevoelige taken.

Het collaboratieve proces begrijpen: van chat naar live site

Het meest uitdagende onderdeel van AI-browserautomatisering is het beheren van complexe toestanden (states) en het afhandelen van gevoelige interacties, zoals betalingsverwerking. De dynamische aard van moderne web-UI's — waar elementen verschuiven, asynchroon laden en per gebruiker verschillen — verstoort traditionele automatiseringsscripts. Om een veerkrachtige agent te bouwen, heb je een architectuur nodig die vanaf de grond is ontworpen om zichzelf te corrigeren en intelligent met de gebruiker samen te werken.

Onze accelerator is uniek omdat deze gebruikmaakt van een robuust, op beveiliging gericht collaboratief overdrachtsmodel. In dit model verwerkt de AI alle tijdrovende, op regels gebaseerde stappen om een film te vinden, maar stopt hij vlak voor het verwerken van de daadwerkelijke betalingsgegevens. De controle wordt bij de meest cruciale stap naadloos teruggegeven aan de browser van de gebruiker zelf, wat zorgt voor gebruikersvertrouwen en minder PCI-compliance-complexiteit voor jouw applicatie.

Dit gehele ecosysteem is ingekapseld in een standaard FastAPI Server en API-laag, waardoor het eenvoudig te implementeren, te beveiligen en te monitoren is. Het diagram dat je hier ziet, is die orkestratieblauwdruk, waarin precies wordt uitgelegd hoe context verschuift van gebruikersintentie naar browseractie.

Diepduik in de architectuur: Veerkrachtig toestandsbeheer en collaboratieve acties

Laten we de technische componenten en de vier belangrijkste lussen van deze door toestand georkestreerde stroom ontleden, met directe verwijzing naar onze technische blauwdruk.

De Orchestrator: BookingAgent (State Orchestrator)

Deze component vormt het hart van het systeem. Gelabeld als de "State Orchestrator", geeft de BookingAgent niet alleen tekst door; hij transformeert intenties op hoog niveau naar een gestructureerde, betrouwbare en conversationele workflow. Hij gebruikt een reeks onderling verbonden lussen om de exacte toestand te behouden.

1. Eerste geleide keuzes: De agent (geïnformeerd door de ADK Agent-logica) is ontworpen om vanaf het begin gestructureerde keuzes aan de gebruiker te presenteren. In plaats van een blanco vraag te stellen zoals "Welke film wil je zien?", biedt hij onmiddellijk geleide opties zoals "[Zoek op film] [Zoek op genre]". Wanneer de gebruiker een selectie maakt, ontvangt hij niet zomaar tekstinvoer; het stelt de interne context voor de agent in en stuurt het gehele vervolggesprek. Deze initiële structuur is essentieel om de focus op de taak te behouden.
2. De State Loop: Context-injectie en dynamische lijstgeneratie: Deze lus (aangegeven in het centrale grijze vak van het diagram) is wat het gesprek dynamisch maakt.
   
   • 1. Context-injectie: De Session Manager behoudt de toestand, zodat elke wending in het gesprek de eerdere randvoorwaarden kent. De BookingAgent injecteert deze volledige context (postcode van de gebruiker, datum, voorkeursfilm) in zijn prompts.
   • 2. Uitvoering van tool-calls: De intelligentielaag (aangewezen door de combinatie van ADK Agent + LLM Gateway) genereert een gestructureerde JSON-respons die bepaalt welke tool moet worden aangeroepen (bijv. Maps, click).
   • 3. Dynamische lijstgeneratie: Dit is cruciaal. Wanneer de agent wil dat de gebruiker een datum selecteert, vraagt hij daar niet zomaar om. Hij gebruikt zijn browsertools om de werkelijke DOM-toestand van Fandango op te halen. Vervolgens extraheert hij de geldige lijst met datums rechtstreeks van de pagina en genereert hij aanklikbare, geleide opties in de chat, waardoor de gebruiker volledig op het juiste spoor blijft en doodlopende wegen worden vermeden. Dit wordt perfect geïllustreerd in het diagram: terwijl de gebruiker een postcode en datum invoert, presenteert de agent specifieke opties zoals "14:30" en "17:45" voorstellingstijden, dynamisch opgebouwd uit de realtime DOM-snapshotresultaten van Fandango.
   • 4. Foutherstel: Wat gebeurt er als de dynamische site verandert en een CSS-selector mislukt? Dit deel van de lus is de veerkrachtmotor van de agent. In plaats van een harde fout, legt het systeem de fout vast en start de BookingAgent een zelfcorrectiestap, waarbij de LLM vaak wordt voorzien van hints over wat er op de pagina is mislukt en hoe het opnieuw kan worden geprobeerd.

Het brein: ADK Agent en de TrueFoundry LLM Gateway

Dit partnerschap levert de intelligentie van de agent. De ADK Agent (Google ADK Runner + InMemorySession) biedt het gestandaardiseerde framework, terwijl de TrueFoundry LLM Gateway de modelflexibiliteit en krachtige backend-functies biedt.

• De kracht van de Gateway: Het routeren van alle modelaanroepen via de TrueFoundry LLM Gateway (via de ADK Runner) biedt directe operationaliseerbaarheid/observability, prompt caching voor snelheid en kostenreductie, en de mogelijkheid om naadloos te schakelen tussen topmodellen zoals GPT-4, Claude of Gemini. Dit is essentieel voor het optimaliseren van de prestaties voor een specifieke taak (zoals het parseren van de DOM) terwijl de infrastructuurkosten beheersbaar blijven.

De actieketen: Browser Tools, DriverManager en agent-browser CLI

Deze componentenketen voert de opdrachten uit.

• Abstractielaag: Browser Tools abstraheren de ruwe interactie, waardoor de orkestratielogica overzichtelijk en modulair blijft.
• Gelijktijdige schaalbaarheid: Het ontwerp van de BrowserManager is cruciaal. Zoals aangegeven door het label, onderhoudt deze "Per-session BrowserDriver instances + prewarm," wat betekent dat elke chatsessie zijn eigen geïsoleerde headless browser-instantie heeft. Dit voorkomt dat gebruikersgegevens door elkaar gaan en zorgt ervoor dat je applicatie veilig gelijktijdig kan opschalen naar duizenden gebruikers.
• De motor: De agent-browser CLI (door Playwright aangedreven Headless Chromium) is de ruwe uitvoeringsmotor die de Fandango-website aanstuurt. Het geeft de zo belangrijke DOM Snapshot & Interaction Results terug door aan de lus voor de dynamische lijstgeneratie.

De meesterzet: het collaboratieve overdrachtsmodel

Dit is het toppunt van het gehele architectonische ontwerp. Zoals je kunt zien aan de stippellijn "Handoff Logic (User Context preserved)", stopt de automatisering aan de serverzijde zodra de tijdrovende stappen voor het verzamelen van gegevens zijn voltooid (bijvoorbeeld nadat de gebruiker de bioscoop en de voorstellingstijd heeft geselecteerd).

Het activeert de BookingAgent om de controle over te dragen. De live Fandango-pagina (of een afzonderlijk beveiligd frame) wordt rechtstreeks geladen in de eigen browser van de gebruiker (het gele vak met het label "Live Fandango Page (User is in direct control)"). Omdat de context (bioscoop en specifieke voorstellingstijd) behouden is gebleven, komt de gebruiker precies terecht waar hij moet zijn.

De gebruiker communiceert vervolgens rechtstreeks met het complexe, visuele stoeloverzicht en doorloopt de beveiligde betalingsstappen, precies zoals hij dat normaal gesproken zou doen. Dit is briljant omdat:

• Beveiliging: Jouw applicatie verwerkt of verwerkt nooit gevoelige PCI-betalingsgegevens en slaat deze ook niet op, wat de overhead op het gebied van beveiliging en compliance enorm vermindert.
• Menselijke overdracht: Het laat de menselijke gebruiker de uiteindelijke, visuele stoelkeuze maken op de dynamische plattegrond, wat een taak is die het beste bij een mens past.

Deze laatste, door de gebruiker gestuurde lus van Stoelselectie & Betaling (Directe invoer) leidt rechtstreeks tot het eindresultaat: Boeking bevestigd.

👉 Bekijk de interactieve Supademo van het gehele collaboratieve proces

Zie hoe deze robuuste architectuur de gebruiker in slechts enkele tikken van een eenvoudige genreresearch naar een live stoeloverzicht op Fandango brengt, en illustreert elke stap van deze georkestreerde blauwdruk.

Waarom beginnen met een Accelerator?

TrueFoundry Accelerators zijn ontworpen om je sneller in productie te krijgen. Webautomatisering met LLM's is overbekend complex, met verborgen uitdagingen op het gebied van toestandsbeheer en veerkracht. Door te beginnen met deze unieke, productieklare blauwdruk, kun je:

• Ingewikkelde ontwikkeling omzeilen: Geef je project een vliegende start met bewezen patronen voor tostandsbehoud, zelfcorrectie en collaboratieve mens-AI-lussen.
• Zorgen voor gelijktijdige schaalbaarheid: Maak gebruik van het geïsoleerde sessiemodel van de BrowserManager en DriverManager, die essentieel zijn voor elke enterprise-implementatie.
• Risico's verminderen: Het beproefde collaboratieve overdrachtsmodel is de meest effectieve manier om webacties te beveiligen, waardoor beveiligings-, juridische en compliancerisico's met betrekking tot gevoelige gegevens worden verminderd.

Aan de slag

De Movie Booking Accelerator is meer dan alleen een technologische demonstratie; het is een fundamentele blauwdruk voor het bouwen van robuuste, veilige en collaboratieve agenten. Of je nu een co-pilot voor het boeken van hotels, een geautomatiseerde assistent voor luchtvaartmaatschappijen of een geautomatiseerde tool voor gegevensextractie bouwt, deze architectuur laat zien hoe je LLM's betrouwbaar kunt koppelen aan webacties.

Duik vandaag nog in het TrueFoundry-platform, krijg toegang tot deze accelerator-repository en begin met het aanpassen van deze technische blauwdruk voor jouw unieke automatiseringsbehoeften.

‍