Tutorial AI Web Scraper Agent: Integrasi Browser Use & Ollama Python

Keterbatasan Web Scraping Tradisional dan Pergeseran ke Agentic Automation

Scraper tradisional pakai BeautifulSoup, Selenium, Puppeteer. Script butuh lokasi elemen persis. Selector CSS statis, XPath kaku. Maintenance overhead tinggi. Target website ubah class Tailwind, hirarki DOM, atau migrasi ke SPA React: script langsung break.

Rapuhnya Selector CSS dan XPath di DOM Dinamis

Website modern pakai client-side rendering, class obfuscation, Shadow DOM. Pendekatan lama gagal. Parser terikat kaku pada struktur HTML statis. Perubahan minor UI rusak seluruh pipeline ekstraksi data. Developer buang waktu refactor selector tiap minggu.

Solusi: Agentic Web Automation

Agentic Web Automation ubah paradigma. Tidak ada penulisan langkah manual click atau extract. Input berupa instruksi natural language. AI Agent gabungkan Large Language Model (LLM) dan Playwright automation. Agent paham konteks visual dan hirarki DOM tree.

AI Agent ambil keputusan otonom. Kenali tombol search, tutup modal cookie, handle paginasi, ekstraksi data ke format terstruktur. Tata letak UI berubah: agent tetap paham instruksi semantik.

Langkah-Langkah Teknis Implementasi Browser Use dan Ollama

Framework Browser Use hubungkan AI Agent ke browser Playwright. Dipadu Ollama, LLM (Qwen 2.5, Llama 3) jalan lokal. Zero data leaks, zero API cost.

Checklist Persiapan Sistem

• Python version 3.11 atau lebih baru
• Ollama server aktif di lokal
• RAM minimal 16GB (eksekusi LLM 7B/14B)
• Playwright Chromium engine

Step 1: Setup Virtual Environment dan Dependensi

Jalankan perintah terminal berikut untuk isolasi environment dan instalasi paket:

python3 -m venv venv
source venv/bin/activate
pip install browser-use langchain-ollama pydantic playwright
playwright install chromium

Step 2: Konfigurasi dan Pull Model Ollama

Model Qwen 2.5 (7B atau 14B) unggul pemahaman instruksi dan parsing terstruktur. Unduh via CLI:

ollama pull qwen2.5:7b

Pastikan servis Ollama aktif pada port default http://localhost:11434.

Step 3: Script Python AI Web Scraper Otonom

Script lengkap inisialisasi agent, navigasi target, ekstraksi data ke Pydantic schema:

import asyncio
from pydantic import BaseModel, Field
from langchain_ollama import ChatOllama
from browser_use import Agent, Controller

class ProductSchema(BaseModel):
    name: str = Field(description="Nama produk lengkap")
    price: str = Field(description="Harga produk beserta mata uang")
    rating: str = Field(description="Rating atau ulasan produk jika ada")
    url: str = Field(description="Link langsung ke halaman detail produk")

class ScrapingResult(BaseModel):
    products: list[ProductSchema]

controller = Controller(output_model=ScrapingResult)

async def main():
    llm = ChatOllama(
        model="qwen2.5:7b",
        num_ctx=32768,
        temperature=0.0
    )

    task = (
        "Buka website 'https://example-quotes.toscrape.com/', "
        "cari kutipan yang ditulis oleh 'Albert Einstein', "
        "ekstrak teks kutipan beserta tag yang terkait, "
        "lalu kembalikan hasilnya sesuai schema JSON yang diminta."
    )

    agent = Agent(
        task=task,
        llm=llm,
        controller=controller,
        use_vision=False
    )

    result = await agent.run()
    print("--- HASIL EKSTRAKSI ---")
    print(result.final_result())

if __name__ == "__main__":
    asyncio.run(main())

Best Practice dan Troubleshooting di Lingkungan Production

Skala besar butuh optimasi resource dan penanganan edge-case.

Menangani SPA dan Dynamic Loading

Single Page Application render data secara asinkron. Agent baca DOM terlalu cepat: data kosong.

• Atur controller untuk tunggu event networkidle dari Playwright sebelum evaluasi DOM.
• Instruksikan agent pada prompt untuk scroll down. Trigger lazy loading gambar dan list produk.

Optimasi Context Window Ollama

DOM web besar lewati limit context LLM. Efek: token truncation, OOM error.

• Browser Use ringkaskan DOM tree secara otomatis. Set parameter num_ctx pada ChatOllama minimal 32768 token.
• Gunakan model terquantization optimal seperti qwen2.5:7b-instruct-q8_0.

Error Recovery dan Resilience Headless Browser

Browser headless rentan timeout dan blocking.

• Headless Mode Debugging: Saat dev, set headless=False untuk pantau aksi visual agent.
• Retry Mechanism: Bungkus agent.run() dalam try-except dengan exponential backoff. Atasi network flake atau failure reasoning LLM.

Rekomendasi Integrasi ke Pipeline Backend

LLM inference butuh latensi lebih tinggi dari HTTP request biasa. Backend harus asinkron.

Arsitektur Production Pipeline

• Task Queue: Integrasikan scraper agentic dengan Celery, RabbitMQ, atau ARQ. Pisahkan dari request-response cycle HTTP API utama.
• Microservice Terpisah: Isolasi service scraper dan Ollama LLM node ke container Docker atau VM khusus GPU (NVIDIA CUDA). Tingkatkan token generation rate.
• Validasi Data: Pakai Pydantic schema ketat. Jamin output LLM tervalidasi sebelum masuk PostgreSQL atau MongoDB.

Integrasi Browser Use dan Ollama pangkas waktu maintenance script. Agent otomatis adaptasi perubahan layout antarmuka web.