Vibe Coding mit Copilot
In den letzten Monaten bin ich immer wieder auf das Astro Framework aufmerksam geworden. Astro erzeugt statische Seiten oder Server-Rendered-Apps und ist gut für Web Scraping Projekte geeignet.
Also nutze ich die Gelegenheit und gehe “full vibe coding”. Zuerst wird meine IDE (Visual Studio Code) mit Copilot Chat verbunden. Im weiteren Projektverlauf habe ich immer mehr Funktionen freigegeben, bis Copilot auch das Terminal nutzen konnte, für CLI Kommandos, Debugging und zur Git-Integration.
Was ist Vibe Coding?
Vibe Coding (oder Vibecoding) bezeichnet eine Art der Softwareentwicklung, bei dem der Quellcode fast ausschließlich durch die Eingabe von Prompts erzeugt wird. (siehe wikipedia)
Hier ein subjektiver Erfahrungsbericht...
Technology Stack
Astro Framework
Vercel Hosting/Deployment
Supabase Datenbank & Auth.
Resend als E-Mail-Service
GitHub Quellcodeverwaltung
Visual Code Studio IDE
Github Copilot
Vorgeschichte
Seit 2020 nutze ich ein selbst entwickeltes Tool, dass Webseiten automatisiert auf Fehler bzw. auf Verfügbarkeit prüft. (Status Codes)
Realisiert mit: Meteor.com
Meteor Apps sind hauptsächlich SPA (single page application), für Real-time Webanwendungen mit integrierter API für Datenbankzugriffe.
Astro.build ist ein static site generator, mit dem man auch sehr gut Dienste programmieren kann, die Web Scraping ermöglichen.
Das Meteor Tool habe ich damals ping.js genannt - für das neue Projekt, finde ich "page watcher" passend.
Was soll das page watcher Tool können?
- Eine Webadresse wird ausgelesen und der Quellcode in einer Datenbank gespeichert.
- Beim nächsten Aufruf wird der aktuell eingelesene Code, mit der Version in der Datenbank verglichen.
- Gibt es Veränderungen am Quellcode, wird eine Mail gesendet, in der die Änderungen aufgeführt werden.
- Das ganze wird mehrmals am Tag als sog. Cronjob, automatisiert ausgeführt.
- Das Frontend zeigt die Liste aller Adressen an und wie lange der letzte Check zurückliegt.
- Jede Zeile soll einen “check now” Button erhalten, mit dem man jederzeit einen manuellen Check durchführen kann.
- Der Cronjob kann über das Frontend gesteuert und konfiguriert werden.
Natürlich ist das nicht der Prompt der dann alles dahin zaubert.
copilot experiences
1. Projekt Kick-Off mit Astro und Copilot
Voraussetzung: Um ein lokales Astro Projekt anzulegen, muss bereits Node.js installiert sein.
Die Projektinitialisierung erfolgt über die Konsole mit dem Befehl: $ npm create astro@latest
Im leeren Projekt, bzw. in den generierten Verzeichnissen und Dateien, beginne ich mir erstmal selbst einen Überblick zu verschaffen. Wo ist die eigentliche Startdatei, die den Inhalt des Frontends ausgibt, wo werden API Schnittstellen definiert und was läuft auf dem Server und was auf dem Client?
copilot experiences
Links zur Dokumentation. Zuerst prüfe ich, ob mein Vorhaben überhaupt
mit Astro realisierbar ist.
Vorgehen in Kurzform:
Im Verzeichnis “public” lege ich eine CSV Datei, mit 3 URLs an, so brauche ich erst mal keine Datenbank.
Jetzt lasse ich mir eine erste kleine Funktion "fetchAndSave( ) " schreiben, die alle URLs der Liste nacheinander aufruft und den Inhalt der jeweiligen Seite in die CSV Datei schreibt.
Der Inhalt wird auf dem Frontend als Tabelle ausgegeben. Das Layout habe ich vorher angelegt und Copilot liefert mir die Programmschleife, die alle vorhandenen Tabellenzeilen ausliest und anzeigt.
Als nächstes wird die Funktion erweitert. Wenn im weiteren Aufruf schon Daten in der CSV stehen, vergleiche den Inhalt auf Unterschiede.
- Installation der Diff-Library (npm package/jsdiff). Diese bietet eine grafische Darstellung der geänderten Abschnitte, die wir später in der E-Mail versenden können.
- Das Versenden von E-Mails und der Cronjob ist für den ersten Test nicht ausschlaggebend. Trotzdem hatte ich auch das implementiert.
Das System läuft stabil und erkennt jede Änderung, die ich durchgeführte habe.
copilot experiences
Im nächsten Schritt aktiviere ich weitere Features, wie "Copilot in the CLI" (Copilot für die Kommandozeile) und "Copilot in GitHub.com" (Copilot Unterstützung für die Quellcodeverwaltung) .
Am interessantesten ist der Copilot Coding Agent, der aber noch im sog. "public preview" befindet (Stand August 2025). Das bedeutet die Software ist noch nicht fertig und hat noch Fehler.
GitHub License Terms: "Pre-release software may not operate correctly. It may delete your data, corrupt your data, or have other bugs. It also may not work the way a final commercial version of the software will. "
GitHub User Account: Copilot Einstellungen
2. Das lokale Projekt muss in die Cloud
Soweit so gut. Die Software nur lokal auf meinem Rechner auszuführen, macht aber wenig Spaß. Auf einem Server der 24/7 verfügbar ist, kann die Software ihr volles Potenzial entfalten. Voller Enthusiasmus stürze ich mich auf die unterschiedlichen Deploymentlösungen.
Folgende Komponenten werden für die Umsetzung benötigt:
Die Cloud für das eigentliche Astro Projekt, eine Datenbank um die Ergebnisse zu speichern und einen Dienst um E-Mails zu versenden.
Ich habe mich für folgende Micro Services entschieden.
- Vercel für das Hosten der Anwendung
- Supabase als Datenbank und User Auth
- Resend zum Versand von E-Mails
Nachdem ich bei allen Diensten registriert bin und ich mich eingeloggt habe, kann ich die nötigen API Keys Erzeugen.
Supabase dient als zentrale Autorisierungsstelle, wo alle Verbindungen zusammenlaufen.
copilot experiences
Man sollte immer direkt alles rückgängig machen lassen oder wenn nötig manuell Löschen, was nicht gebraucht wird. Den gleichen Effekt hatte ich, als ich im späteren Verlauf die lokale Supabase installation nicht direkt entfernt habe. Dadurch wurden unnötig weitere Umgebungsvariablen und policies festgelegt und die Komplexität unnötig vergrößert.
Insbesondere Funktionen die von Copilot angelegt werden, um Fehler einzugrenzen und zu beheben, sollten hinterher entfernt werden. Hier lohnt sich auch ein zweites Prompt um nachzufragen, ob mit Sicherheit alle Reste aus dem Projekt entfernt sind.
Die Supabase Datenbank richte ich zunächst ohne viel Restriktionen ein, damit es erst mal möglichst wenig potenzielle Fehlerquellen gibt.
Ich muss einen Benutzernamen und eine E-Mail Adresse festlegen, ohne geht es an der Stelle nicht weiter. Man kann übrigens auch 2 getrennte Datenbanken einrichten, eine für Development und eine für Produktion. Ich entscheide mich aber nur für eine Datenbank, sowohl für die lokale Entwicklungsumgebung, wie auch später online.
Die Tabellen für die Web Adressen und die Scann Ergebnisse, lassen sich einfach im Supabase Backend anlegen. (Die Tabellen für den Cronjob sind erst später dazugekommen.) Damit sind hier erst mal alle nötigen Grundlagen geschaffen.
Ein großes Arbeitspaket besteht jetzt darin, alle API-Routen so umzuschreiben, dass Daten nicht mehr in die lokale Datei, sondern in der Datenbank gespeichert werden. Da versuche ich abzukürzen...
Supabase Backend: Datenbank Schema
copilot experiences
Im nächsten Prompt erkläre ich kurz "Ich benötige ein Feld zur Eingabe der URL, die dann in der Datenbank gespeichert werden soll. Die Funktion bleibt die gleiche nur die Speicherung soll in die Datenbank erfolgen. Neben der URL müssen auch die E-Mail Adresse und der Username gespeichert werden."
3. Zuerst steht die Quellcodeverwaltung per Git auf dem Pflichtenheft
$ git init
Wenn alles fertig konfiguriert ist, wird das lokale Astro Projektverzeichnis mit dem Kommando $ git push in das Repository geschoben.
- Vercel wird mittels API Key mit GitHub verbunden, sodass bei einem Push automatisch ein Deployment erfolgt.
- Der Code wird später kompiliert und in einer Instanz auf Vercel ausgeführt. In 2 Minuten ist dann alles in Produktion.
- Die eigene Seite ist auf einer Sub-Domain bei Vencel.com erreichbar.
Features der Github KI:
Autocomplete = Vervollständigung von Programmcode
Chat = Fragen & Erklärungen im Projektkontext
Terminal = CLI-Hilfe
PRs = Dokumentation & Reviews
Workspace = KI baut ganze Projekte
Copilot-Programmier-Agent
Voice = Sprachsteuerung (noch Preview)
4. Cloud Services fertig Einrichten und Verbinden
Beim Verbinden der Micro Services (Vercel, Supabase und Resend) ist Copilot äußerst nützlich, die nötigen Environment-Variablen einzutragen und sich in den Menüs der Anbieter zurechtzufinden.
Aber wirklich beschleunigen kann man den Prozess, wenn man zulässt das Copilot CLI Kommandos absetzt.
Alle Services können über das Terminal mit speziellen CLI Kommandos konfiguriert werden. Das wird im späteren Verlauf sehr ausgiebig genutzt werden.
Auch das remote Repository muss mit den benötigten API-Keys ausgestattet werden, die in einem geschützten Bereich gespeichert werden müssen. Dieser ganze Themenkomplex (API-Key-Management) wird sehr schnell von Copilot umgesetzt und von mir abgehakt. Da sollte man später aber noch mal selbst kontrollieren, dass keine Keys zugänglich sind. Das kann zum Beispiel "alter" Code sein, der Copilot zum Debuggen genutzt hat und der danach nicht vollständig gelöscht wurde.
Eine wichtige Funktion fehlt noch, der automatisierte Check mittels Cronjob. Auch dazu gibt es unterschiedliche Lösungsansätze - ich wähle einen Dienst der in Supabase integriert ist. Zwei Cronjobs am Tag sind kostenlos.
copilot experiences
Das Editieren und Verschieben von Codeblöcken wurde ohne größere Fehler durchgeführt. In manchen Fällen musste ich zweimal den Code analysieren und anpassen lassen.
Elemente wie den Cronjob Counter zum nächsten Job und den dazugehörigen Button zum manuellen Auslösen habe ich mir von Copilot erstellen lassen.
Bei der Optimierung für kleine Bildschirmgrößen muss man schon sehr wilde Prompts erstellen, um für jede Bildschirmgröße ein präzises Layout zu gewährleisten. Zum Glück ist mein Layout sehr simple und ich muss nicht viel Optimieren.
Copilot Chatverlauf
Cloud Services
page watcher v1.0
5. User Authentication & Login Management
Best Practice ist die Nutzung eines externen Auth-Providers,
ich habe mich für Supabase Auth entschieden.
Also gut - ich habe ja bereits am Anfang meinen eigenen User in Supabase angelegt, kann ja nicht mehr so viel sein ;) Den Copilot lasse ich eine Login Seite erstellen, damit alle ohne Account ausgeschlossen werden. Der Login funktioniert auch direkt aber die angezeigte Liste mit den URLs bleibt jetzt leer.
Auch die sog. Row-Level Security (RLS) per User ID muss konfiguriert werden, damit nur der angemeldete Benutzer den eigenen Inhalt sehen und ändern kann. Als nächstes werden neue Datenbank Policies für insert, update und delete angelegt.
Die URL-Tabelle muss um die Zeilen "user-id" und "email-adresse" erweitern werden.
Erst jetzt kann der Login funktionieren. Somit sind jetzt auch weitere Benutzerkonten möglich, die ihre eigene URL-Liste pflegen können.
copilot experiences
Nach ein paar Rettungsversuchen von Copilot habe ich mich dafür entschieden, alle Benutzerrechte neu anzulegen. Danach hat der Login lokal wie auch in der Cloud funktioniert.
Auch beim Erweitern des Frontends konnte Copilot viele Aufgaben erledigen. Wie zum Beispiel das Anlegen eines Buttons “check now” für jede URL.
Beim ersten Versuch überschreibt er mir allerdings, ohne Grund den kompletten CSS Style und ändert das Layout. Nachdem ich das per Prompt unterbunden habe, tritt dieses Verhalten nicht mehr auf.
Je komplexer die Sachlage ist, desto längere werden die Prompts - manchmal ist es schneller selbst erledigt. Je nachdem wie routiniert man in diesem Bereich arbeitet.
Hier hat sich Copilot schwergetan, die User Verwaltung sowohl lokal wie auch in der Cloud um die sicherheitsrelevanten Methoden zu erweitern. Analysen und Änderungen wurden mehrfach durchlaufen, bis die Kommunikation zwischen server, client und Datenbank fehlerfrei funktioniert hat.
6. Ergebnis - KI Coding Erfahrungen
PRO / CONRTA / TIPPS /
- Verkürzte Entwicklungszeit - und alle damit verbundenen possitive Effekte. Wie günstigeres Prototyping und agileres Programmieren.
- Mit kurzzeitiger Verwirrung oder Falschinformationen muss gerechnet werden, was einen KI Anwender auch nicht wundern dürfte.
- Häufiger Code Audit/Quallitätskontrolle nötig
- Das Tippen und Sprechen von Prompts kann auf die Dauer nerven.
- Regelmäßige Commits, damit man ggf. das Projekt in kleinen Schritten zurücksetzen kann.
- Je komplexer die Zusammenhänge, desto kleiner sollte man die Schritte wählen, die zum Ziel führen.
- Nach dem Löschen von nicht mehr benötigtem Code (zb. nach Debug Sessions), sollte man selbst noch mal Kontrollieren oder ein zweites Mal einen passenden Prompt absetzen.
- Für den Teilbereich Layout & CI werden Prompts schnell zu unpräzise oder zu umfangreich. Aber Chat GPT kann sehr gut Wireframes erkennen, man muss nur den Code für ein Astro Projekt ausgeben lassen und danach in die passende Datei (welcome.astro) kopieren.
Beispiele kurzzeitiger Verwirrung:
Datenflüsse
Development → Production: VS Code → Git → GitHub → Vercel
User Actions: Browser → Vercel API → Supabase/Resend
Scheduled Jobs: Vercel Cron → Website Checks → Change Detection → Email
Authentication: Browser ↔ Supabase Auth ↔ Vercel API
Real-time UI: Browser ↔ Vercel API ↔ Supabase
Weiterführende Links:
Astro web framework: astro.build
Astro Dokumentation: docs.astro.build/en/concepts/why-astro/
Copilot Quickstart: docs.github.com/en/copilot/get-started/quickstart
Hosting: vercel.com / Vercel CLI-commands
Datenbank und User Management: supabase.com / Supabase CLI-commands
E-Mail for developers: resend.com
npm package jsdiff: npmjs.com/package/jsdiff
Einschätzung und Ausblick
Wenn man einen Schritt weiter denkt, wäre auch folgender Entwicklungsprozess interessant.
Man übergibt der KI alle Dokumente, die in der Planung entstanden sind.
Zum Beispiel:
- Datenmodel (ER-Diagramme)
- Programmablaufplan (Sequenzdiagramme)
- Schnittstellenbeschreibung
- Wireframes und Styleguides
Die KI hätte dann direkt alle nötigen Informationen, um das Projekt in mehreren Zyklen in Code zu übersetzen.
Das Resultat wäre dann eine erste alpha Version oder auch ein Prototyp, um Anforderungen zu klären, erste Benutzertests durchzuführen oder Ideen auszuprobieren.
Es gibt Assistenten, speziell zum Erstellen von ER-Diagrammen aber auch um aus dem Diagramm eine Datenbank mit allen Tabellen und Abhängigkeiten zu generieren. Wireframes bzw. Bilder kann Copilot nicht in Code übersetzten. Copilot nutzt ein speziell angepasste GPT-Modelle und ist auf Quellcode spezialisiert (Coder-Autocomplete-Tool).
Mit Chat GPT hingegen kann man sehr gut aus Zeichnungen, HTML und CSS Code generieren lassen, auch für einzelne Elemente, wie einen Banner oder eine Tabelle.
base44 - ein APP Baukasten, der mittels Prompt gesteuert wird
Kiro ist eher ein Werkzeug für Entwickler. "bringing structure to AI coding with spec-driven development"
Die Effizienzsteigerung in diesem Projekt kann ich nur grob Abschätzen. Ich hätte sicherlich die 2 oder 3-fache Zeit benötigt.
Also anstatt 32 Stunden - bis zu 100 Stunden. Bei einzelnen Aufgaben, gab es sicherlich viel höhere Werte. Der Arbeitsprozess mit Copilot, wie auch mit Astro, war für mich neu. Es gibt also durchaus noch Luft nach oben.
Ein offenes ToDo für den PageWatcher, ist das Code-Audit. Qualitätskontrolle sollte beim Vibe Coding einen hohen Stellenwert haben.
Ehrlich gesagt habe ich diesen Teil nicht mit einkalkuliert, solange das Projekt nur von mir genutzt wird.
Ich weiß das dieses Thema KI für manche ein rotes Tuch ist. Die Meinung reichen von "KI ist eh nur eine Investment Bubbel" bis zu "KI ist der Untergang der Arbeitswelt". Die Technik ist durchaus interessant und wird einige Arbeitsprozesse abkürzen in den nächsten Jahren.
Wer am Ende alles davon profitiert, wird sich zeigen.
Schreiben Sie mir gerne bei Fragen oder Anregungen.
Zum Kontakt
Marcus Prem, Oktober 2025
Das Page-Watcher repository auf Github ist zzt. noch privat. Nach einem Code-Review werde ich den Code veröffentlichen.
2 weitere interessante Projekte, werden bis Ende des Jahres hier veröffentlicht werden. Thema: KI & Wordpress