Vibecoden met Lovable: Prompt je eigen app!

Helemaal nieuw is het niet: programma’s maken met weinig of geen kennis van scripts of programmeertalen. Denk aan low-code- en no-code-ontwikkelomgevingen, waarbij je in een visuele interface logische bouwblokken samenstelt en die eventueel aanvult met beperkte stukjes code.

De snelle opkomst van AI heeft inmiddels een nieuwe ontwikkelvorm mogelijk gemaakt: vibecoden. In plaats van onderdelen handmatig samen te stellen, geef je in natuurlijke taal instructies aan een AI-assistent of -agent, die vervolgens de benodigde code genereert. Je programmeert dus niet langer zelf een app, maar stuurt de ontwikkeling aan via prompts. Prompt je eigen app, dus!

Er is uiteraard niet één weg naar een werkende app. Hoe je dit aanpakt, hangt vooral af van hoe complex je idee is, hoeveel technische kennis je zelf hebt en ook van de mate van controle die je wil behouden.

Zo zijn er AI-gedreven appbouwplatformen die op basis van prompts een volledige appstructuur genereren, met populaire tools als Lovable, Replit, Bolt.new en v0 (Vercel). Daarnaast zijn er ‘AI-first editors’, waarin je nog met code werkt, maar sterk wordt ondersteund door AI, zoals Cursor, Windsurf en JetBrains AI. Er zijn ook de zogeheten ‘coding agents’, die grotere stukken werk autonoom kunnen uitvoeren over meerdere bestanden heen, zoals Claude Code, OpenAI Codex en Aider. En hoewel ze strikt genomen geen code-bouwtools zijn, vermelden we hier graag ook backend- en integratieplatformen als Supabase, Googles Firebase en het opensource Appwrite. Deze staan in voor functies als dataopslag, gebruikersbeheer en synchronisatie, handig om je app ‘stateful’ te maken, met persistente data. In dit artikel focussen we ons op het AI-gedreven appbouwplatform Lovable.

Voordat je met Lovable aan de slag gaat, is het nuttig om te weten waar de tool (niet) goed voor geschikt is. Lovable is vooral sterk in GUI: het genereren van grafische schermen met knoppen, formulieren, paginanavigatie en mobiele lay-outs. De tool kan ook goed overweg met diverse API’s en genereert vlot standaardlogica (‘als dit, dan dat’), zoals het ophalen en tonen van data of het uitvoeren van een actie bij een druk op een knop. Daarnaast blinkt Lovable uit in snelle iteratie: je bouwt een module op, test die meteen, vraagt kleine aanpassingen en laat ze direct opnieuw genereren. Dit proces neemt vaak slechts enkele minuten in beslag.

Lovable richt zich in de eerste plaats op het genereren van web-apps, ook voor mobiel gebruik: zogeheten PWA’s (Progressive Web Apps). Deze kun je op je startscherm plaatsen zonder dat de Play Store of App Store nodig is. Ze zijn gebouwd met webtechnologieën als html, css en JavaScript.

Wil je een diepere integratie met hardware, zoals het uitlezen van sensors, of met het besturingssysteem via native Android- of iOS-API’s, dan zit er meestal weinig anders op dan de PWA om te zetten naar een hybride of native app. In de kadertekst ‘Native app’ geven we daarvoor enkele aanzetten.

Ga naar www.lovable.dev of gebruik de mobiele Lovable-app. Klik op Get Started en maak een account aan. Na aanmelding kom je in je dashboard. Klik linksboven op de pijlknop om te zien hoeveel credits nog resten. In de gratis versie zijn dat er slechts 5 per dag, met een maximum van 30 per maand. Met een Pro-plan van 25 euro per maand krijg je maandelijks 100 extra credits en kun je dit verhogen met top-ups (30 euro voor 100 extra credits). Het verbruik hangt onder meer af van de complexiteit van de actie, zoals het aantal betrokken bestanden.

Start meteen door in het promptvenster een eenvoudige instructie in te voeren via stem of toetsenbord, bijvoorbeeld: ‘Creëer een welkomstscherm met de appnaam RunPal, een achtergrondafbeelding met een lopend persoon en twee invulvelden: voor Totale duur (minuten) en voor Totale afstand (km), evenals een knop Start.’

Na bevestiging gaat Lovable aan de slag en even later krijg je al een fraaie preview en heb je wellicht zo’n 0,6 credit verbruikt.

Gebruik de blauwe pijlknop rechtsboven om je project te publiceren. Kies een gratis subdomein als <appnaam>.lovable.app; een domeinkoppeling is voorbehouden aan Pro-accounts. Klik twee keer op Continue, vul een titel en beschrijving in, upload eventueel een pictogram en socialemedia-afbeelding, en rond af met Continue en Publish. Je web-app staat klaar.

Je bent nu eigenlijk al gestart met je app en kunt via prompts allerlei aanpassingen en toevoegingen doen, maar deze aanpak is niet optimaal. Immers, de structuur van je interface, en de onderliggende code, kan zo snel inconsistent en minder overzichtelijk worden. Begin daarom pas met de echte app in Lovable als je duidelijk weet waar je naartoe werkt. Bepaal dus vooraf welke functionaliteit je nodig hebt en hoe die zich logisch vertaalt naar de interface.

Neem dus pen en papier en schets hoe de verschillende schermen eruitzien en welke opties beschikbaar zijn. Je kunt deze ontwerpfase natuurlijk ook digitaal uitwerken, zoals met de gratis sketchapp Excalidraw Whiteboard (www.excalidraw.com). Via Exporteer afbeelding kopieer je (deel)ontwerpen naar het klembord of bewaar je ze als png of svg. Gebruik deze afbeeldingen vervolgens in Lovable-prompts door ze naar het chatvenster te slepen of toe te voegen via de plusknop links van de promptbalk, via Attach of eventueel Take a screenshot. Verwijs in je prompt naar het plaatje. Een professionelere aanpak kan bijvoorbeeld met het populaire Figma (www.figma.com; gratis 150 AI-credits per dag). Je kunt eventueel ook een schermafbeelding van een webpagina nemen en Lovable vragen de structuur na te bouwen.

Vermijd wel dat je je volledige concept in één keer laat genereren met meerdere afbeeldingen en één uitgebreide prompt. Het is veel beter je project te segmenteren en het stelselmatig logisch en modulair op te bouwen.

Je hebt het wellicht al opgemerkt: Lovable heeft twee werkmodi. Standaard staat rechts van de promptbalk de modus Build actief, maar je kunt ook Plan kiezen. Deze modus is handig als je nog twijfelt en eerst mogelijkheden wilt verkennen of ideeën wilt toetsen. Denk aan prompts zoals: ‘De snelheidsweergave op iOS is niet accuraat genoeg: hoe komt dit?’, ‘Hoe implementeer ik limieten op het invullen, zodat de invoer bij elk van deze velden acceptabel blijft? Wat zijn de opties hiervoor?’ of ‘Wat is de efficiëntste manier om bewaarde loopsessies op te vragen en weer te geven?’.

Voer je een prompt uit in Plan-modus, dan voert Lovable geen code uit en wijzigt er niets aan je bestaande code. Elke Plan-prompt kost precies 1 credit en is vaak zuiniger dan herhaaldelijk experimenteren in Build-modus, waarin je bovendien het risico loopt op spaghetticode.

Afhankelijk van je prompt krijg je een concreet plan. Negeer dit via Skip, keur het meteen goed via Approve (waarna de Build-modus start en de code wordt aangepast) of bewerk het via Edit. In dat laatste geval zie je rechts een bewerkbare markdownversie van het plan en kun je bijsturen na bevestiging met Save & Approve.

Het is ook mogelijk meerdere prompts na elkaar in te geven, ook als Lovable nog met een vorige taak bezig is. Je prompts komen dan in een wachtrij terecht, net boven de promptbalk, die je nog kunt bewerken, zoals herschikken, kopiëren en verwijderen.

Wil je visuele aanpassingen doen aan de app-interface, dan lijkt de Build-modus logisch, maar meestal is dat geen goed idee. Je riskeert dat Lovable je niet correct begrijpt en bovendien kost elke Build-actie credits. Werk daarom anders.

Open de gewenste pagina in de app-preview en klik onder de promptbalk op Visual edits. Klik vervolgens op een element in het previewvenster en gebruik Ctrl voor meervoudige selecties. Pas meteen de afbeelding of de tekst aan of wijzig het aanzicht via de parameters in het linkerdeelvenster. Bevestig met Send om de wijzigingen door te voeren. Klik op Discard om deze te negeren en klik nogmaals op Visual edits voor de normale weergave.

Visual edits werkt niet alleen sneller, het gebruik ervan kost je in principe ook geen credits, zolang je niet overdrijft. Ook het tussentijds publiceren van je app verbruikt trouwens geen credits.

Wil je terugkeren naar een eerdere prompt, zoals na ongewenste codewijzigingen, dan kan dat eenvoudig. Klik bovenin het linkerdeelvenster op het klokicoontje View history voor een chronologisch overzicht van al je prompts, met de recentste bovenaan. Via de drie puntjes bekijk je een item in een previewvenster, open je het in een apart tabblad of vergelijk je de codewijzigingen (rood: vorige versie, groen: aangepaste versie).

Met Go to message in chat haal je de bijbehorende prompt opnieuw in het chatvenster. Elk item bevat ook de knop Revert to this version, waarmee je snel naar een eerdere versie terugkeert. Bevestig dit nog met Revert of kies Cancel om het niet uit te voeren.

Standaard zie je in het rechterdeelvenster een visuele webweergave van je app, maar je kunt hier ook de bijbehorende codebestanden openen, zoals bij de versiegeschiedenis. Klik daarvoor op de knop Code. Klik vervolgens op View File om de preview te vervangen door een overzicht van de codebestanden. Selecteer een bestand in de hiërarchische lijst en bewerk het rechtstreeks. Sla je wijzigingen op via Save rechtsboven. Handmatige codebewerkingen kosten je trouwens geen credits. Via Download haal je het bestand lokaal binnen, zodat je het ook met je favoriete code-editor kunt bewerken.

Andere weergaven zijn onder meer Files, met bestanden die de AI van Lovable naar aanleiding van een prompt heeft gegenereerd of opgeslagen, Speed en Security voor prestatie- en veiligheidstests en optimalisaties, en Analytics. Deze laatste toont onder meer het aantal bezoekers via mobiel en desktop, het aantal pageviews en de bounce rate, het percentage bezoekers dat na één pagina je app verlaat.

Werk je met meerdere mensen of projecten, dan is het nuttig om persistente instructies en context mee te geven, zodat Lovable daar in heel je project rekening mee houdt. Deze vaste instructies neemt Lovable in principe bij elke prompt binnen een project mee.

Klik linksboven op je projectknop en kies Settings. Ga onderaan naar Knowledge en beschrijf je project in maximaal 10.000 tekens. Neem hier bijvoorbeeld het doel van je app op, het beoogde publiek, richtlijnen voor de grafische interface en eenheden (zoals km en kg), typische terminologie (zoals duurloop en intervaltraining) en eventueel url’s naar referentiedocumenten.

Op dezelfde pagina vind je ook Workspace knowledge. Dit werkt op een hoger niveau: je kunt workspaces (werkruimtes) aanmaken waarin je meerdere projecten groepeert. Hier gaan we niet verder op in.

Je kunt de functionaliteit uitbreiden via externe services. Sommige kun je rechtstreeks vanuit de web-app gebruiken, zoals looptrajecten die RunPal op een OSM-kaartje uitzet. Dit regelt Lovable netjes met Leaflet, een JavaScript-bibliotheek die kaarttegels kan laden van OpenStreetMap via een url als https://tile.openstreetmap.org/{z}/{x}/{y}.png.

Bij de meeste services is er een API-aanroep nodig (Application Programming Interface). Soms is deze gratis, zoals bij www.openweathermap.org. Zodra je hier een API-sleutel hebt gegenereerd, kun je via prompts Lovable vragen deze dienst in je app te integreren. Een gebruiker krijgt bijvoorbeeld na een druk op een knop actuele weerinformatie over zijn locatie. Om veiligheidsredenen laat Lovable zo’n API-call verlopen via een server-sidefunctie (‘Supabase Edge Function’), waarin de sleutel veilig wordt bewaard. Op verzoek kan Lovable dit alles voor je regelen.

Daarnaast kun je werken met ‘connectoren’, oftewel vooraf gebouwde koppelingen tussen je Lovable-app en (de API van) een externe dienst. Zo’n connector neemt technische details zoals authenticatie en dataverzoeken over, zodat je eenvoudig data kunt ophalen of acties kunt uitvoeren. Via het uitklapmenu van je project (linksboven), bij Connectors, vind je er ongeveer zestig, waaronder Gmail, Google Docs, Microsoft Excel, Supabase en Telegram, naast diverse MCP-connectors (Model Context Protocol).

Weet dat voor API-calls en connectors Lovable een eigen cloudserver aanspreekt. Met een gratis account voorziet Lovable een cloudtegoed van maandelijks 25 dollar (zie bij Settings / Cloud & AI balance), wat normaliter een flink aantal API-calls toelaat.

GitHub, www.github.com

[Git, www.git-scm.com](Git, www.git-scm.com)

Node.js, www.nodejs.org

[Android Studio, www.kwikr.nl/droidstud](Android Studio, www.kwikr.nl/droidstud)