Eine Plattform für Alarmierung, Rufbereitschaften und Status­seiten.

Ich habe Web- und App-Entwicklung am bib International College studiert. Bei ilert lerne ich stetig dazu und kann meine Kenntnisse ausbauen, indem ich an Projekten arbeite, die unsere Plattform verbessern. Ich möchte von meinem Einstieg in das ilert-Team und die ersten Herausforderungen, mit denen ich konfrontiert war, erzählen und anderen angehenden Junior-Entwickler:innen oder Frontend-Entwicklern:innen, die ihre ersten Schritte in der Technologiebranche machen, einige Ratschläge geben.

Wie bekommt man seinen ersten Job als Frontend Entwickler:in?

Als mir mein Dozent vorschlug, ein Praktikum bei ilert zu machen, entschloss ich mich, eine Bewerbung hinzuschicken und hatte das Glück, angenommen zu werden. Während meines Praktikums arbeitete ich an der Entwicklung eines Dashboards – einer personalisierbaren Seite, auf der Kunden teambezogene Metriken sehen und Einblicke in verschiedene Aspekte ihres  Incident-Managements erhalten können. Diese praktische Erfahrung war toll, weil es das erste Mal war, dass ich an einem so großen Projekt in einer realen Situation arbeitete und dabei viele neue Technologien kennenlernte:

• React: Eine JavaScript-Bibliothek zum Erstellen von User Interfaces, mit der wir reusable UI-Komponenten erstellen konnten.
• TypeScript: Ein typisiertes Superset von JavaScript, das statische Typen hinzufügt und den Code robuster und leichter debugbar macht.
• Material UI (MUI): Ein beliebtes React UI-Framework, das Googles Material Design implementiert und vorkonfigurierte, anpassbare Komponenten bereitstellt.
• MobX: Eine State-Management-Bibliothek, die das Verwalten und Aktualisieren des States in React-Anwendungen vereinfacht.

Nach meinem Praktikum arbeitete ich zuerst als Werkstudent weiter an dem Dashboard, später als Junior Developer, und half, die erste Version für Kunden zu veröffentlichen. Aktuell bin ich alleinverantwortlich für das Dashboard-Feature (natürlich unter der Aufsicht meiner Senior-Kollegen), ich überwache seine Funktionalität und behebe Probleme. Es ist eine große Verantwortung, aber ich bin dankbar dafür, dass ich von Anfang an ein Projekt habe, das sich ständig weiterentwickelt.

Die erste Herausforderung

Nun zu den Challenges: Eine der größten Hürden war die Implementierung der Drag-and-Drop- und Resize-Funktionen für die neue Dashboard-Version. Die Suche nach einem geeigneten Package war schwierig, aber nach vielen Tests entschied ich mich für react-grid-layout.

Zunächst lief alles glatt, bis ich auf einen hartnäckigen Bug stieß: Die Widgets verschoben sich wie von Geisterhand stets in die Mitte des Bildschirms. Ich durchforstete den Code und versuchte alles, was ich gelernt hatte, aber ich fand das Problem nicht. Nach stundenlangem Suchen und wachsender Frustration wandte ich mich an einen Kollegen, der mir einen einfachen Tipp gab: “Follow the flow of the code.“ Dank diesem Hinweis konnte ich schließlich den Übeltäter identifizieren – ich hatte Zahlen in den Berechnungen der Widget-Positionen vertauscht, wodurch die Widgets außerhalb des Dashboards verschoben wurden. Sie wurden dann standardmäßig wieder in der Mitte des Bildschirms angezeigt.

Das Beheben dieses kleinen Fehlers löste das Problem sofort – und ich konnte wertvolle Erkenntnisse gewinnen. Ich habe gelernt, dass kleine Tipps sehr hilfreich sein können, wenn man feststeckt. Außerdem zeigte es mir, dass es oft besser ist, von einem Problem etwas Abstand zu nehmen und es später ausgeruht erneut anzuschauen, anstatt sich zu sehr in etwas zu verbeißen.

Worauf sollten Junior Developer:innen beim Berufsstart achten?

Zurückblickend, möchte ich einige Tipps weitergeben, die ich für Junior Developer:innen, Frontend Entwickler:innen oder Werkstudent:innen, die gerade ihre ersten Schritte in der Tech-Welt machen, für hilfreich halte:

• Kombiniert die komponentenbasierte Architektur von React mit den Stilkomponenten von MUI, um wiederverwendbare und lesbare UI-Elemente zu erstellen: Wir verwenden beispielsweise eine umfangreiche Sammlung gemeinsam genutzter React-Komponenten, wie zum Beispiel Tabellen und Auswahlfelder. Wir nutzen darüber hinaus das MUI-Theme, das Abstände, Paletten und Typografie verwendet, um ein einheitliches Design für alle Komponenten zu gewährleisten. Diese gemeinsam genutzten Komponenten und Themes beschleunigen den Programmierungsprozess erheblich und gewährleisten die Konsistenz in der gesamten App.

• Stellt Fragen mit Bedacht! Natürlich ist es wichtig, Fragen zu stellen, aber wenn ihr nicht weiterkommt, versucht zuerst, das Problem selbst zu lösen. Forscht nach und probiert verschiedene Lösungen aus, bevor ihr um Hilfe bittet. Diese Vorgehensweise verbessert nicht nur eure Fähigkeiten zur Problemlösung, sondern zeigt auch, dass ihr lernbereit seid. Ergreift stets die Initiative, um die Technologien, mit denen ihr arbeitet, zu erlernen und zu verstehen. Schaut euch Dokumentationen, Tutorials und andere Ressourcen an.
  ‍
• Verwende effizientes State-Management in deinen React-Anwendungen, z.B. MobX: Wir verwenden beispielsweise das Store Pattern, wobei wir gemeinsam genutzte Speicher hauptsächlich für unsere API-Aufrufe und einen Seitenspeicher verwalten, um diese API-Aufrufe zu kombinieren und gleichzeitig eine UI-Logik hinzuzufügen. Dieser Ansatz vereinfacht das State Management und macht den Code übersichtlich.
  ‍
• Vollzeit zu arbeiten, kann am Anfang stressig sein. Bleibt stark und erinnert euch daran, dass Herausforderungen Chancen für persönliches Wachstum bieten.

Wenn du am Anfang einer Karriere als Frontend Developer:in oder Junior Developer:in stehst und loslegen möchtest, schau dir die Karriereseiten von ilert an und checke, ob es eine passende Position für dich gibt. Ich wünsche dir viel Erfolg auf deinem Weg!

‍

CTO von ilert, Christian Fröhlingsdorf
‍"Wir heißen Ingenieure willkommen, die am Anfang ihrer Karriere stehen und wachsen möchten. Es gibt keine Zauberpille oder Abkürzung, um Erfahrung zu sammeln. Der beste Weg ist, Verantwortung für ein echtes Produkt oder Features zu übernehmen. Es ist ein Unterschied, ob man an etwas arbeitet, das nie produktiv geht, oder täglich Kundenfeedback erhält.“

In diesem Artikel erklären wir, wie wir eine experimentelle Chatbot-Umgebung eingerichtet haben, mit der wir LLMs dynamisch wechseln und das Verhalten KI-gestützter Funktionen innerhalb der ilert-Plattform besser vorhersehen können. Falls Sie KI-Funktionen mit einer Chatbot-Oberfläche zu Ihrem Produkt hinzufügen möchten, finden Sie hier eine vollständige Anleitung, wie Sie etwas Ähnliches bauen können.

Warum einen KI-Chatbot-Playground verwenden?

Bei ilert integrieren wir verschiedene KI-Funktionen, die eine Chat-Oberfläche nutzen, zum Beispiel die Erstellung von Dienstplänen und die Unterstützung unseres technischen Kundensupport-Teams durch KI.  Zur Optimierung der Entwicklung und Maximierung der Effizienz haben wir einen KI-Chatbot-Playground erstellt, mit dem wir zwischen verschiedenen großen Sprachmodellen wechseln können. Dieser KI-Playground dient als Tool, um Modelle anzuweisen, innerhalb bestimmter Parameter zu reagieren, sodass wir das Verhalten von Modellen vorhersagen, Probleme beheben und neue Funktionen und Verbesserungen testen können.

‍

Vor kurzem haben wir diesen Playground auf unserem Meetup vorgestellt, sodass die Teilnehmer sehen konnten, wie wir die Entwicklung von KI-Funktionen angehen. Der KI-Chatbot-Playground ist für Demonstrationszwecke ideal. Die Teilnehmer konnten ihn eigenhändig testen und so lernen, wie sie ähnliche Techniken in ihrer eigenen Arbeit anwenden können.  Der Playground ist mittlerweile für unseren Prozess zur Entwicklung von KI-Funktionen unerlässlich, da er es uns ermöglicht, Iterationen schnell durchzuführen und unsere Modelle auf der Grundlage von Feedback aus der Praxis und einer Vielzahl von Testszenarien zu optimieren.

‍

Anleitung zur Erstellung eines KI-Chatbot-Playgrounds

Einrichtung des AI-Playgrounds

To set up our AI playground, we’ll use Vite. It offers a quick step-by-step setup of a repository via CLI. Um unseren KI-Playground einzurichten, nutzen wir Vite.Es bietet eine schnelle Schritt-für-Schritt-Einrichtung eines Repositories über CLI.

‍

bun create vite

‍

Folgen Sie den Prompts und wählen Sie einen Projektnamen, das Framework und die Variante (Sprache + Transpiler).

Benutzeroberfläche erstellen

Nachfolgend finden Sie einen möglichen Ansatz für den Aufbau der Benutzeroberfläche Ihres Chatbots. Werden Sie ruhig kreativ und verleihen Sie ihr einen individuellen Touch.

‍

Ein KI-Playground sollte ungefähr die folgende Komponenten-Struktur haben:

• Headerbar
  • Logo
  • Heading
  • Action buttons
• Sidebar
  • Instructions
  • Model
• Chat
  • Messages
  • Input box

Komponenten

Wir haben in unserem Setup React als Framework mit Typescript gewählt, während MUI als unsere Komponentenbibliothek dient.

‍

Headerbar

Die Headerleiste enthält ein Logo, eine Überschrift und Action Buttons.

<Toolbar>
    <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2.5}>
        <IlertLogo />
        <Typography variant="h5">
            {translations.playground}
        </Typography>
    </Stack>
    <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={1}>
        <TokenInput />
        <LanguageToggle />
        <ThemeToggle />
    </Stack>
</Toolbar>

‍

Sidebar

Unsere Sidebar enthält Komponenten, mit denen Nutzer ein Modell auswählen und anpassen können. Die Anweisungen kommen in ein Texteingabefeld, während das Modell in einem Dropdown-Menü ausgewählt werden kann.

‍

<Stack direction="column" justifyContent="flex-start" alignItems="flex-start" spacing={3}>
    <TextField
        label={translations.system_instructions}
        multiline
        rows={3}
        placeholder={translations.instructions_placeholder}
        value={instruction}
        onTextChange={handleTextChange}
    />
    <Select
        value={model}
        label={translations.model}
        options={modelOptions}
        onSelectItem={handleSelectModel}
    />
</Stack>

‍

Chat

Hier interagiert der Nutzer mit dem KI-Assistenten. Wir benötigen ein Eingabefeld und Nachrichtenkomponenten, um den Chat darzustellen.

‍

<Container>
    <Stack>
        {chat.map((message, index) => (
            <Message key={index} message={message}  />
        ))}
    </Stack>
    <InputWrapper>
        <UserInput />
    </InputWrapper>
</Container>

‍

Hier ist ein Schnappschuss unseres fertigen Produkts, der die genannten Komponenten hervorhebt:

‍

Weitere Möglichkeiten

Der Aufbau eines eigenen KI-Playgrounds benötigt zwar einige Zeit, aber der Nutzen ist groß, denn es gibt unendlich viele Anwendungsmöglichkeiten. Sie können Ihre eigenen Datenquellen auswählen, sei es von Cloud-Anbietern wie OpenAI oder selbst gehostete Open-Source-Modelle.

‍

Um noch einen Schritt weiterzugehen, könnten Sie eine Exportfunktion erstellen oder die App in verschiedene Plattformen integrieren, zum Beispiel mit Electron für Desktop-Anwendungen. Weitere sinnvolle Funktionen wären ein Dunkelmodus-Umschalter, Autorisierungseingaben (zum Beispiel API-Schlüssel bei der Nutzung von Drittanbietern) oder eine Sprachauswahl.

Die Entwicklung eines KI-Proxys für unsere KI-Funktionen war eine der besten Entscheidungen, die wir vor einem Jahr getroffen haben. In diesem Artikel erklären wir, warum das so ist, und welche Herausforderungen wir dabei gemeistert haben.

Diese Gründe sprachen für die Entwicklung eines KI-Proxys

Viel zu enger Kontext

Die ersten Anfänge datieren zurück in das Jahr 2023, als wir gerade erst mit der Implementierung von KI-Funktionen in ilert begannen. Damals waren die Fähigkeiten von ChatGPT schon beeindruckend, aber noch weit von den Möglichkeiten entfernt, die die KI jetzt, Ende 2024, bietet. Zu dieser Zeit begann die generative KI gerade erst, ihren Wert in Geschäftsanwendungen zu beweisen, die ersten Anwender erforschten mögliche Anwendungsfälle im Kundenservice, bei der Content-Erstellung und bei der Datenanalyse. Die ursprüngliche Version von ChatGPT konnte aussagekräftige Erkenntnisse liefern und einige Arbeitsabläufe rationalisieren, hatte jedoch Grenzen bei der Bearbeitung komplexer, domänen- und kontextspezifischer Abfragen. 

‍

Der Kontext war eng - nur 4.000 Token. Unsere erste KI-gestützte Funktion war die automatische Erstellung von Störungsmeldungen. Dieses Feature hilft unseren Kunden, automatisch Nachrichten für ihre Statusseiten zu erstellen, um Nutzer über IT-Störungen zu informieren. Wir wollten uns nicht nur auf eine intelligent formulierte Meldung beschränken, sondern auch Informationen über die betroffenen Dienste einbeziehen und den Status dieser Dienste automatisch identifizieren und von betriebsbereit auf ausgefallen ändern. Unsere Kunden können Tausende von Diensten in ihren Konten haben, aber nur wenige sind tatsächlich von einer Störung betroffen, welche wir automatisch identifizieren müssen. Wir haben auch Kunden in China und Indien, wo die Wörter, die zur Bezeichnung von Diensten verwendet werden, sehr lang sein können. 4.000 Token waren also nicht genug.

Kann ich bitte JSON zurückbekommen?

JSON-formatierte Daten werden häufig für die Machine-to-Machine-Kommunikation (M2M) verwendet. JSON stellt sicher, dass Daten leicht geparst, validiert und über unsere Anwendungen hinweg übertragen werden können, wodurch die Konsistenz gewahrt und die Wahrscheinlichkeit von Fehlern bei der Datenverarbeitung verringert wird. Wie viele andere stießen wir jedoch bei den frühen Versionen von GPT-3 auf einige Herausforderungen im Zusammenhang mit der JSON-Verarbeitung.

‍

Diese Versionen waren in erster Linie für die Erzeugung von Gesprächstext und nicht für die Ausgabe strukturierter Daten konzipiert. Dies führte dazu, dass ChatGPT zwar JSON-ähnliche Antworten verstehen und generieren konnte, aber Probleme mit der strikten Einhaltung des JSON-Formats hatte. Selbst wenn wir also versuchten, die Abfrage in 4.000 Token unterzubringen, ließen die Antworten der frühen Modelle gelegentlich geschlossene Klammern aus oder fügten unerwarteten Text hinzu, was nachgelagerte Prozesse störte, die streng gültiges JSON benötigten. Einfach ausgedrückt, es funktionierte nicht.

Keine Agenten, keine Funktionen

GPT-Agenten, wie wir sie heute kennen, können komplexe Probleme in umsetzbare Schritte zerlegen, Aufgaben priorisieren und sogar Reaktionen miteinander verketten, um ein Ziel zu erreichen. Ohne diese Fähigkeiten mussten wir uns auf statisches Prompt-Engineering verlassen, bei dem jede Interaktion mit der KI isoliert war und präzise Aufforderungen erforderte, um auch nur mäßig komplexe Ergebnisse zu erzielen. Dies machte es schwierig, Funktionen zu entwickeln, die eine Entscheidungsfindung auf Grundlage des vorherigen Kontexts erforderten oder die sich dynamisch an Benutzereingaben anpassen mussten. Nehmen wir als Beispiel die KI-gestützte Erstellung von Dienstplänen: Wir speisen kontextspezifische Daten ein, um einen realisierbaren und flexiblen Kalender für die weitere Verwendung zu erhalten.

‍

Funktionen ermöglichen es dem Modell, über die einfache Textgenerierung hinauszugehen, indem es bestimmte, vordefinierte Aktionen direkt innerhalb eines Systems ausführt. Sie ermöglichen es der KI, mit externen Systemen oder Datenbanken zu interagieren und Daten basierend auf Benutzereingaben abzurufen oder zu aktualisieren. Funktionen befähigen die KI, direkt mit der API von ilert zu interagieren, wodurch Aufgaben wie das Abrufen von ilert-bezogenen Kontextdaten ermöglicht werden. Diese Funktionalität verwandelt die KI von einem passiven Antwortgeber in einen aktiven, aufgabenorientierten Assistenten, der komplexe Arbeitsabläufe autonom bewältigen kann. Es ist kaum zu glauben, aber vor zwei Jahren gab es noch keine Funktionen. 

‍

Zu guter Letzt wollten wir verschiedene LLM-Anbieter wie AWS Bedrock und Azure GPT4 nutzen. Da wir viele Kunden in der EU haben, konnten wir uns nicht nur auf die amerikanische OpenAI-API beschränken. Das Fehlen einer nativen Unterstützung für unsere betrieblichen Anforderungen gab den Anstoß zum Konzept eines KI-Proxys, einer zwischengeschalteten Ebene zur Verwaltung von Anfragen und Antworten über KI-Modelle hinweg und um sicherzustellen, dass jede Interaktion den Leistungsstandards von ilert entspricht. 

Diese Probleme lösen wir mit dem benutzerdefinierten KI-Proxy 

Protokollieren, überwachen und speichern

Anstatt KI-Anfragen direkt an OpenAI oder andere Modelle zu senden (und jedes Mal Gebühren zu zahlen), stellen wir sie über unseren benutzerdefinierten KI-Proxy. So gehen unsere KI-Anfragen – ob Sie nun eine Störungsmeldung für Ihre Kunden vorbereiten, Zeitpläne einrichten oder ein Post-Mortem-Dokument erstellen möchten – durch eine zentrale Anlaufstelle, bei der wir uns um alles Notwendige im Hintergrund kümmern: Protokollierung, Monitoring und ja, auch die Überwachung der wertvollen Tokens und der Kosten.

‍

Durch das Tracken der Token-Nutzung und anderen Kosten-Metriken können wir mit dem KI-Proxy unangenehme Überraschungen bei der Abrechnung vermeiden, und noch besser, wir erfassen alles, was rein und raus geht. Das bedeutet, dass wir die Daten nutzen können, um unsere Modelle zu optimieren, damit die KI mit jeder Interaktion besser wird. Wir protokollieren auch Performancedaten für verschiedene Modellversionen, um die Effektivität, Reaktionszeiten und Genauigkeit jedes Modells unter realen Bedingungen zu bewerten. Darüber hinaus verfolgen wir Leistungsdaten basierend auf dem Feedback unserer Kunden zu spezifischen Anwendungsfällen und deren zugehörigen Modellen, damit wir wissen, ob ein Anwendungsfall auf verschiedenen LLM-Modellen besser oder schlechter abschneidet.

‍

Ein wesentlicher Vorteil unseres KI-Proxys besteht darin, dass wir damit im Handumdrehen zwischen verschiedenen Large Language Modellen wechseln können. Dies ist zum Beispiel für unsere europäischen Kunden, die der Datenlokalisierung eine große Bedeutung einräumen, entscheidend. Viele unserer Kunden benötigen On-Premises-Modelle oder Cloud-Lösungen, die strenge Anforderungen an die Data Residency erfüllen, wie z. B. AWS Bedrock, das in bestimmten Regionen wie Frankfurt oder Stockholm betrieben wird. Durch die lokale Speicherung von Konversations-Threads und Sitzungsverläufen nur für die Dauer der Konversation in unserem Thread-Speicher können wir Anfragen dynamisch zwischen Anbietern wie Azure's GPT-4 und AWS Bedrock umleiten, ohne den Kontext zu verlieren. Circuit Breaker innerhalb des KI-Proxys überwachen die Antwortzeiten und die Konsistenz und leiten den Datenverkehr automatisch um, um eine nahtlose Benutzererfahrung und Zuverlässigkeit zu gewährleisten, wenn Modelle bestimmter Anbieter eine hohe Nachfrage verzeichnen oder zu langsam werden.