Milledoni: een AI-first cadeausite bouwen in SvelteKit

De vraag van de opdrachtgever

De vraag van onze opdrachtgever was het aanmaken van een websiteconcept. De Milledoni website bestond eigenlijk al, maar de opdrachtgever was niet tevreden met het design. Dit komt omdat veel mensen vastliepen op mobiel, en omdat de UI heel erg verouderd is.

Daarnaast was het de bedoeling dat de website AI-first runde. Je hebt namelijk een AI-chat, die jij prompt meegeeft, en aan de hand van de prompt kiest hij passende cadeaus uit. Bijvoorbeeld: "Ik zoek een cadeau voor een vriendin dat van koken houdt."

De vraag aan ons, was of wij het AI-first konden maken. Dat de functionaliteit werkt van de lijst en dat we een gesprek kunnen voeren met de AI-chatbot.

Van VueJs naar Svelte 5 + SvelteKit

De opdrachtgever had al gewerkt aan de AI-chatbot, maar dit was in VueJs, een framework wat wij niet gebruiken. Wij gebruiken namelijk Svelte 5 + SvelteKit. Het eerste knelpunt was al in zicht: het maken van de AI-chatbot met een nieuw framework. En het vraagstuk: hoe zetten wij de AI-functie op de juiste manier op, en hoe gaan we het werkend maken?

De opzet: AI koppelen aan de cadeaulijst

We hebben eerst de opzet gemaakt: het toevoegen van de OpenAI API key aan ons project, en vanuit daar kijken hoe we dit konden connecten aan de lijst. En het belangrijkste: welke prompts moeten we meegeven om de chatbot een bepaalde rol te laten aanhouden.

Er waren meerdere vragen, en meerdere knelpunten waar we tegenaan liepen. Het was complexe code die we nog nooit eerder hadden gebruikt. Een nieuwe uitdaging.

De AI als vriendelijke helper

We hebben samen gekeken naar de functies die we wilden voor de AI-prompt, en de taal die we over willen laten brengen. Zo hebben we met de opdrachtgever gepraat over de toon en de stijl. Een vriendelijke helper, met een doelgerichte vraag: "Wat zoek je?"

De AI-chatbot helpt de gebruiker om gericht te zoeken naar cadeaus, zonder dat je zelf eindeloos door alle producten hoeft te scrollen. De prompt stuurt de AI aan om concrete vragen te stellen en passende cadeaus uit de lijst te kiezen. Hier onder kan je ook zien dat de foto's van de cadeaus worden weergegeven in de zoekresultaten aan de hand van de prompt die wordt meegegeven.

Mijn rol en het resultaat

In dit project heb ik meegedacht over de opzet van de AI-functie, de prompts geschreven en geholpen met het koppelen van de API aan de cadeaulijst in SvelteKit. Ook heb ik gelet op hoe de flow voor de gebruiker aanvoelt: van het stellen van de vraag aan de chatbot tot het zien van de cadeaus die hij teruggeeft.

Ik heb dit zelf gepresenteerd aan de opdrachtgever, en zij waren zeer tevreden met de functionaliteit van de AI-functie. De AI-chatbot werkt, de lijst reageert op de antwoorden, en de site is een stuk moderner en gebruiksvriendelijker geworden dan de oude versie.