Tutorial GLM-5-Turbo: Bangun Agen Peramban Real-Time

Apa itu GLM-5-Turbo?

GLM-5-Turbo dirancang untuk mendukung alur kerja agen di dunia nyata. Model ini menyediakan beberapa mode berpikir, memungkinkan pengguna menyeimbangkan antara respons lebih cepat dan penalaran lebih mendalam tergantung pada tugasnya.

Untuk aplikasi interaktif, model ini juga mendukung output streaming, sehingga respons dapat dikirimkan token demi token untuk pengalaman pengguna yang lebih responsif.

Salah satu kekuatan intinya adalah function calling, yang memungkinkan model memanggil tool eksternal secara andal. Model ini juga mendukung output terstruktur seperti JSON, sehingga lebih mudah diintegrasikan dengan sistem hilir dan lapisan UI.

Untuk alur kerja yang lebih panjang, GLM-5-Turbo menyertakan context caching, yang membantu menjaga performa di sepanjang interaksi yang diperluas tanpa berulang kali memroses informasi yang sama. Model ini juga mendukung integrasi dengan sistem eksternal melalui MCP (Model Context Protocol), memungkinkan model terhubung dengan tool dan sumber data tambahan.

Dibuat untuk alur kerja agen

GLM-5-Turbo sangat dioptimalkan untuk lingkungan bergaya agen, khususnya skenario seperti OpenClaw, di mana tugas melibatkan banyak langkah, tool, dan rantai eksekusi yang panjang.

Optimalisasi ini meningkatkan beberapa area penting:

• Keandalan pemanggilan tool: Memastikan model dapat secara konsisten memanggil fungsi yang tepat.
• Dekomposisi instruksi: Memungkinkan model memecah tugas kompleks menjadi langkah-langkah yang lebih kecil.
• Stabilitas eksekusi rantai panjang: Sangat penting untuk agen multi-langkah.

Dalam praktiknya, GLM-5-Turbo cukup cepat untuk sistem interaktif sekaligus tetap andal dalam skenario pemanggilan tool multi-langkah, yang persis kita butuhkan untuk membangun agen peramban.

Contoh Proyek GLM-5-Turbo: Bangun Agen Peramban Real-Time

Dalam tutorial ini, kita akan membuat aplikasi Streamlit yang bertindak sebagai asisten perjalanan ringan. Pengguna memberikan kueri seperti “Cari penerbangan termurah dari SFO ke JFK Jumat hingga Senin depan.” Sistem kemudian akan:

• Menelusuri web untuk halaman penerbangan yang relevan
• Membuka dan memeriksa halaman-halaman tersebut
• Mengekstrak informasi berguna seperti harga, durasi, dan transit
• Merangkum opsi terbaik dalam format yang ramah pengguna

Secara garis besar, sistem terdiri dari empat komponen yang bekerja bersama.

• Pertama adalah lapisan LLM (llm_client.py), yang mengirim permintaan chat-completion ke Z.AI atau OpenRouter.
• Kedua adalah lapisan tool peramban (browser_tools.py), yang menyediakan aksi seperti menelusuri, membuka halaman, dan mengekstrak konten.
• Ketiga adalah loop agen (agent.py), yang menghubungkan model dan tool ke dalam alur kerja multi-langkah.
• Terakhir, UI Streamlit (app.py) menyediakan antarmuka untuk interaksi dan visualisasi.

Kode sumber lengkap: https://github.com/AashiDutt/GLM5_TURBO

Langkah 1: Prasyarat

Sebelum membangun aplikasi, pastikan Anda memiliki hal berikut:

• Python 3.9+
• Kunci API GLM-5-Turbo (Z.AI atau OpenRouter)
• Playwright terpasang untuk otomasi peramban

Instal pustaka yang diperlukan:

pip install streamlit pandas python-dotenv requests playwright
playwright install chromium

Berkas app.py menggunakan Streamlit, pandas, dotenv, dan modul kustom. Sementara browser_tools.py menggunakan requests dan Playwright. Panggilan API dilakukan di dalam llm_client.py menggunakan requests.

Sekarang, jalankan perintah berikut untuk membuat berkas .env tempat kunci API kita akan disimpan:

cp .env.example .env

Pilih endpoint API pilihan Anda dan masukkan kunci API:

.env
PROVIDER=zai
# Direct Z.AI API
ZAI_API_KEY=Your Z.AI API key
ZAI_BASE_URL=https://api.z.ai/api/paas/v4/chat/completions
ZAI_MODEL=glm-5-turbo
# OpenRouter
OPENROUTER_API_KEY=Your OpenRouter API key
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1/chat/completions
OPENROUTER_MODEL=z-ai/glm-5-turbo
# Browser
HEADLESS=true
MAX_STEPS=10

Serupa, peramban Playwright dijalankan dari konstruktor ini di browser_tools.py:

class BrowserTools:
    def __init__(self, headless: bool = True) -> None:
        self.playwright = sync_playwright().start()
        self.browser = self.playwright.chromium.launch(headless=headless)
        self.context = self.browser.new_context(viewport={"width": 1440, "height": 1100})
        self.page = self.context.new_page()

Blok ini menginisialisasi lingkungan peramban yang sepenuhnya terkontrol menggunakan Playwright, yang digunakan agen untuk berinteraksi dengan web.

Ini memulai mesin Playwright, meluncurkan peramban Chromium, membuat sesi peramban terisolasi, dan membuka halaman baru tempat semua aksi berlangsung.

Penyiapan ini memungkinkan agen menelusuri situs web nyata, mengamati konten langsung, dan mengambil keputusan berdasarkan apa yang dilihat.

Langkah 2: Menyiapkan klien LLM

Selanjutnya, kita akan menyiapkan LLMClient yang mendukung penggunaan Z.AI langsung dan OpenRouter dengan antarmuka yang sama. Endpoint khusus penyedia dipilih di konstruktor. Karena harga sebanding, Anda dapat menggunakan salah satu API untuk demo ini sesuai preferensi.

Berikut pengaturan utamanya:

class LLMClient:
    def __init__(
        self,
        provider: str,
        api_key: str,
        model: str,
        app_name: str = "GLM-5 Browser Agent Demo",
        app_url: str = "http://localhost:8501",
    ) -> None:
        self.provider = provider.lower().strip()
        self.api_key = api_key
        self.model = model
        if self.provider == "zai":
            self.url = os.getenv("ZAI_BASE_URL", "https://api.z.ai/api/paas/v4/chat/completions")
        elif self.provider == "openrouter":
            self.url = os.getenv("OPENROUTER_BASE_URL", "https://openrouter.ai/api/v1/chat/completions")

Initializer ini mengonfigurasi klien LLM dengan memilih endpoint API yang sesuai (Z.AI atau OpenRouter) sambil menjaga antarmuka tetap konsisten.

Ini menyimpan kunci API, model, dan URL endpoint, sehingga bagian lain dari sistem dapat memanggil model tanpa perlu memikirkan perbedaan spesifik penyedia.

Lalu create_chat_completion() membangun payload, melampirkan tool bila diperlukan, dan mengurai panggilan tool yang dikembalikan.

payload: Dict[str, Any] = {
    "model": self.model,
    "messages": messages,
    "temperature": temperature,
    "max_tokens": max_tokens,
    "stream": False,
}
if tools:
    payload["tools"] = tools
    payload["tool_choice"] = "auto"

Payload di atas mendefinisikan permintaan yang dikirim ke model, termasuk konteks percakapan dan parameter generasi. Dengan melampirkan tools dan mengaktifkan tool_choice="auto", model dapat memutuskan kapan memanggil fungsi eksternal.

Langkah 3: Mendefinisikan tool peramban

Di agent.py, kita mendefinisikan skema tool yang dapat dipanggil model. Ini mencakup search_web, open_url, open_search_result, extract_page, extract_flight_cards, click, type_text, dan wait_for_text.

Berikut salah satu contoh definisi tool:

{
    "type": "function",
    "function": {
        "name": "search_web",
        "description": "Search the public web for flight result pages or travel aggregators.",
        "parameters": {
            "type": "object",
            "properties": {
                "query": {"type": "string"},
                "max_results": {"type": "integer", "default": 8},
            },
            "required": ["query"],
        },
    },
}

Skema ini memberi tahu model apa yang dilakukan tool, input apa yang diharapkan, dan bagaimana cara memanggilnya. Dengan mendefinisikan tool seperti ini, kita memungkinkan model secara dinamis memutuskan kapan menelusuri web alih-alih mengeraskan alurnya.

Di sisi eksekusi, tool tersebut diimplementasikan dalam browser_tools.py. Untuk demo ini, kami menggunakan endpoint HTML DuckDuckGo untuk menyimpan tautan hasil saat ini guna navigasi lanjutan.

def search_web(self, query: str, max_results: int = 8) -> Dict[str, Any]:
    url = f"https://html.duckduckgo.com/html/?q={quote_plus(query)}"
    headers = {"User-Agent": "Mozilla/5.0"}
    resp = requests.get(url, headers=headers, timeout=30)
    resp.raise_for_status()
    html = resp.text

Fungsi search_web() di atas melakukan penelusuran web ringan dengan mengambil hasil HTML mentah dan mengurainya, sehingga tidak perlu API penelusuran berbayar. Fungsi ini juga menyimpan hasil secara internal agar agen dapat menavigasinya pada langkah berikutnya.

Sekarang kita telah mendefinisikan cara agen berinteraksi dengan web, langkah berikutnya adalah melihat bagaimana agen benar-benar menggunakan tool ini untuk mengekstrak informasi penerbangan melalui penelusuran web.

Langkah 4: Mengekstrak informasi penerbangan

Setelah model menemukan sumber yang menjanjikan, model perlu memeriksanya. Kita dapat menggunakan tool peramban (dari langkah 3) untuk mengekstrak snapshot halaman mentah.

Langkah 4.1: Membuka dan mengekstrak halaman

Kita akan menggunakan tool open_url() untuk memuat halaman web dan mengembalikan snapshot berisi judul, URL, dan teks yang terlihat.

def open_url(self, url: str) -> Dict[str, Any]:
    self.page.goto(url, wait_until="domcontentloaded", timeout=45000)
    self.page.wait_for_timeout(1200)
    return self._page_snapshot()

Untuk ekstraksi yang lebih luas, kita akan menggunakan tool extract_page() berikut yang mengembalikan snapshot halaman dan kumpulan tautan yang dikumpulkan dari halaman saat ini.

def extract_page(self, max_chars: int = 7000, link_limit: int = 20) -> Dict[str, Any]:
    snapshot = self._page_snapshot(max_chars=max_chars)
    snapshot["links"] = self._collect_links(limit=link_limit)
    self.current_links = snapshot["links"]
    return snapshot

Ini berguna karena model tidak selalu perlu mengklik secara membabi buta. Terkadang model dapat terlebih dahulu memeriksa teks halaman saat ini dan tautan yang tersedia, lalu memutuskan langkah berikutnya.

Langkah 4.2: Ekstraksi penerbangan heuristik

Bagian kunci dari demo ini adalah fungsi extract_flight_cards() yang mengambil teks halaman yang terlihat dan menggunakan pola regex untuk mendeteksi harga, waktu, durasi, dan transit.

Berikut inti dari logika tersebut:

money_pattern = re.compile(r"(?:\$|USD\s?)(\d{2,5})")
time_pattern = re.compile(r"\b\d{1,2}:\d{2}\s?(?:AM|PM|am|pm)?\b")
duration_pattern = re.compile(r"\b\d{1,2}\s?h\s?\d{0,2}\s?m?\b|\b\d{1,2}\s?hr\s?\d{0,2}\s?min?\b", re.I)
stop_pattern = re.compile(r"nonstop|1 stop|2 stops|3 stops", re.I)

Pola regex ini bertindak seperti detektor untuk sinyal umum terkait penerbangan. money_pattern menangkap harga dalam format seperti $299 atau USD 299, sedangkan time_pattern mengidentifikasi waktu keberangkatan dan kedatangan.

Demikian pula, duration_pattern mengekstrak durasi perjalanan, dan stop_pattern mendeteksi apakah penerbangan langsung atau memiliki transit. Anda dapat membuat pola serupa untuk kasus penggunaan apa pun.

Setelah sinyal ini didefinisikan, fungsi memindai potongan teks kecil dan mencari kombinasi yang bermakna. Ketika ada kecocokan, fungsi membangun kartu penerbangan terstruktur:

card = {
    "snippet": joined[:350],
    "price_usd": int(price_match.group(1)),
    "times": times[:2],
    "duration": duration.group(0) if duration else None,
    "stops": stops.group(0) if stops else None,
}

Blok kode di atas mengubah teks mentah menjadi representasi terstruktur dari opsi penerbangan. Kode mengekstrak harga, membatasi entri waktu ke yang paling relevan, dan menangani kolom yang hilang. Ini mempertahankan konteks asli, yang berguna untuk debug.

Dengan ekstraksi ini, agen kini memiliki cara untuk mengonversi konten halaman tidak terstruktur menjadi data yang dapat digunakan. Selanjutnya, kita akan melihat bagaimana data ini mengalir melalui loop agen untuk mendorong pengambilan keputusan multi-langkah.

Langkah 5: Loop agen

Perilaku agen yang sebenarnya berada dalam kelas BrowserAgent (di dalam agent.py). Kelas ini mengirim prompt dan skema tool ke model, memeriksa apakah model ingin memanggil tool, mengeksekusi tool tersebut, menambahkan hasil tool kembali ke percakapan, dan berlanjut hingga jawaban akhir dihasilkan.

Berikut loop utamanya:

for step in range(1, self.max_steps + 1):
    assistant = self.llm.create_chat_completion(
        messages=messages,
        tools=TOOLS,
        temperature=0.2,
        max_tokens=2200,
        enable_thinking=False,
    )
    if assistant.tool_calls:
        ...
        result = self.tool_runner(tc.name, tc.arguments)
        ...
        continue
    final_content = assistant.content.strip()
    if final_content:
        yield {"type": "final", "step": step, "content": final_content}
        return

Loop ini adalah inti dari demo.

Pada setiap langkah, model menerima status percakapan saat ini dan memutuskan apa yang harus dilakukan selanjutnya. Jika mengembalikan panggilan tool, panggilan tersebut dieksekusi menggunakan tool_runner, dan hasilnya dimasukkan kembali ke loop untuk iterasi berikutnya.

Proses ini berlanjut hingga model menghasilkan respons akhir alih-alih memanggil tool.

Loop juga memberlakukan batas langkah maksimum untuk mencegah eksekusi tak berujung dan menjaga proses tetap terkendali serta efisien.

Langkah 6: Menghubungkan tool ke aplikasi

Di app.py, kita memetakan nama tool yang diminta model ke metode peramban yang sebenarnya. Pemetaan tersebut diimplementasikan dengan fungsi make_tool_runner():

def make_tool_runner(browser: BrowserTools):
    def run(name: str, args: Dict[str, Any]):
        if name == "search_web":
            return browser.search_web(**args)
        if name == "open_url":
            return browser.open_url(**args)
        if name == "open_search_result":
            return browser.open_search_result(**args)
        if name == "extract_page":
            return browser.extract_page(**args)
        if name == "extract_flight_cards":
            return browser.extract_flight_cards(**args)

Fungsi ini bertindak sebagai dispatcher antara model dan peramban. Model hanya mengembalikan nama tool dan argumen, dan run() menerjemahkannya menjadi pemanggilan fungsi pada instance BrowserTools.

Sekarang agen dapat berhasil memanggil dan mengeksekusi tool, langkah berikutnya adalah membangun antarmuka pengguna yang menyatukan semuanya.

Langkah 7: Membangun UI Streamlit

UI Streamlit mengubah agen peramban menjadi aplikasi interaktif. UI mengumpulkan detail perjalanan dari pengguna, meluncurkan agen, melakukan streaming langkah perantara, dan akhirnya menampilkan ringkasan beserta tabel terstruktur dari opsi penerbangan teratas. Alur UI lengkap ini diimplementasikan dalam app.py.

st.set_page_config(page_title="GLM-5 Browser Agent", page_icon="", layout="wide")
st.title("GLM-5-Turbo Real-Time Browser Agent")
st.subheader("Trip Request")
origin = st.text_input("Origin", value="SFO")
destination = st.text_input("Destination", value="JFK")
depart_date = st.date_input("Depart date")
return_date = st.date_input("Return date")
adults = st.number_input("Adults", min_value=1, max_value=9, value=1)
natural_request = st.text_area(
    "Optional natural language request",
    value="Find the cheapest reasonable flight options and summarize the best ones.",
    height=120,
)
user_query = (
    f"Find flight options from {origin} to {destination} for {adults} adult(s). "
    f"Departure date: {depart_date}. Return date: {return_date}. "
    f"User preference: {natural_request}"
)
run = st.button("Run browser agent", type="primary", use_container_width=True)
if run:
    if not api_key:
        st.error("Please enter an API key in the sidebar.")
        st.stop()
    llm = LLMClient(provider=provider, api_key=api_key, model=model)
    event_box = st.container(border=True)
    result_box = st.container(border=True)
    all_events = []
    with managed_browser(headless=headless) as browser:
        agent = BrowserAgent(llm=llm, tool_runner=make_tool_runner(browser), max_steps=max_steps)
for event in agent.stream(user_query):
    all_events.append(event)
    with event_box:
        if event["type"] == "status":
            st.write(f"**Step {event['step']}** — {event['content']}")
        elif event["type"] == "tool_call":
            with st.expander(f"Step {event['step']} • Tool call: {event['tool']}", expanded=False):
                st.json(event["arguments"])
        elif event["type"] == "tool_result":
            with st.expander(f"Step {event['step']} • Tool result: {event['tool']}", expanded=False):
                st.json(event["result"])
        elif event["type"] == "final":
            st.success("Agent finished.")
final_event = next((e for e in reversed(all_events) if e["type"] == "final"), None)
final_text = final_event["content"] if final_event else ""
with result_box:
    st.subheader("Final Answer")
    parsed = parse_final_json(final_text)
    if parsed:
        st.markdown(render_final_markdown(parsed))
        options_df = build_options_dataframe(parsed)
        if not options_df.empty:
            st.subheader("Top options table")
            st.dataframe(
                options_df,
                use_container_width=True,
                column_config={
                    "Link": st.column_config.LinkColumn("Link", display_text="Open source"),
                },
            )
    else:
        st.markdown(final_text)

Begini cara UI Streamlit menyatukan semua komponen:

• Pemanggilan st.set_page_config() dan st.title() menentukan tata letak dan judul aplikasi secara keseluruhan, sementara widget input seperti st.text_input(), st.date_input(), st.number_input(), dan st.text_area() mengumpulkan detail perjalanan.
• Saat pengguna mengeklik tombol Run browser agent, aplikasi terlebih dahulu memeriksa apakah kunci API tersedia, lalu menginisialisasi LLMClient. Aplikasi kemudian membuat container terpisah untuk log agen perantara dan hasil akhir, serta membuka sesi peramban Playwright terkelola. Di dalam sesi tersebut, BrowserAgent mulai melakukan streaming event, dan UI menampilkan setiap pembaruan status, pemanggilan tool, dan hasil tool.
• Setelah agen selesai, aplikasi mengekstrak event akhir, mengurai JSON yang dikembalikan, dan merendernya. Ringkasan ditampilkan melalui render_final_markdown(), sementara build_options_dataframe() mengonversi opsi penerbangan terstruktur menjadi tabel dengan tautan sumber yang dapat diklik.

Dengan langkah ini selesai, Anda dapat menyimpan semuanya sebagai app.py dan meluncurkan aplikasi dengan:

streamlit run app.py

Proyek ini bekerja baik sebagai demo nyata karena menggunakan hasil penelusuran peramban aktual dan pemanggilan tool. Pada saat yang sama, ini masih prototipe. Situs penerbangan bersifat dinamis, halaman bisa berisik, dan beberapa platform menggunakan perlindungan anti-bot.

Logika ekstraksi saat ini sengaja bersifat heuristik, sehingga sistem tetap sederhana dan mudah dipahami.

Lebih penting lagi, penyiapan ini tidak terbatas pada penerbangan. Dengan beberapa penyesuaian, terutama memperbarui prompt dan logika ekstraksi, Anda dapat menggunakan kembali arsitektur yang sama untuk membangun agen untuk belanja, riset, agregasi berita, atau tugas apa pun yang memerlukan penelusuran dan peringkasan informasi langsung.

Kesimpulan

Dalam tutorial ini, kita membangun agen peramban real-time dengan GLM-5-Turbo, Playwright, dan Streamlit. Model bertindak sebagai perencana, tool peramban bertindak sebagai lapisan eksekusi, dan UI mengubah hasil terstruktur menjadi format yang ramah pengguna.

Hal terpenting yang perlu diingat adalah nilai tidak berasal dari model saja. Nilai muncul dari menggabungkan model dengan lapisan tool yang terkontrol dan loop agen.

Namun, ada beberapa perluasan untuk proyek ini. Anda dapat meningkatkan ekstraksi dengan menambahkan parser khusus situs, memperluas sistem ke hotel atau rencana perjalanan, atau mengintegrasikan preferensi pengguna seperti penerbangan langsung (nonstop) atau maskapai favorit. Ini dapat membantu Anda mengubah demo ini menjadi ekstensi peramban yang lengkap.