Waarom?
Ik geloof in Citizen Developers, zeker met de huidige generatie tools. De meeste bedrijven hebben voldoende aan simpele oplossingen die het werk vereenvoudigen of automatiseren. Met AI tools kun je snel zinvolle oplossingen bouwen zonder een groot en log ontwikkelteam.
Elke MKB’er kan wel een AI specialist gebruiken om interne oplossingen te bouwen.
Verder denk ik dat software integraties gaan veranderen. Vroeger had je API’s en gestructureerde data nodig maar nu kun je met AI screenshots analyseren en er vragen over stellen, dit scheelt enorm in de ontwikkelkosten.
Voorbeeld: je zit in een financieel scherm van je administratie en wilt wat analyses doen op verkooporders. Je maakt een screenshot via de Chrome plugin en vervolgens geef je op wat je wilt weten.
Wat voor tool had ik nodig?
Ik had niet echt iets nodig maar mijn interesse voor aandelen en crypto bracht mij op het idee om een Chrome extension te maken die eenvoudige analyses maakt van de Tradingview.com grafieken. Ik ben geen specialist maar probeer steeds meer te leren over wanneer je wel of niet moet instappen.
De tools
Voor dit soort experimenten heb je altijd een backend nodig en in dit geval heb ik weer gekozen voor N8N. Deze draait als Open Source tool op een Digital Ocean server en voorziet diverse klanten van een stabiele backend oplossing.
Voor de frontend was het uitgangspunt een AI tool te gebruiken. Na het kijken van een aantal filmpjes was de keuze voor cursor AI gauw gemaakt.
Het idee
Mijn idee was simpel:
Een Chrome plugin die een screenshot maakt en die doorstuurt naar een backend service die dit screenshot analyseert en dan in de Chrome plugin laat zien wat de analyse van een Tradingview chart is.
Inderdaad simpel, maar de plugin moet ook:
- Alleen maar werken op de tradingview.com website;
- Een instelling hebben voor de URL waar je het screenshot heen stuurt;
- Controles doen of alles juist is ingevuld;
- Disabled zijn als je op de verkeerde website zit.
De uitwerking
Zoals zo vaak ben ik gewoon begonnen. Ik had al een idee en dat heb ik verder uitgewerkt.
De Chrome plugin
Ik had geen duidelijke interface in gedachten maar het moest simpel zijn:
- screenshot knop
- instellingen
- meldingen
- resultaat
Mijn uitgangspunt, geen ingewikkelde interface maar precies wat nodig is.
Nu kwam AI om de hoek kijken via Cursor AI. Na installatie was de eerste stap een folder kiezen. In die folder genereer je later automatisch de code.
Ik heb zelf alles via de composer via prompts laten bouwen, geen handmatig tweaks.
Je begint met de prompt om een Chrome plugin te bouwen en van daaruit werk je verder. Het is belangrijk om exact te beschrijven wat je wilt, van interface tot aanroepen van externe URL’s. Enkele tips:
- Plak fouten ook in de composer en vraag om het op te lossen;
- Beschrijf in detail wat je wilt;
- Geef ook duidelijk aan als je assets zoals icoontjes wilt laten genereren;
- Vraag ook om te kunnen debuggen naar de Chrome console.
Mijn conclusie met Cursor AI
Ik heb er een kleine 2 uur aan gewerkt en dat was met vallen en opstaan. Mijn eerste idee was om S3 te gebruiken maar op dat pad kwam ik iets teveel issues tegen. Dit lag niet aan Cursor AI maar mee aan de specifieke eisen van de S3 provider.
Overall was het fijn werken en heb ik nog nooit zo snel zo’n zinvolle Chrome extensie gemaakt.
De backend
Dit was een appeltje eitje, we hebben zoveel workflows voor klanten gemaakt dat dit een investering van max. een half uurtje was. De belangrijkste stappen om dit te realiseren waren:
- Webhook URL;
- Doorsturen binair bestand naar OpenAI image analyser;
- Response tergusturen.
Deze flow is supersimpel.
OpenAI image analyser
We gebruiken niet een geavanceerde agent maar puur een image analyzer block. Uiteraard heb je een API key van OpenAI nodig.
Vervolgens sturen we het OpenAI resultaat terug via het Respond to webhook block.
