In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (LinkedIn), Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit gängigen LLM-APIs erstellt. Dabei geht er auf verschiedenste Stolpersteine ein, spricht über Streaming und warum der Kontext so wichtig ist.

Unser Sponsor

Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt!

Schaunotizen

[00:01:42] Chat-Applikationen mit gängigen LLM-APIs

LLM-APIs unterscheiden sich in zwei zentralen Punkten von klassischen APIs: Erstens sind die Antworten nicht deterministisch – das bedeutet, dass ein identischer Prompt bei jedem Request ein anderes Ergebnis liefern kann. Zweitens kommen die Antworten gestreamt an – oft in Form von Text-Chunks, die schrittweise per Server Sent Events (SSE) an den Client geliefert werden.

Ein typischer Request beginnt mit einem einfachen Prompt als Plaintext. Die Antwort wird dann dynamisch in Markdown-Form gestreamt. Doch genau dieses gestreamte Markdown bringt etliche Stolperfallen mit: Von XSS- und Prompt-Injection-Risiken über unvollständige Mermaid-Diagramme bis hin zu halbfertigen Flowcharts und weiteren seltsamen Markdown-Konstrukten, die ein LLM ausgeben kann.

Hier lohnt ein Exkurs in das Thema streambare vs. nicht streambare Dateiformate: HTML ist beispielsweise streambar, da der Browser Bit für Bit lesen und direkt rendern kann. Deshalb gibt es auch Metriken wie „First Meaningful Paint“ und Gründe dafür, warum ein Script-Tag lieber am Ende statt am Anfang einer HTML-Datei stehen sollte. Markdown hingegen ist nicht streambar – es braucht oft Kontext über mehrere Zeilen hinweg, bevor eine Darstellung sinnvoll möglich ist. Genau deshalb ist Markdown als Streaming-Format nicht ganz trivial zu handhaben.

Ein weiteres zentrales Thema ist der Kontext – oder vielmehr: wie wir mit ihm umgehen. Denn LLMs sind per se stateless. Das bedeutet: Jeder einzelne Request muss alles enthalten, was das Modell wissen soll – den Prompt, die bisherige Konversation, den System Prompt und ggf. auch hochgeladene Dateien. Aus Erfahrung wissen wir: Alle nutzen am Ende dieselben Modelle, aber wie der Kontext behandelt wird, entscheidet darüber, ob der AI-Assistent genial oder nutzlos wirkt.

Apropos Kontext: LLMs haben ein beschränktes Kontextfenster – je nach Modell unterschiedlich groß, aber immer begrenzt. Was tun, wenn dieses Limit erreicht ist? Strategien wie Sliding Windows (ältere Nachrichten rauswerfen), automatische Zusammenfassungen oder manuelle Priorisierung helfen weiter. Wichtig ist: Mehr Kontext kostet nicht nur mehr Tokens, sondern macht die Anwendung auch langsamer und teurer.

Unser Fazit: Die Komplexität solcher Systeme ist hoch – aber genau deshalb ist es so wichtig, mit kleinsten Prototypen zu starten. Sie helfen, zentrale Probleme frühzeitig sichtbar zu machen. Wer Lust bekommen hat, sich einmal ein wenig inspirieren zu lassen, dem sei der GitLab Duo Chat ans Herz gelegt. Es befindet sich als Open-Source-Projekt im GitLab Repository – man freut sich über jeden Merge Request.

Links

Server-sent Events auf MDN: Eine Einführung in Server-sent Events für die Einweg-Kommunikation vom Server zum Client.
HTMLPurifier: Ein Filter zur sicheren Bereinigung von HTML – ideal bei Benutzereingaben.
Chrome Platform Status: Sanitizer API: Die Sanitizer API erlaubt sicheres Einfügen von HTML-Inhalten direkt im Browser – ohne eigenes Parsen.
Tailwind CSS Typography: Tailwinds Lösung für schöne Standard-Typografie mit dem `@tailwindcss/typography` Plugin.
Content Security Policy auf MDN: Leitfaden zu CSP zur Vermeidung von XSS und zur Härtung von Webanwendungen.
LangChain: Ein Framework, das beim Bau komplexer Anwendungen mit Sprachmodellen hilft.
GitLab: Der Quellcode der beliebten DevOps-Plattform GitLab – vollständig open source.
Contributor Success Team bei GitLab: Das Team hinter GitLabs Bemühungen, externe Beiträge erfolgreich zu integrieren.

Warum Werbetexte langweilig sind und niemanden zu einer Handlung motivieren ("Salz-Problem")