GLM-5-Turbo-Tutorial: Einen Echtzeit-Browser-Agenten bauen

Was ist GLM-5-Turbo?

GLM-5-Turbo ist darauf ausgelegt, Agenten-Workflows in realen Anwendungen zu unterstützen. Es bietet mehrere Denkmodi, sodass je nach Aufgabe zwischen schnellen Antworten und tieferem Schlussfolgern abgewogen werden kann. 

Für interaktive Anwendungen unterstützt es außerdem Streaming-Ausgaben, sodass Antworten Token für Token geliefert werden und die Nutzung reaktiver wirkt.

Eine seiner großen Stärken ist Function Calling: Das Modell kann externe Tools zuverlässig aufrufen. Es unterstützt zudem strukturierte Ausgaben wie JSON, was die Integration in Downstream-Systeme und UI-Schichten vereinfacht.

Für längere Workflows bietet GLM-5-Turbo Kontext-Caching. So bleibt die Performance über längere Interaktionen stabil, ohne dieselben Informationen ständig neu verarbeiten zu müssen. Über MCP (Model Context Protocol) kann das Modell außerdem an zusätzliche Tools und Datenquellen angebunden werden.

Gebaut für Agenten-Workflows

GLM-5-Turbo ist tiefgreifend für agentenartige Umgebungen optimiert, insbesondere Szenarien wie OpenClaw, bei denen Aufgaben mehrere Schritte, Tools und lange Ausführungsketten umfassen.

Diese Optimierung verbessert mehrere kritische Bereiche:

• Zuverlässigkeit beim Toolaufruf: Stellt sicher, dass das Modell konsistent die richtigen Funktionen aufruft.
• Zerlegung von Anweisungen: Erlaubt dem Modell, komplexe Aufgaben in kleinere Schritte zu zerlegen.
• Stabilität bei langen Ausführungsketten: Essenziell für mehrstufige Agenten.

In der Praxis ist GLM-5-Turbo schnell genug für interaktive Systeme und bleibt zugleich zuverlässig in mehrstufigen, toolgestützten Szenarien – genau das, was wir für Browser-Agenten brauchen.

GLM-5-Turbo Beispielprojekt: Einen Echtzeit-Browser-Agenten bauen

In diesem Tutorial erstellen wir eine Streamlit-App, die wie ein schlanker Reiseassistent funktioniert. Die Nutzerin oder der Nutzer gibt eine Abfrage ein wie „Finde die günstigsten Flüge von SFO nach JFK nächsten Freitag bis Montag.“ Das System wird dann:

• Das Web nach relevanten Flugseiten durchsuchen
• Diese Seiten öffnen und untersuchen
• Nützliche Informationen wie Preis, Dauer und Stopps extrahieren
• Die besten Optionen nutzerfreundlich zusammenfassen

Auf hoher Ebene besteht das System aus vier zusammenarbeitenden Komponenten.

• Erstens die LLM-Schicht (llm_client.py), die Chat-Completion-Requests an Z.AI oder OpenRouter sendet. 
• Zweitens die Browser-Tool-Schicht (browser_tools.py), die Aktionen wie Suchen, Seiten öffnen und Inhalte extrahieren bereitstellt. 
• Drittens die Agenten-Schleife (agent.py), welche Modell und Tools zu einem mehrstufigen Workflow verbindet. 
• Und schließlich die Streamlit-UI (app.py) als Oberfläche für Interaktion und Visualisierung.

Vollständiger Quellcode: https://github.com/AashiDutt/GLM5_TURBO

Schritt 1: Voraussetzungen

Bevor du die Anwendung baust, stelle Folgendes sicher:

• Python 3.9+
• Einen GLM-5-Turbo API-Schlüssel (Z.AI oder OpenRouter)
• Playwright für Browser-Automatisierung installiert

Installiere die benötigten Bibliotheken:

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

Die Datei app.py nutzt Streamlit, pandas, dotenv und eigene Module. browser_tools.py verwendet requests und Playwright. API-Aufrufe werden in llm_client.py mit requests ausgeführt.

Führe nun den folgenden Befehl aus, um eine .env-Datei zu erstellen, in der unsere API-Schlüssel liegen:

cp .env.example .env

Wähle deinen bevorzugten API-Endpunkt und übergib den API-Schlüssel:

.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

Ähnlich wird der Playwright-Browser aus diesem Konstruktor in browser_tools.py gestartet:

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()

Dieser Block initialisiert mit Playwright eine vollständig kontrollierte Browserumgebung, über die der Agent mit dem Web interagiert. 

Er startet die Playwright-Engine, öffnet einen Chromium-Browser, erstellt eine isolierte Sitzung und öffnet eine neue Seite, auf der alle Aktionen stattfinden. 

So kann der Agent reale Websites aufrufen, Live-Inhalte sehen und auf dieser Basis Entscheidungen treffen.

Schritt 2: Den LLM-Client einrichten

Als Nächstes richten wir unseren LLMClient ein, der sowohl direkte Z.AI-Nutzung als auch OpenRouter mit derselben Schnittstelle unterstützt. Der anbieterabhängige Endpunkt wird im Konstruktor gewählt. Da die Preise vergleichbar sind, kannst du für dieses Demo je nach Vorliebe beide APIs nutzen.

Hier ist das Kern-Setup:

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")

Dieser Initializer konfiguriert den LLM-Client, indem er den passenden API-Endpunkt (Z.AI oder OpenRouter) auswählt und die Schnittstelle konsistent hält. 

Er speichert API-Schlüssel, Modell und Endpunkt-URL, sodass der Rest des Systems das Modell nutzen kann, ohne sich um anbieterbezogene Unterschiede kümmern zu müssen.

Anschließend baut create_chat_completion() das Payload auf, hängt bei Bedarf Tools an und parst zurückgegebene Toolaufrufe. 

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"

Das Payload oben definiert die Anfrage an das Modell inklusive Gesprächskontext und Generierungsparametern. Durch das Anhängen von tools und tool_choice="auto" kann das Modell selbst entscheiden, wann externe Funktionen aufgerufen werden.

Schritt 3: Browser-Tools definieren

In agent.py definieren wir ein Tool-Schema, das das Modell aufrufen kann. Dazu gehören search_web, open_url, open_search_result, extract_page, extract_flight_cards, click, type_text und wait_for_text.

Hier ein Beispiel für eine Tool-Definition:

{
    "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"],
        },
    },
}

Dieses Schema sagt dem Modell, was das Tool macht, welche Eingaben es erwartet und wie es aufgerufen wird. Durch diese Definition kann das Modell dynamisch entscheiden, wann es das Web durchsucht, statt den Ablauf hart zu kodieren.

Auf Ausführungsseite sind diese Tools in browser_tools.py implementiert. Für dieses Demo nutzen wir DuckDuckGos HTML-Endpunkt und speichern die aktuellen Ergebnis-Links für die weitere Navigation.

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

Die Funktion search_web() oben führt eine schlanke Websuche durch, indem sie rohe HTML-Ergebnisse abruft und parst – ganz ohne kostenpflichtige Search-API. Die Ergebnisse werden intern gespeichert, damit der Agent in späteren Schritten darauf zugreifen kann.

Nachdem nun klar ist, wie der Agent mit dem Web interagiert, schauen wir uns an, wie er diese Tools tatsächlich nutzt, um per Websuche Fluginformationen zu extrahieren.

Schritt 4: Fluginformationen extrahieren

Sobald das Modell eine vielversprechende Quelle findet, muss es diese untersuchen. Wir können die Browser-Tools (aus Schritt 3) nutzen, um rohe Seitensnapshots zu extrahieren.

Schritt 4.1: Seiten öffnen und extrahieren

Wir verwenden das Tool open_url(), um eine Webseite zu laden und einen Snapshot mit Titel, URL und sichtbarem Text zurückzugeben.

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()

Für eine breitere Extraktion nutzen wir das folgende Tool extract_page(), das den Seitensnapshot und eine gesammelte Linkliste der aktuellen Seite zurückgibt.

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

Das ist nützlich, weil das Modell nicht immer blind klicken muss. Es kann erst den aktuellen Seitentext und verfügbare Links prüfen und dann den nächsten Schritt planen.

Schritt 4.2: Heuristische Flug-Extraktion

Ein zentrales Element des Demos ist die Funktion extract_flight_cards(), die den sichtbaren Seitentext nimmt und mit Regex-Mustern Preise, Zeiten, Dauern und Stopps erkennt.

Hier der Kern der Logik:

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)

Diese Regex-Muster fungieren als Detektoren für typische flugbezogene Signale. money_pattern erfasst Preise wie $299 oder USD 299, während time_pattern Abflug- und Ankunftszeiten erkennt. 

Ähnlich extrahiert duration_pattern die Reisedauer und stop_pattern erkennt, ob ein Flug nonstop ist oder Zwischenstopps hat. Für andere Anwendungsfälle kannst du vergleichbare Muster erstellen.

Sobald diese Signale definiert sind, durchsucht die Funktion kleine Textabschnitte und sucht nach sinnvollen Kombinationen. Bei einem Treffer baut sie eine strukturierte Flugkarte auf:

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,
}

Der obige Codeblock verwandelt Rohtext in eine strukturierte Repräsentation einer Flugoption. Er extrahiert den Preis, begrenzt Zeitangaben auf die relevantesten und geht mit fehlenden Feldern robust um. Das erhält den ursprünglichen Kontext und erleichtert das Debugging.

Mit dieser Extraktion kann der Agent unstrukturierte Seiteninhalte in nutzbare Daten überführen. Als Nächstes sehen wir, wie diese Daten durch die Agenten-Schleife fließen und mehrstufige Entscheidungen steuern.

Schritt 5: Agenten-Schleife

Das eigentliche Agentenverhalten steckt in der Klasse BrowserAgent (in agent.py). Diese Klasse sendet Prompt und Tool-Schema an das Modell, prüft, ob das Modell ein Tool aufrufen möchte, führt dieses aus, hängt das Tool-Ergebnis wieder in die Unterhaltung ein und macht weiter, bis eine finale Antwort erzeugt wird.

Hier ist die Hauptschleife:

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

Diese Schleife ist das Herzstück des Demos. 

In jedem Schritt erhält das Modell den aktuellen Gesprächsstand und entscheidet, was als Nächstes zu tun ist. Wenn Toolaufrufe zurückgegeben werden, führt tool_runner diese aus und die Ergebnisse fließen in die nächste Iteration ein. 

Der Prozess läuft weiter, bis das Modell statt eines Toolaufrufs eine finale Antwort liefert.

Die Schleife setzt außerdem ein Schrittlimit, um Endlosschleifen zu verhindern und den Ablauf kontrolliert und effizient zu halten.

Schritt 6: Tools mit der App verbinden

In app.py ordnen wir die vom Modell angeforderten Tool-Namen den tatsächlichen Browser-Methoden zu. Dieses Mapping ist in der Funktion make_tool_runner() implementiert:

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)

Diese Funktion dient als Dispatcher zwischen Modell und Browser. Das Modell liefert nur Tool-Name und Argumente, und run() übersetzt das in einen Methodenaufruf auf der BrowserTools-Instanz. 

Jetzt, da der Agent Tools erfolgreich aufrufen und ausführen kann, bauen wir die Benutzeroberfläche, die alles zusammenführt.

Schritt 7: Streamlit-UI bauen

Die Streamlit-UI macht aus dem Browser-Agenten eine interaktive Anwendung. Sie sammelt Reisedetails, startet den Agenten, streamt Zwischenstände und zeigt schließlich eine Zusammenfassung plus strukturierte Tabelle mit Top-Flugoptionen. Der komplette UI-Flow steckt in 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)

So bringt die Streamlit-UI alle Komponenten zusammen:

• st.set_page_config() und st.title() legen Layout und Überschrift fest, während Eingabewidgets wie st.text_input(), st.date_input(), st.number_input() und st.text_area() die Reisedaten erfassen. 
• Beim Klick auf den Button Run browser agent prüft die App zunächst, ob ein API-Schlüssel vorhanden ist, und initialisiert dann den LLMClient. Sie erstellt separate Container für Agenten-Logs und finale Ergebnisse und öffnet eine verwaltete Playwright-Browsersitzung. Innerhalb dieser Sitzung streamt der BrowserAgent Ereignisse, und die UI zeigt Status, Toolaufrufe und Toolergebnisse an.
• Nach Abschluss extrahiert die App das finale Ereignis, parst das zurückgegebene JSON und rendert es. Die Zusammenfassung wird mit render_final_markdown() dargestellt, während build_options_dataframe() die strukturierten Flugoptionen in eine Tabelle mit klickbaren Quellenlinks umwandelt.

Damit kannst du alles als app.py speichern und die App starten mit:

streamlit run app.py

Dieses Projekt eignet sich gut als echtes Demo, weil es reale Suchergebnisse und Toolaufrufe nutzt. Gleichzeitig ist es noch ein Prototyp. Flug-Websites sind dynamisch, Seiten können unübersichtlich sein und manche Plattformen setzen Bot-Schutzmechanismen ein. 

Die aktuelle Extraktionslogik ist bewusst heuristisch gehalten – so bleibt das System einfach und gut nachvollziehbar.

Wichtiger noch: Dieses Setup ist nicht auf Flüge beschränkt. Mit wenigen Anpassungen – vor allem bei Prompts und Extraktionslogik – kannst du dieselbe Architektur für Shopping, Recherche, News-Aggregation oder jede Aufgabe einsetzen, die Live-Informationen im Web durchsucht und zusammenfasst.

Fazit

In diesem Tutorial haben wir mit GLM-5-Turbo, Playwright und Streamlit einen Echtzeit-Browser-Agenten gebaut. Das Modell plant, die Browser-Tools führen aus, und die UI bereitet strukturierte Ergebnisse nutzerfreundlich auf.

Die wichtigste Erkenntnis: Der Mehrwert entsteht nicht allein durch das Modell, sondern durch die Kombination aus Modell, kontrollierter Toolschicht und Agenten-Schleife. 

Es gibt mehrere Erweiterungen für dieses Projekt: Du kannst die Extraktion mit seiten­spezifischen Parsern verbessern, das System auf Hotels oder Routen ausweiten oder Nutzerpräferenzen wie Nonstop-Flüge oder bevorzugte Airlines integrieren. Damit lässt sich dieses Demo zu einer vollwertigen Browser-Erweiterung ausbauen.