claude

Dec 1, 2024 ∞

Ik liet AI een adventskalender maken

De afgelopen weken had ik losse ideeën die nu samen zijn gekomen in een klein project wat ik zojuist live zette. De AIdventskalender 2024. Een persoonlijk project om AI en programmeren samen te brengen. Een adventskalender die elke dag een tip geeft om de feestmaand door te komen met behulp van AI diensten. Voor playlists, gedichten en films. Wat bracht me tot dit project? Drie losse momenten.

Terwijl ik met iemand praatte over adventskalenders, vroeg ik me af of het domein AIdventskalender.nl nog vrij zou zijn. Ja dus.
Mijn oude blog Digging the Digital draait nog altijd op WordPress, maar liever wil ik die omzetten in een statische site, zodat het minder resources kost. En eenvoudiger ergens is te hosten. Ik wil daarom kijken hoe ik die site in Hugo kan omzetten, een framework voor statische sites
In POKI, de Podcast over Kunstmatige Intelligentie, hoorde ik Wietse praten over manieren om programmeerwerk over te laten nemen door AI.

Breng dat allemaal bij elkaar in mijn hoofd… en ik heb weer een projectje!

De route

In een aantal avonden maakte ik de AIdventskalender. Ik heb echter geen letter code zelf geschreven. Alles is door AI gegenereerd, ik heb het eenvoudigweg steeds geknipt en geplakt in een code-editor. Krijg ik een foutmelding? Dan geef ik de foutmelding aan de chatbot (Claude Pro in dit geval) en die ging aan de slag voor me om het te verbeteren. Ik heb wel meer dan alleen Claude gebruikt. De allereerste versie van de site kwam uit Open Hands, een open source platform met software development agents. Met behulp van AI kun je een eerste ruwe versie van een app laten maken. Die versie heb ik overgenomen in VSCode en ben daarna met behulp van de chatbot Claude stap voor stap alles gaan verbeteren.

Je kunt een groot deel meelezen in het chatverslag dat ik op Github heb gepubliceerd.

Notities

Het hele traject ging zeker niet van een leien dakje. We zijn er nog echt niet om AI zelfstandig aan de slag te zetten voor een project als dit. Wat me zoal opviel in het hele proces:

Ik moest sowieso een hoop troubleshooten rondom de lokale installatie van Hugo. Tenminste, dat dacht ik. Maar Claude ging in een rabbit-hole van versies en plugins die uiteindelijk niet nodig bleek te zijn. Door zelf goed op te letten wat er aan antwoorden kwam en tussentijds ook wat bij te lezen via de good old zoekmachine.
Wat me brengt bij: Enige kennis is wel handig. Zowel van programmeren in het algemeen als van verschillende pakketten. De code die ik kreeg was soms verouderd, soms besloot Claude andere variabelen te gebruiken. Of het vergat hele stukken opnieuw aan te bieden. Als je de basisprincipes van programmeren enigszins herkent, kun je al snel aangeven waar de chatbot beter zijn best moet doen.
Een systeem prompt is zeker handig. Daarmee geef je basis instructies aan de chatsessie. Hier kon ik steeds mee tweaken zoals de opdracht om altijd de volledige code plus eventuele aanpassingen terug te geven.
Claude is heel vriendelijk. Aan de hand van de code en de werking had het al snel door dat ik een adventskalender maakte. Daarop kwam het met suggesties om de kalender wat meer aan te kleden. Niet alle suggesties waren even waardevol, maar er zat soms wat aardigs tussen wat me op nieuwe richtingen bracht.
Met logisch nadenken kom je best ver. Als ik zelf het idee had dat we onnodige code maakte, dan vroeg ik dat, stelde een alternatief voor en hoe Claude dat zou oppakken. Soms gingen we dan de goede kant op, soms gaf Claude aan waarom het wel handig is om een bepaalde keuze te maken.
Je eigen creativiteit helpt. Bijvoorbeeld, ik wilde een Javascript om de deur van elke dag echt als deur te openen en sluiten. Na wat iteraties met Claude had ik een versie waar ik tevreden over ben. Claude had dit zelf (nog) niet bedacht.
Ik liet Claude een eenvoudig Bash-script schrijven om direct 24 dagen aan ideeën rondom Kerstmis en AI te genereren. En om deze direct in het juiste bestandsformat op te slaan. Om eerlijk te zijn, de teksten waren allemaal te generiek. Voor elk deurtje heb ik de tekst zelf herschreven en er eigen links bij gezocht. Dus eigenlijk is de content is van mij, de code van Claude.
Er zaten steeds een paar dagen tussen de sessies dat ik met Claude werkte. Ik kon soms met de bestaande chatsessie doorgaan. Maar door de populariteit van Claude, kreeg ik meldingen dat chatsessies niet té lang moesten worden en ik beter een nieuwe sessie kon beginnen. Dat betekende dat ik weer allerlei kennis moest overhevelen, zoals bestanden en afspraken.
Sowieso helpt het om bestanden te uploaden met je code. HTML, Javascript, CSS, Claude eet alles en kan je dan veel gerichter helpen. Zelfs screenshots van mijn browser-console met debug-berichten konden Claude de goede kant op sturen.

Ik had nog geen ervaring met Github Actions, een manier om automatisch taken en workflows uit te voeren in Github repositories. Met behulp van Claude kreeg ik alle uitleg, achtergrondinformatie en stappenplan. Toegepast op mijn situatie. Door iets nieuws te leren (Github Actions in dit geval) en het direct in een lopend project toe te passen, geeft mij meer voldoening dan eerst alle achtergronden te kennen en het stapje voor stapje via een Hello World voorbeeld te leren. Zo ook met het werken in Hugo templates, de projectstructuur en hoe content en templates samen tot een site leiden.

Creativiteit is een vereiste

Ik ben over de afgelopen 2 weken zo’n 6 uur met dit project bezig geweest. Van registratie van de domeinnaam tot publicatie van de huidige versie. Leuk om hier eens mee bezig te zijn. Ik heb geen ambitie om software engineer te worden, of een full stack developer. Maar soms heb je van die ideeën die je wel zelf tot leven wil brengen. De code die ik door Claude heb laten maken zal door menselijke intelligentie en kennis zeker sneller, compacter en efficiënter kunnen. Goede creatieve developers zijn echt nog altijd nodig. Hun kennis, levenservaring en creatief vermogen brengt een project veel verder dan wat AI nu kan. Als dit een proof of concept is, dan zou ik het vervolg zeker door een creatieve developer verder laten oppakken.

Geniet de komende maand van de AIdventskalender! Alles is statisch gehost, je kunt de broncode zelf bekijken en verbeteren als je wilt.

Wat vind je er van?