Gamechanger: Was Programmier-Agenten heute schon können
Wie sich in kurzer Zeit ein Verspätungs-Dashboard für die DB Bahn bauen lässt
Für jemanden wie mich sind die jüngsten Entwicklungen bei Coding-Agenten ein Gamechanger. Cursor Composer, bolt.new oder Replit Agent gibt es seit wenigen Monaten und Github kommt bald mit Spark. Diese Tools gehen auf unterschiedliche Weise über die etablierte Programmier-Assistenz per Generative AI (Github Copilot usw.) hinaus – sie können ganze Anwendungen eigenständig entwickeln, einzig gesteuert durch den verbalen Austausch mit dem User.
Ich habe in den letzten 15 Jahren an einigen Dutzend Softwareprojekten unterschiedlicher Größe mitgearbeitet; meistens den ganzen Weg von der Idee bis zur Veröffentlichung. Worauf ich immer angewiesen war, sind Entwickler:innen: Ich verstehe zwar konzeptionell einiges von Programmiersprachen, Softwareentwicklung, Server- und Webtechnologien – aber selbst programmieren gelernt habe ich nie über die Grundlagen hinaus.
So musste ich selbst recht simple erste Schritte einer Idee in Zusammenarbeit mit einer oder mehreren programmierenden Personen umsetzen. Das war meist zeitaufwändig und teuer. Die oben genannten Tools helfen mir nun, funktionierende Prototypen zu erstellen, UI/UX zu testen oder mal eben einen Scraper zum Datenerfassen zu erzeugen. Sie sind für mich insofern ideal, als ich meine Ideen ohnehin immer verbal kommunizieren musste – unterstützt durch Mock-ups und Skizzen. Die Coding Agents können per Chat plus ihren multimodale Fähigkeiten (Bildinterpretation) bedient werden. Im Hintergrund verwenden sie u. a. Technologie von Antrophic (Claude) oder OpenAI (ChatGPT). In gewisser Weise übertragen diese Tools das What-you-see-is-what-you-get WYSIWYG auf die Softwareentwicklung.
Beispiel Bahn-Verspätungen
Mich wundert immer wieder, dass kein Newsportal systematisch die Verspätungen der DB Bahn beobachtet. Klickzahlen wären garantiert und etliche datenjournalistische Beiträge ließen sich mit den Daten verwirklichen. Wir hatten das 2012 mit dem Zugmonitor für die SZ umgesetzt; leider wurde dieser nach etwa einem Jahr eingestellt.
Also machte ich mich dran und probierte, ob mir die Programmier-Agenten weiterhelfen könnten, ein Verspätungs-Dashboard zu bauen. Um das Interface, das sogenannte Frontend zu designen, nutzte ich VO. Dem Tool lässt sich verbal, aber auch ergänzt mit Skizzen oder Screenshots von Websites, der Auftrag erteilen, die entsprechende Nutzeroberfläche zu bauen. Das wird standardgemäß als Javascript-React Framework umgesetzt und greift auf ein bestimmtes Designschema zurück. Für meinen Zweck bat ich es, als ich zufrieden war, das Resultat in ein klassisches html-Format zu überführen. V0 lässt sich limitiert kostenfrei nutzen (Update: 21.11.24: V0 kann nun “create and run full-stack Next.js and React applications” - Link)
Der initiale Prompt für V0 lautete:
I need responsive dashboard, showing 9 cards (3*3 on desktop). The cards show information on delays of trains.
Each card shows the amount of delayed long distance trains (in red)/amount of all long distance trains, e.g. ICE/IC 4/9; a second row RE/RB/S amount of delayed short distance trains (in red)/amount of all short distance trains, e.g. IRE/RB/S 8/26.
Have at the right a big number in the height of both rows showing the average delay time in minutes of all delayed trains; write in small "min" beneath it.
When a card gets clicked, it opens the view station detail, which we define later. The view has a close button, which leads back to the dashboard.
The name of the 9 stations Berlin Hamburg München Köln Frankfurt Stuttgart Leipzig Hannover Freiburg.
Have a search bar for looking up an additional station above the cards.
V0 lieferte sofort ein recht brauchbares Interface; einigen Austausch für Details benötigte es noch. Dann lud ich das Ergebnis als HTML-Datei herunter. Und wechselte zu Replit Agent, um die eigentliche Anwendung zu produzieren. Praktischerweise war ich auf eine unkomplizierte Schnittstelle (API) zu den Echtzeitdaten der DB Bahn gestoßen, die dankenswerte von einem Entwickler zur Verfügung gestellt wird; ansonsten hätte ich die offizielle offene API von DB Bahn genutzt.
Replit bietet eine IDE (Integrated Development Environment), eine Software-Entwicklungsumgebung, die im Browser, als Desktopanwendung und sogar als mobile App läuft. Der Anspruch von Replit ist es, lästige Dinge wie das Veröffentlichen von Software im Web, das sogenannte Deployment und Hosting, zu vereinfachen. Vor rund zwei Monaten hat das Unternehmen den Replit Agent veröffentlicht. Seine Nutzung kostet derzeit zehn US-Dollar im Monat inklusive andere Dienste (man muss allerdings einen Jahresvertrag abschließen), was etwa drei bis vier Stunden Nutzung des Agenten pro Tag erlaubt – abhängig von der Menge der Operationen, die er durchführt. [Update: 14.11.24: Replit hat nun einen Bezahlplan eingeführt; der Agent unterstützt jetzt auch direkt React.js - Link)
Replit setzt dabei auf das Python-Framework „Flask“, das Funktionalitäten wie Datenbanken, Hintergrundprozesse, Benutzerkonten etc. ermöglicht. Für die Darstellung der Website (Frontend) wird HTML und reines Javascript („Vanilla“) verwendet. Für datenlastige Anwendungen greift Replit alternativ auf Streamlit zurück. Wie bei den anderen genannten Coding-Tools kommen fast wöchentlich Verbesserungen hinzu. Mittelfristig sollen auch andere Frameworks und Programmiersprachen möglich werden.
Der Prompt für Replit Agent lautete so:
A. I want to have responsive dashboard as single page application, showing 9 cards (3*3 on desktop). Don’t use streamlit, but Flask and Javascript. The cards show information on delays. When a card gets clicked, it opens the view station detail. This view is defined later in detail. The view has a close button, which leads back to the dashboard. For the design, use the pasted html file.
B. Get the departure data and the delays for all trains for all nine stations every five minutes in the background - it should happen on the server side. The delay for every train and its id should be saved. Don’t monitor the data for subway, tram, bus (STB, STR, Bus).Write the data to a database.
This is an example api call for the station Berlin, getting the next 20 minutes of departures, no api key needed, 100 calls per minute are allowed. https://v6.db.transport.rest/stops/8011160/departures?duration=20&linesOfStops=false&remarks=true&language=en
Name of the 9 stations and their ids (name,id;)Berlin, 8011160; Hamburg, 8002549; München, 8000261; Köln, 8000207; Frankfurt, 8000105; Stuttgart, 8000096; Leipzig, 8010205; Hannover, 8000152; Freiburg, 8000108;Die Formulierung von solchen Prompts lässt sich im Dialog mit ChatGPT oder Claude.ai erarbeiten. Etwa so: „Wie würdest du einen Prompt verfassen, der eine Coding App instruiert, eine Web-App auf Basis von Flask und Javascript zu entwickeln, die dies und jenes machen soll.“
Replit Agent reagiert auf den ersten Prompt mit Vorschlägen, was es als Zusatzfunktionen optional noch entwickeln könnte. Und legt dann los.
Ist man mit dem Ergebnis zufrieden, kann man die Anwendung dann „deployen“, also im Web voll funktionsfähig veröffentlichen. Hier ist das Bahn Verspätungen-Dashbboard, das so entstanden ist, zu finden.
Service-as-a-Software
Seit sechs Wochen arbeite ich recht viel mit Replit Agent. Pi mal Daumen würde ich sagen, mittlerweile macht es etwa 70 Prozent der Zeit das, was ich möchte. Zu Beginn waren es eher 50 Prozent. D.h. manchmal ist der Agent zu übereifrig und es geschehen Dinge, die ich nicht angefordert habe oder er verliert sich in Schleifen, verliert den Überblick. Etwa werden bestimmte Features entfernt oder Reihenfolgen von Darstellungselementen verändert. Andererseits schüttelt die Software manchmal wie selbstverständlich Funktionalitäten oder Interface-Elemente problemlos aus dem Ärmel. In einem halben Jahr, ggf. auf Basis von Modellen der nächsten Generation (GPT5 etc.), dürften Programmier-Agenten deutlich zuverlässiger und noch einfacher zu bedienen sein.
Nein, auch dann wird das Programmieren als Handwerk nicht überflüssig. Vor allem in sicherheitsrelevanten und datensensiblen Bereichen würde ich die Arbeit nie solchen Agentensystemen überlassen. Doch sehen wir hier Vorboten eines sich abzeichnenden Trends, der über „Agents“ hinausgeht (der Begriff, der sich 2025 in der Hype-Liga wie „Cloud“ etablieren dürfte). Das Paradigma Software-as-a-Service (SaaS) wird auf den Kopf gestellt: Künftig wird maßgeschneiderte Software für einen spezifischen Anwendungsfall erzeugt.
Wie etwa bei der neuen Funktion von Claude.ai, die nun Analysen von CSV-Datensätzen per Javascript-Diagramme programmiert. Gleichzeitig lässt Antrophic sein Sprachmodell mit Computer Use direkt auf die Steuerung einer Benutzeroberfläche los. Eine Idee, die Apple & Co auf unterschiedliche Art verfolgen: Agenten sollen Software eigenständig bedienen können. Und sie werden sich eben in bestimmten Fällen ad hoc eine Software schreiben, als Teil der Lösung einer spezifischen Dienstleistung: Service-as-a-software.