ChatGPT und Copilot: AI-Code-Assistenten in der Webentwicklung

Inhaltsverzeichnis

Seit dem Release ist ChatGPT in aller Munde. Inwiefern der Hype abflaut, wird sich spätestens zeigen, wenn die öffentliche Testphase vorbei ist und OpenAI ein Preisschild an das Feature setzen wird. Dennoch lohnt sich ein Blick auf die Möglichkeiten für die tägliche Software-Entwicklung, die diese Technik und ihre Verwandten bieten.

Ich roll dann mal aus - Hilko Holweg

Hilko Holweg ist Frontend-Developer bei Heise Medien, wo es ihm besonders die Web-Performance angetan hat. Neben dem Frontend interessiert er sich auch für vieles mehr, das mit Technik zu tun hat. So schrieb er beispielsweise für die c't einen Artikel über einen digitalen Assistenten mit Offline-Spracherkennung auf Basis des Raspberry Pi.

ChatGPT

ChatGPT kann derzeit kostenlos mit einem OpenAI-Account genutzt werden. Es ist ein Chat-Interface zum Sprachmodell GPT 3.5, das auf möglichst natürliche Dialoge hin optimiert ist. Das Thema für diese Dialoge ist dabei nicht vorgegeben. So ging es auch schnell los, dass alles mögliche im Internet ausprobiert wurde, unter anderem es für die Softwareentwicklung einzusetzen. ChatGPT ist mit dem Internet von 2021 trainiert und kennt daher keine (Software-)Entwicklungen, die seither stattgefunden haben. Dennoch kann es ein hilfreiches Tool sein, wenn man weiß, die richtigen Fragen zu stellen. Testweise haben wir einmal eine kleine Frontend-Aufgabe durchgespielt.

Das "Holy Grail Layout" – ohne dabei näher auf UI oder Web-Entwicklung einzugehen – war ChatGPT also schonmal bekannt (s. Abb. 1).

In der Folge war es auch in der Lage, das Ganze direkt in Code umzusetzen und dabei Tailwind für das Styling zu verwenden – Klassenerklärungen gab es ungefragt noch obendrauf (s. Abb. 2). Auch wenn ChatGPT in der Erklärung bereits um die Responsiveness wusste, war das im Codebeispiel noch nicht so gut umgesetzt: Die Navigationsspalte ist in der Breite festgezurrt, was bei Smartphones dann problematisch wird. Footer und Header sind mit festen Höhen ausgestattet. Davon abgesehen ist das Beispiel aber ein brauchbarer Start.

Der Einsatz von Flexbox fühlte sich nicht ganz richtig an. Das sollte besser mit CSS Grid umgesetzt werden. Kann es das auch? Aber natürlich (s. Abb. 3). Header und Footer behalten die feste Höhe, jedoch ändern sich der Content-Bereich und die Navigation in der Breite. Vielleicht keine ideale Lösung, aber schonmal brauchbarer im Hinblick auf das responsive Verhalten als die vorige Flexbox-Umsetzung.

Heutzutage wird viel in React gemacht, also hätten wir das Ganze gerne in eine einfache React-Komponente übertragen. Dabei sollen die bisher statischen Inhalte noch als Parameter übergeben werden können. (s. Abb. 4)

Ungefragt gibt es zum angepassten Code auch noch gleich ein Beispiel für die Verwendung oben drauf – hilfreich, wenn man neu im Thema ist. Ein kleiner Fehler hat sich in ChatGPTs Beispiel eingeschlichen: Das <nav> wird doppelt ausgegeben, da es im Attribut übergeben wird und nochmal im Layout selbst um die Ausgabe des Attribut-Werts gesetzt ist. Der Fehler ist jedoch leicht zu entdecken und einfach zu korrigieren.

Zuletzt wollen wir ChatGPT noch einen Umbau machen lassen. Die Navigation soll direkt als ungeordnete Liste ausgegeben werden und mit einem Objekt befüllt werden (s. Abb. 5). Auch das klappt wie erwartet inklusive des Beispiels zur Verwendung.

Man braucht sich nicht in mehreren Iterationen in einem Dialog mit ChatGPT zum Ziel hangeln, sondern kann stattdessen eine längere Anfrage mit allen Bedingungen stellen. Hier sieht man allerdings auch gut, dass ChatGPT nicht unbedingt immer zum selben Ergebnis kommt, in diesem Fall auch zu falschen Ergebnissen. Funktioniert der React-Anteil der Antwort noch, sieht das für den Layout-Teil schon ganz anders aus. Der vertikale Platz wird durch ChatGPTs Umsetzung einfach in vier Zeilen eingeteilt, von denen drei über die gesamte Breite gehen. Das hat nichts mit einem Holy-Grail-Layout zu tun und dürfte auch sonst nur selten zu einem ansprechenden Website-Layout führen. Darüberhinaus waren im vorigen Beispiel semantisch passende HTML-Tags verwendet worden, hier nun wird lediglich noch eine <div>-Suppe präsentiert. (s. Abb. 6)

Copilot

Copilot ist ein Produkt von GitHub, das anfangs auch in einer kostenlosen Testphase war. Es basiert auf OpenAIs Codex und wurde mit öffentlichem Code auf GitHub trainiert. Inzwischen ist die Testphase vorbei und GitHub verlangt 10 US-Dollar im Monat oder 100 US-Dollar im Jahr für die Nutzung.

Copilot funktioniert dabei wie eine Auto-Suggestion, die möglichst schlaue Vorschläge machen soll. Man tippt also erstmal Code los und Copilot schlägt anschließend vor, wie es weiter gehen könnte. Gefällt einem, was man ausgegraut im Editor sieht, bestätigt man den Vorschlag und schon ist es im Editor. Alternativ kann auch ein Kommentar mit der Funktionsbeschreibung in den Editor getippt werden und Copilot versucht daraus einen Vorschlag abzuleiten.

Die Vorschläge können dabei kleine Code-Schnipsel sein oder komplette Funktionen umfassen. Laut GitHub funktioniert Copilot am Besten, wenn das Projekt prinzipiell gut organisiert ist, Funktionen und Parameter sinnvolle Bezeichnungen haben und es gut formulierte Docstrings gibt.

Nutzen aktuell

Mit Copilot haben einige Kolleginnen und Kollegen in der Abteilung während der Testphase bereits Erfahrungen gesammelt. Ihren Aussagen nach hilft Copilot vor allem bei Boilerplate-Code. Es geht einfach schneller voran, wenn man gewisse Dinge nicht selbst tippen muss. Das deckt sich auch durchaus mit dem Werbeversprechen von GitHub: "Spend less time creating boilerplate and repetitive code patterns, and more time on what matters".

Jedoch helfen die Vorschläge meist nichts, wenn man den Code nicht prinzipiell auch selbst versteht. Erstmal natürlich, weil Copilot "nur" vervollständigt. Hat man also noch gar keinen Code selbst geschrieben, gibt es auch nichts zu vervollständigen. Aber auch wenn Copilot funktioniert, wie angedacht, sind die Vorschläge nicht immer nützlich. Die Vorschläge variieren zwischen "Totalausfall", "kann so stehen bleiben" und – dem wohl häufigsten Fall – "braucht etwas Anpassung". Für Letzteres ist natürlich eigenes Codeverständnis vonnöten.

Copilot ist also kein Tool, dass Menschen ohne Kenntnisse in die Lage versetzt, plötzlich zu programmieren. Aber der Name von GitHubs Produkt gibt ja auch bereits den Hinweis, dass es eben nur ein "Co-Pilot" ist und immernoch einen "Pilot" braucht.

Bei ChatGPT sieht es schon anders aus. Im Netz finden sich Beispiele, bei denen Leute ohne Programmierkenntnisse ChatGPT einfach nur geschrieben haben, was sie haben wollen. Bei Fehlern wurden die Fehlermeldungen wieder an ChatGPT gereicht, um dann Hinweise zu bekommen, was die Ursache sein könnte. Ohne Programmierkenntnisse ist allerdings die Einschätzung der Qualität des zurückgegebenen Codes kaum möglich. Letztlich wird es da auf ein "funktioniert" oder "funktioniert nicht" hinauslaufen.

Bisher haben wir selbst ChatGPT nicht in einem produktiven Einsatz gehabt, alleine schon, weil noch gar nicht klar ist, was es später kosten wird und ob der Nutzen dann noch ausreichend sein wird.

Auch muss man bedenken, dass die Systeme derzeit Einschränkungen haben. Copilot gibt an, am Besten auf Englisch zu funktionieren, da die öffentliche Code-Basis bei GitHub zum Großteil Englisch ist und es damit trainiert wurde. Außerdem gibt es für neue Frameworks oder neue Versionen davon kaum öffentlichen Code, sodass man längere Zeit nur Vorschläge für einen älteren Stand bekommt.

Wie bereits erwähnt hat auch ChatGPT das Problem der Aktualität, da es im Jahr 2021 trainiert worden ist und daher keine Vorschläge anhand von Code machen kann, der danach veröffentlicht wurde. ChatGPT verhält sich außerdem wie der stereotype überselbstbewusste Coder-Dude, der mit voller Überzeugung auf nahezu jede Frage etwas antwortet, egal wie umfangreich der eigene Kenntnisstand zu dem Thema eigentlich ist und der gar nicht weiß, was er alles (noch) nicht weiß. Die Antworten von ChatGPT sind daher durchaus kritisch zu hinterfragen, da ChatGPT tatsächlich nichts vom Inhalt versteht, sondern lediglich Antworten nach gelerntem Muster baut.

Ausblick

Copilot, ChatGPT und weitere Produkte dieser Art werden nützlich sein, und es wird in Zukunft sicherlich wichtiger werden, Prompts gut formulieren zu können, um die besten Antworten zu bekommen.

Ein möglicher Einsatzzweck könnte sein, dass ChatGPT einem beim ersten Setup hilft, wenn man neu in einem Framework ist, oder nur erstmal einen Prototyp braucht. Danach programmiert man selbst weiter und nutzt Copilot zur Unterstützung. Außerdem könnte ein trainiertes Modell mit der eigenen Code-Basis nützlich sein, um bei Refactorings zu helfen oder darauf hinzuweisen, wenn es ähnlichen Code bereits gibt, von dem man selbst eventuell gar nichts weiß.

Wir sind jedenfalls gespannt auf die neuen Entwicklungen und sehen unsere Jobs noch nicht gefährdet. Wie seht ihr das Thema? Habt ihr schon eigene Erfahrungen gemacht? Oder noch Tipps für andere Tools in dieser Richtung? Wir freuen uns auf eine lebhafte Diskussion im Forum!

(rme)