Lovable: web app promptból, programozás nélkül

Mi az a Lovable?

A Lovable egy böngészőben futó AI-alkalmazásépítő: leírod, mit szeretnél, és egy működő web appot kapsz, felülettel, adatbázissal, felhasználói belépéssel, amit egy kattintással közzé is tehetsz. A stockholmi Lovable AB fejleszti, a cég 2023-ban indult, és korábban GPT Engineer néven futott a projekt.

A Lovable abba a hullámba tartozik, amit vibe codingnak hívnak: nem kódot írsz, hanem leírod, mit akarsz, és a gép írja meg. A különbség a többi eszközhöz képest az, hogy a Lovable a teljes csomagot adja egy helyen, a kódszerkesztőt pedig egyáltalán nem kell látnod, ha nem akarod.

Hogyan működik a Lovable AI

Egy chatablakba írod a kérést, a jobb oldalon pedig élőben látod az épülő alkalmazást. Minden üzeneted után a Lovable átírja a kódot, és frissül az előnézet. Ha valami nem tetszik, ugyanúgy szövegben kéred a javítást, vagy a felületen rákattintasz az elemre, és megmondod, mi legyen vele.

A háttérben valódi webes kód készül (React alapú felület), nem egy zárt sablonrendszer. Ez később fontos lesz, mert a kódot magaddal viheted.

Érdemes tudni, mi a különbség egy weboldalépítőhöz képest. A klasszikus weboldalépítőben kész blokkokat raksz egymás alá, és amit a sablon nem tud, azt nem tudod megcsinálni. A Lovable-ben nincs ilyen plafon, mert kódot ír: kérhetsz számolót, ügyfélportált, belső nyilvántartást vagy egy egyszerű foglalási rendszert is. Cserébe a hibák is kódhibák, és néha neked kell rájönnöd, mi romlott el.

Ingyenes a Lovable?

Van ingyenes csomag, kipróbálni bőven elég. A Lovable kreditekkel számol: minden üzeneted, amire kódot ír, kreditet fogyaszt, és az ingyenes keret szűkös, nagyjából arra elég, hogy megnézd, neked való-e. A független összefoglalók szerint az ingyenes csomagban a projektek nyilvánosak, a privát projekt fizetős funkció. Ezt és a kreditkeretet a Lovable árazási oldalán ellenőrizd, mert gyakran változik.

A kreditnél egy dolgot érdemes megérteni: nem az számít, hány oldalas az app, hanem hány kört futsz vele. Egy jól leírt első kérés egyetlen nagy lépésben elkészíthet egy egész képernyőt, míg egy rosszul körülírt gombszín tíz kört is elvihet. A kredit tehát nagyrészt a briefen múlik, nem a projekt méretén.

Ha komolyabb projektet kezdesz, a fizetős csomagot ne az első nap vedd meg. Előbb építs egy kis próbát az ingyenesben, és figyeld, mennyi kreditet visz el egy átlagos javítás. Ebből látod, mennyi kellene valójában.

Lehet a Lovable-nek magyarul promptolni?

Igen, a magyar leírást megérti, mert a mögötte dolgozó nyelvi modellek értenek magyarul. Az elkészült app szövegei is magyarok lesznek, ha magyarul kéred őket. A technikai üzenetek, például a build- és hibaüzenetek, jellemzően angolul jönnek.

Nincs külön magyar Lovable, és nem is kell. Ugyanaz a szolgáltatás minden nyelven, a különbséget az adja, mennyire pontosan írod le, mit szeretnél. Ha bizonytalan vagy egy kifejezésben, nyugodtan keverheted a két nyelvet egy mondaton belül is, a modell ezt jól kezeli.

Egy dolgot érdemes angolul hagyni: a technikai szavakat. Ha azt írod, hogy legyen login, admin oldal és RLS a táblákon, azt pontosabban érti, mint a körülírt magyar változatot. A felhasználónak szánt szövegeket viszont magyarul add meg, szó szerint, különben a modell fordítja le őket a saját ízlése szerint.

Első projekt: időpontfoglaló oldal lépésről lépésre

Jó első projekt egy egyszerű foglalóoldal egy kis vállalkozásnak: fodrász, masszőr, korrepetáló tanár. Van benne űrlap, adatbázis és admin nézet, tehát minden, ami egy valódi apphoz kell, mégsem túl nagy.

1. Írd le egyben, amit akarsz, ne darabokban. Egy hosszú, pontos első prompt kevesebb kreditet visz el, mint tíz rövid javítás. 2. Ha kész az első változat, nézd végig telefonon is, és egyszerre egy hibát javíttass. 3. Mielőtt közzéteszed, futtasd le a beépített biztonsági ellenőrzést, és olvasd el, mit talált. 4. Csak ezután oszd meg a linket.

A prompt lent szándékosan hosszú és unalmas. Nem a stílus számít benne, hanem hogy minden döntést előre meghozol: mennyi ideig tart egy kezelés, mikor van nyitva a szalon, ki láthatja a foglalásokat. Amit nem írsz le, azt a modell kitalálja, és a kitalált részeket utólag drágább javíttatni, mint előre leírni. Ez ugyanaz a szabály, mint a jó prompt írásánál bárhol máshol.

Ha megvan az első változat, a javítást is konkrétan kérd. A gomb nem jó helyen van, rossz kérés. Jó kérés: a foglalás gomb kerüljön az űrlap aljára, teljes szélességben, és mobilon is legyen látható görgetés nélkül. Hibánál másold be a pontos hibaüzenetet, és írd le, mit csináltál előtte.

Készíts egy egyszerű időpontfoglaló web appot egy budapesti
masszázsszalonnak. Minden szöveg magyarul legyen.

Nyilvános oldal:
- fejléc a szalon nevével (Nyugi Masszázs), rövid bemutatkozás
- három szolgáltatás: frissítő masszázs 30 perc, svédmasszázs 60 perc,
  sportmasszázs 60 perc
- foglalási űrlap: szolgáltatás, dátum, időpont (hétköznap 9 és 18 óra
  között, félóránként), név, telefonszám, e-mail
- foglalt időpontot ne lehessen újra kiválasztani
- sikeres foglalás után visszaigazoló üzenet

Admin oldal:
- csak bejelentkezett tulajdonos lássa (login)
- a foglalások listája dátum szerint, törlés gombbal

Biztonság: a foglalások tábláján legyen RLS, a látogató csak beírni
tudjon, olvasni csak az admin. API-kulcs ne kerüljön a frontend kódba.
A dizájn legyen letisztult, mobilon is jól használható.

Amire figyelj: kreditek, biztonság, kulcsok

A Lovable-lel nem az első óra a nehéz, hanem a második hét. Ezek a hibák jönnek elő a leggyakrabban.

Lovable alternatívák: Bolt, v0, Replit, Cursor AI, Claude Code

A Lovable nem az egyetlen ilyen eszköz, és nem is mindenre a legjobb. Röviden, mire érdemes a többit használni.

Az első három a Lovable-höz hasonló böngészős építő, ahol a kódot nem kell látnod. Az utolsó kettő már fejlesztői eszköz: a kódot a saját gépeden kezeled, és sokkal többet tudsz vele, cserébe meg kell tanulnod legalább olvasni, amit a gép írt. Melyiket válaszd, az leginkább azon múlik, mennyire akarsz közel kerülni a kódhoz.

Mikor lépj tovább a Lovable-ből valódi kódra

Prototípusra, belső eszközre, egy ötlet gyors kipróbálására a Lovable kiváló. Egy kisvállalkozó egy délután alatt összerakhat vele egy árajánlatkérő oldalt, egy edző egy edzésnapló appot, egy csapat egy belső szabadságnyilvántartót. Ezekben a helyzetekben a gyorsaság többet ér, mint a tökéletes kód. Akkor érdemes továbblépni, ha a javítási hurkok egyre gyakoribbak, ha a projekt annyira nagy lett, hogy minden kérés valami mást ront el, vagy ha fizető felhasználók és érzékeny adatok kerülnek a képbe.

Van egy köztes lépés is, ami sokaknak elég: a Lovable-ben maradsz, de a GitHubra szinkronizált kódot időnként egy fejlesztő vagy egy kódoló ügynök átnézi, rendet tesz benne, és a javított változat visszajön a Lovable-be. Így a gyors szerkesztés megmarad, a kód pedig nem nő a fejed fölé.

A jó hír, hogy nem kell újrakezdeni. A GitHub-szinkron miatt a kód a tiéd: egy fejlesztő átveheti, vagy te magad folytathatod Cursorban vagy Claude Code-dal. Ha a terv egy előfizetéses SaaS-termék, ezt a váltást érdemes korán megtervezni, nem akkor, amikor már égnek a kreditek.

Egy dolgot a Lovable nem csinál meg helyetted: natív mobilappot az App Store-ba és a Google Playre. Ha az a cél, az app kiadásáról szóló cikk mutatja meg, mi vár rád. A Lovable egy független cég terméke, ez az oldal nem kapcsolódik hozzá.

Gyakori kérdések