KI-Agenten im Einsatz | KI-Weihnachts-Seite

Die Entwicklung unserer Weihnachts-Webseite stand in diesem Jahr unter einem besonderen Stern – dem der Künstlichen Intelligenz (KI). Stets auf der Suche nach effizienteren und effektiveren Arbeitsmethoden wollten wir herausfinden, wie weit der neue Ansatz des Einsatzes von KI-Agenten in der Softwareentwicklung bereits ist, anstatt nur auf KI-Assistenz zu setzen.

Unser Ziel: Eine Webseite, bei der von der Musik bis zum Code alles KI-gestützt und KI-generiert entsteht – idealerweise mit so wenig persönlichem Eingriff wie möglich. Ein spannendes Experiment, das uns bessere Einblicke in den aktuellen Stand der Technologie liefert.

Die spontane Idee: Ein weihnachtliches Web-Abenteuer mit KI

Beim Brainstorming entstand die Idee einer winterlichen, weihnachtlichen Webseite mit einer interaktiven Schneekugel im Fokus.

Der Clou: Besucher können den Inhalt der Schneekugel durch KI individuell immer wieder neu generieren lassen. Zusätzlich sollten drei Versionen eines comspace-Weihnachtssongs im Hintergrund abgespielt werden. Wir wollten den Besucher nicht mit Consent-Management belästigen und entschieden uns daher für eine statische Webseite ohne Cookies, Tracking-Dienste oder Webfonts – also reine HTML-, CSS- und JavaScript-Technologie, komplett clientseitig und interaktiv.

KI-Agenten in Aktion: Wenn sich der Code von selbst schreibt

Wir wählten für unser Projekt den Editor Windsurf von Codium, der auf Visual Studio Code basiert und als einer der ersten mit einer brandneuen KI-Agenten-Funktion ausgestattet wurde. Dieser Agent ist in der Lage, eigenständig Ordner- und Dateistrukturen anzulegen und den kompletten Quellcode für kleine Projekte zu erzeugen. Als Sprachmodell nutzten wir Claude 3.5 Sonnet von Anthropic. Für die Autovervollständigung kam das Codium-eigene Coding-Modell zum Einsatz, das wir jedoch kaum nutzten, da unser Anspruch war, möglichst wenig manuell einzugreifen.

Die Kommunikation mit dem KI-Agenten erfolgt in natürlicher Sprache. Die großen Sprachmodelle verstehen mittlerweile viele Sprachen sehr gut, sodass es meistens unnötig ist, auf Englisch zu wechseln, auch wenn Claude diese Sprache am besten beherrscht.

Das Verständnis des KI-Agenten und sein Vorgehen sind immer gut nachvollziehbar, da er seine Schritte sehr ausführlich erklärt.

Die Quellcodeänderungen sind immer als Vorher-Nachher-Darstellung („Diff“) einsehbar und können manuell akzeptiert oder abgelehnt werden.

Die automatische Einrichtung des Projekts per KI verlief recht gut. Windsurf erstellte eigenständig die nötige Projektstruktur mit allen nötigen Ordnern, Datein, Konfigurationen usw. Nach dem ersten Durchlauf stand so bereits eine theoretisch lauffähige Website, die nach etwas Bugfixing durch den KI-Agenten auch erfolgreich gebaut und gestartet werden konnte.

API-Integration und weitere Herausforderungen

Besondere Anforderungen, wie z.B. die Erstellung einer Serverless Function für Netlify, die später zwei APIs ansprechen sollte, wurden direkt lauffähig und ohne nötige Nachbesserung umgesetzt.

Auch die Integration der APIs in die Serverless Function klappte relativ reibungslos, nachdem dem KI-Agenten alle nötigen Informationen, wie die API-Dokumentationen und die fachlichen Anforderungen deatilliert mitgeteilt worden waren.

Zu große Aufgaben führten manchmal dazu, dass manches verloren ging, so dass bei zunehmender Komplexität funktionsfähiger Code teilweise unnötig umgebaut oder ergänzt wurde.

Bei zu kleinen Aufgaben wurden zu viele Iterationen nötig, und es wurde zu viel umgeschrieben.

Designanpassungen führten manchmal zur Zerstörung bestehender Layouts, und responsive Ansätze für verschiedene Viewports stellten eine besondere Herausforderung dar.

Kontextverlust führte zu Widersprüchen, beispielsweise bei ausgelagerten CSS-Klassen, die dann nicht mehr berücksichtigt und stattdessen redundant inline erzeugt wurden.

Kreative Lösungen für Fehlerbehebungen

Fehlermeldungen im Browser übergaben wir dann für das Bugfixing direkt wieder an Windsurf, damit der KI-Agent die Bugs selbst beheben konnte. Bei optischen Problemen halfen Screenshots, um dem Agenten den defekten Zustand zu zeigen.

Einige von der KI generierte Lösungen waren nicht sehr performant, etwa der Code für die fallenden Schneeflocken. Zudem führten kleine gewünschte Designänderungen auch parallel zu unerwarteten und unbeabsichtigten Textveränderungen z.B. auf der „Über diese Aktion“-Seite. Es musste häufig die „Revert this Step“-Funktion genutzt werden, um unerwünschte Änderungen rückgängig zu machen.

Windsurf zeigte sich auch bei kreativen Lösungen hilfreich, wie einem Schneekristall-Symbol auf einem Button, und generierte eigenständig ein SVG.

Grundlegend betrachtet war die Arbeit mit dem KI-Agenten aber erfolgreich und hat doch recht schnell gute Ergebnisse geliefert.

Schneekugeln neu gedacht: Bildgenerierung mit Stable Diffusion

Für die Generierung der Schneekugel-Inhalte nutzten wir die Stable Diffusion API, die einen In-Paint-Modus bietet. Dieser ermöglicht es, nur bestimmte Bereiche eines vorgegebenen Bildes zu ersetzen. Da die Bildgenerierungs-API nur englischsprachig war, setzten wir Azure OpenAI ein, was wir bereits anderweitig im Unternehmen nutzen, um die Eingaben zu übersetzen und gleichzeitig auf unangemessene oder rechtlich kritische Inhalte zu prüfen. Dies reduzierte zwar den Spaßfaktor etwas – etwa, indem lustige Pokémon oder Superhelden nicht mehr generiert werden konnten – sorgte aber für einen sicheren und verantwortungsvollen Einsatz der KI.

KI als Komponist: Musikgenerierung mit ChatGPT und Suno AI

Die Entstehung unserer Liedtexte war ein spannender und kreativer Prozess, bei dem ChatGPT als interaktiver Sparringspartner fungierte. Durch gezieltes Prompting und die Eingabe von comspace-relevanten Inhalten aus dem Jahr 2024 gelang es uns, nach mehreren Überarbeitungsrunden, eine textliche Grundlage zu entwickeln, die unseren Vorstellungen entsprach. Die Herausforderung lag darin, die Inhalte der Strophen stimmig zu gestalten und das Versmaß konsequent beizubehalten.

Um unseren Weihnachtssong musikalisch zum Leben zu erwecken, nutzen wir Suno – ein Tool, das bis zu vier Minuten lange Songs generieren kann. Dieses KI-Programm half uns dabei, unseren Liedtext in verschiedene Musikstile zu übersetzen, um Weihnachtsstimmung zu vermitteln. Allerdings benötigte es einige Anläufe, um das gewünschte Ziel zu erreichen. Besonders herausfordernd war die Aussprache englischer Wörter in unserem ansonsten deutschen Songtext, mit der Suno immer wieder Schwierigkeiten hatte. Durch die phonetische Schreibweise dieser Wörter konnten wir das Problem nach und nach lösen, aber auch dies erforderte zahlreiche Versuche. Zudem ist die Funktionsweise von Suno AI noch etwas eingeschränkt, da es schwierig ist, nachträglich Textänderungen in einen bereits erzeugten Song einzufügen.

Ein bisschen Handarbeit

Natürlich ließ sich nicht alles mit KI umsetzen. So gestalteten wir das comspace-Logo mit Weihnachtsmütze manuell mit Inkscape. Das Favicon entliehen wir uns von unserer Hauptseite und die Erstellung der In-Paint-Maske für Stable Diffusion nahmen wir im Bildbearbeitungprogramm vor. Außerdem richteten wir manuell die nötigen Accounts und Tokens ein, das GitHub-Repository und das Netlify-Projekt.

Deployment und Betrieb

Für das Hosting und Deployment wählten wir Netlify, das sich ideal für unsere Anforderungen eignete. Die Webseite sollte statisch sein und über eine Netlify Serverless Function mit Azure und Stable Diffusion kommunizieren. Eine Herausforderung war die Laufzeit der Serverless Function, denn die Summe der Laufzeiten für Übersetzung, Filterung und Bildgenerierung lag bei ca. 19 Sekunden. Im Standard-Plan von Netlify kommt jedoch nach 10 Sekunden ein Timeout. Durch den Betrieb im Enterprise-Plan konnten wir dieses Limit auf 26 Sekunden erhöhen.

Erkenntnisse aus dem KI-Experiment

Die Umsetzungsdauer der Webseite war insgesamt geringer als bei einer klassischen manuellen Programmierung ohne KI-Unterstützung, wobei der Großteil der Aufwände für die Betreuung und das Prompting, also die Arbeitsanweisungen an den KI-Agenten, anfiel. Optimales Prompting hatte maßgeblichen Einfluss auf die Qualität der Ergebnisse. Wenn man sich am Anfang hinsetzt und detaillierte und gut konzipierte Arbeitsanweisungen erstellt, führt das zu besseren und konsistenteren Ergebnissen und reduzieren die Anzahl der notwendigen Iterationen.

Unser Fazit zum KI-Einsatz

Unser Experiment hat gezeigt, dass Künstliche Intelligenz bereits in bestimmten Szenarien wertvolle Unterstützung in der Softwareentwicklung bieten kann, aber es noch anstrengend ist, den Agenten auf die richtige Spur zu bringen. Obwohl die KI in vielen Bereichen hilfreich war, blieben menschliches Eingreifen und Überprüfen noch unverzichtbar.

Die Arbeit mit KI-Agenten in der Programmierung hat das Potenzial, die Umsetzungsgeschwindigkeit und den Aufwand in der Webentwicklung deutlich zu reduzieren. Es ist jedoch klar, dass noch viel Verbesserungsbedarf bei den Tools besteht, bevor eine intensive menschliche Betreuung nicht mehr nötig ist.

Wir sind gespannt auf die weitere Entwicklung bei KI-Agenten und den anderen KI-Integrationen in IDEs und Development-Stacks und freuen uns darauf, neue innovative Ansätze zu entdecken.