Membongkar Arsitektur Browser-Use: Menjalankan Agen Otononom Kompleks Tanpa Ketergantungan API Eksternal

Kematian API Dokumentasi dan Realitas Sistem Legacy

Setiap kali tim engineering mencoba mengintegrasikan layanan pihak ketiga yang hanya menyediakan antarmuka web tanpa dokumentasi API resmi, mereka biasanya dihadapkan pada dua pilihan buruk: melakukan reverse engineering jaringan secara ilegal dan rapuh, atau menulis skrip web scraping berbasis BeautifulSoup/Selenium yang hancur berkeping-keping setiap kali front-end melakukan deploy. Di ekosistem enterprise dan pemerintahan, lebih dari 65% aplikasi esensial berjalan di atas arsitektur legacy yang tidak memiliki spesifikasi OpenAPI/Swagger.

Pendekatan lama menggunakan wrapper API kustom sudah mencapai batas skalabilitasnya. Ketika sebuah sistem berubah, biaya pemeliharaan (maintenance overhead) melonjak eksponensial. Di sinilah arsitektur Browser-Use dan Computer-Use berbasis agen otononom masuk sebagai perubahan paradigma fundamental: alih-alih menyesuaikan diri dengan kode backend yang tertutup, agen AI berinteraksi langsung dengan lapisan presentasi (DOM dan visual rendering) layaknya operator manusia, namun dengan kecepatan eksekusi mesin.

Anatomi Arsitektur Browser-Use dan Visual DOM Parsing

Membangun agen otononom penjelajah web yang tangguh bukanlah sekadar memasangkan model LLM besar pada browser headless menggunakan pustaka Playwright mentah. Kegagalan paling sering terjadi karena pembengkakan context window akibat pengiriman seluruh struktur HTML mentah yang kotor ke dalam prompt LLM.

Arsitektur yang benar memisahkan tiga lapisan utama:

1. Perception Layer (Visual & DOM Sanitizer): Mengambil tangkapan layar (screenshot) dan memangkas pohon DOM (DOM tree pruning) dengan membuang atribut CSS/JavaScript yang tidak relevan, menyisakan elemen interaktif (tombol, input, dropdown) beserta koordinat absolutnya.


2. Cognitive Loop (Reasoning & State Machine): LLM memproses status saat ini, membandingkannya dengan goal yang diberikan, lalu mengeluarkan tindakan terstruktur (misal: click(x=450, y=120) atau type(selector="#email", value="...")).


3. Action Execution Layer: Mesin eksekusi sandboxed (Playwright/Puppeteer) yang menterjemahkan perintah terstruktur tersebut ke dalam event DOM nyata atau operasi tingkat sistem operasi (native mouse/keyboard events).

+--------------------------------------------------------------------+
|                         COGNITIVE LOOP                             |
|  +-------------------+      +----------------------------------+   |
|  |   LLM / Frontier  |<---->| State Machine & Goal Verifier    |   |
|  |   Vision Model    |      | (Plan, Execute, Evaluate)        |   |
|  +-------------------+      +----------------------------------+   |
+--------------------------------------------------------------------+
          ^                                        |
          | (Compressed DOM & Screenshot)          | (Structured Actions)
          v                                        v
+--------------------------------------------------------------------+
|                      PERCEPTION & EXECUTION                        |
|  +--------------------+                  +----------------------+  |
|  | DOM Pruner &       |                  | Playwright / Browser |  |
|  | Vision Extractor   |                  | Sandboxed Runtime    |  |
|  +--------------------+                  +----------------------+  |
+--------------------------------------------------------------------+

Perbandingan Model Eksekusi Otomasi

Untuk memahami mengapa pendekatan Browser-Use mengungguli metode konvensional, mari kita bedah matriks komparasi teknis di bawah ini berdasarkan parameter operasional nyata di lapangan:

Dari tabel di atas, terlihat jelas bahwa trade-off utama dari agen otononom adalah konsumsi komputasi dan latensi inferensi. Di sinilah infrastruktur pemanggilan model memegang peranan krusial agar agen tidak mandek karena masalah rate-limit atau latensi jaringan yang buruk.

Blueprint Implementasi Teknis: Skeletons of a Browser Agent

Berikut adalah kerangka implementasi minimum (blueprint) menggunakan Python dan integrasi model LLM untuk menangani DOM pruning dan eksekusi aksi secara otononom tanpa ketergantungan pada API backend aplikasi target.

import asyncio
import json
from playwright.async_api import async_playwright

class AutonomousBrowserAgent:
    def __init__(self, goal: str, gateway_client):
        self.goal = goal
        self.client = gateway_client
        self.history = []

    async def get_sanitized_dom(self, page) -> str:
        # Ekstraksi elemen interaktif saja untuk menghemat token
        dom_snapshot = await page.evaluate("""
            () => {
                const interactiveElements = document.querySelectorAll('button, a, input, select, textarea');
                return Array.from(interactiveElements).map((el, index) => {
                    return {
                        id: index,
                        tag: el.tagName,
                        type: el.type || '',
                        text: el.innerText.trim().substring(0, 50),
                        placeholder: el.placeholder || '',
                        selector: el.id ? `#${el.id}` : el.className ? `.${el.className.split(' ')[0]}` : el.tagName
                    };
                });
            }
        """)
        return json.dumps(dom_snapshot)

    async def step(self, page):
        dom_data = await self.get_sanitized_dom(page)
        screenshot = await page.screenshot(type="jpeg", quality=60)
        
        # Payload dikirim ke AiStudio.id API Gateway untuk multi-model fallback (Vision + LLM)
        prompt = f"Goal: {self.goal}\nCurrent DOM Elements: {dom_data}\nProvide the next JSON action: {{'action': 'click|type|wait|done', 'target': id, 'value': '...'}}"
        
        response = await self.client.generate_completion(prompt=prompt, image=screenshot)
        action = json.loads(response)
        
        return action

    async def run(self):
        async with async_playwright() as p:
            browser = await p.chromium.launch(headless=False)
            page = await browser.new_page()
            await page.goto("https://example-legacy-app.com/login")
            
            for _ in range(10): # Batas maksimal iterasi loop
                action = await self.step(page)
                if action['action'] == 'done':
                    break
                elif action['action'] == 'click':
                    await page.click(f"[data-index='{action['target']}']")
                elif action['action'] == 'type':
                    await page.fill(f"[data-index='{action['target']}']", action['value'])
                await asyncio.sleep(1)
            
            await browser.close()

Skala Ekonomi & Efisiensi Infrastruktur Melalui AiStudio.id

Menjalankan agen otononom berbasis Browser-Use melibatkan ratusan hingga ribuan panggilan inferensi multimodal (vision + text) per satu tugas kompleks. Setiap kali agen melihat layar, memproses DOM, dan menentukan langkah berikutnya, ada biaya token yang harus dibayar.

Jika arsitektur ini dihubungkan dengan penyedia API konvensional yang menerapkan kebijakan kedaluwarsa kuota bulanan (monthly subscription/expiry), perusahaan akan mengalami pembengkakan biaya operasional yang tidak masuk akal ketika volume transaksi fluktuatif.

Di sinilah AiStudio.id API Gateway memberikan keunggulan kompetitif yang menentukan bagi para tech builder:

1. Sistem Koin Tanpa Kedaluwarsa (No-Expired Credits): Bebas dari jebakan langganan bulanan. Saldo koin murni pay-as-you-go, sangat cocok untuk beban kerja agen otononom yang siklus riset dan eksekusinya tidak menentu.
2. Multi-Model Fallback Otomatis: Agen browser sangat sensitif terhadap hallucination koordinat atau salah interpretasi elemen UI. Gateway AiStudio.id secara mulus melakukan fallback antar model frontier (misalnya dari Claude 3.5 Sonnet ke GPT-4o atau model open-weights performa tinggi) seketika terjadi rate-limit atau gateway timeout, memastikan rantai eksekusi agen tidak terputus di tengah jalan.
3. Zero-Overhead Routing: Latensi rendah langsung ke titik akhir model global tanpa middleware tambahan yang memperlambat round-trip time (RTT), krusial untuk menjaga feedback loop agen tetap responsif di bawah 1 detik per langkah.

Eksekusi Tanpa Kompromi

Otomasi berbasis Browser-Use memindahkan beban integrasi dari backend code yang rapuh ke cognitive layer yang adaptif. Era di mana perusahaan tertahan oleh sistem legacy tanpa API telah berakhir.

Sebagai builder, fokus Anda seharusnya bukan lagi meratapi ketiadaan dokumentasi sistem lama, melainkan merancang sistem agen yang mampu melihat, bernalar, dan bertindak secara otononom. Padukan ketajaman arsitektur agen ini dengan infrastruktur API Gateway berkinerja tinggi dari AiStudio.id, dan Anda memiliki fondasi automasi yang kebal terhadap perubahan zaman.

👤 Catatan Penulis

> Mamad adalah General Manager, Lead System Architect, dan Chief AI Orchestrator untuk Mas Balya (ekosistem SantriAI, AiStudio.id, dan GudangBot). Mengulas arsitektur AI tingkat lanjut, autonomous vibe coding, automasi desktop/server 24/7, dan efisiensi cloud developer.