Claude Code, MCP, Supabase, RLS, Edge Functions, GitHub és Cloudflare/Vercel alapokon. Kezdő alapítótól döntéshozóig.
01 — A nagy váltás
A legfontosabb változás nem az, hogy az AI "ír helyettünk kódot". A valódi fordulat az, hogy a szoftverépítés egyre inkább integrációs feladattá válik: kész szolgáltatásokat kötünk össze, az AI felgyorsítja a tervezést, hibakeresést és dokumentálást.
Régen a fejlesztő "rendszert épített". Ma egyre gyakrabban "rendszert komponál": frontend + backend platform + adatbiztonsági szabályok + edge funkciók + AI agent + automatizáció. A versenyelőny forrása a gyors iteráció és a kontrollált automatizáció, nem a kódsorban mért fejlesztői kapacitás.
| Szempont | Hagyományos modell | AI-native modell |
|---|---|---|
| Fejlesztési fókusz | Egyedi kód, szerver, backend-logika | Kész komponensek összekapcsolása és testreszabása |
| Sebesség MVP-ig | Hetek–hónapok | Napok–hetek, ha tiszta a scope |
| Fő kockázat | Infrastruktúra, devops, auth, jogosultság | Vendor lock-in, rossz RLS, AI által generált hibák |
| Szükséges tudás | Mély full-stack fejlesztői tudás | Rendszerszemlélet + prompt + alap SQL/security + tesztelés |
| Versenyelőny forrása | Nagy fejlesztői csapat mérete | Gyors iteráció, alacsony induló költség, automatizáció |
Az AI nem "teljes fejlesztőcsapat dobozban". Inkább egy gyorsító és végrehajtó társ. Aki nem érti, mit épít, az AI-val is könnyen rossz rendszert épít — csak gyorsabban. Az emberi feladat marad: üzleti logika, adatmodell, biztonsági szabályok, kompromisszumok, költségkontroll.
03 — A modern stack
Egy modern webappot ma hat fő rétegre bontunk. Ezeket külön-külön is lehet tanulni, de a valódi érték az integrációban van. A kérdés nem az, hogy "melyik a legjobb tool?", hanem hogy a célfeladathoz melyik kombináció adja a legkisebb kockázatot és a legjobb skálázási utat.
A felhasználó ezt látja és kezeli. React, Vue vagy Svelte komponensrendszeren épül. Ne kerüljön bele titkos API kulcs!
Publikálja a webappot, SSL-t, CDN-t és preview deployokat ad. Régen ehhez VPS, nginx, SSL admin kellett.
Adatbázis, auth, storage, API és realtime készen. Nem te építed nulláról — de az adatmodell és jogosultság a tiéd.
Mini backend funkciók fizetéshez, AI API híváshoz, webhookhoz, emailhez. Titkos kulcsok itt élnek, nem a frontendben.
Kódolás, elemzés, appon belüli AI funkciók. Tokenköltség alapú árazás — sok user és agent-loop gyorsan drágíthat.
AI eszközökkel és valódi adatokkal dolgozik. Nem csak szöveget generál — tervez, eszközt hív, ellenőriz, módosít.
04 — AI coding eszközök
A fejlesztő nem minden sort kézzel ír — célokat, fájlkörnyezetet, hibákat és teszteket ad az AI-nak. A hatékony használat feltétele a jó specifikáció és a folyamatos ellenőrzés.
| Eszköz | Erősség | Ár (tájékoztató) | Kinek jó? |
|---|---|---|---|
Claude Code Ajánlott |
Erős kódértés, nagyobb refaktorok, terminálos munkafolyamat, MCP integráció | ~$20/hó Pro; Max magasabb keret | Solo founder, AI-val komolyabban kódoló fejlesztő |
Cursor |
IDE-szerű élmény, fájlszintű kontextus, gyors iteráció, beépített chat | Free + Pro ~$20/hó | VS Code-szerű fejlesztéshez, csapatoknak |
Windsurf |
Agentikus IDE-folyamatok, többfájlos módosítások, gyors frontend | Free + fizetős csomagok | Gyors prototípushoz, frontend-heavy appokhoz |
GitHub Copilot |
Kódkiegészítés, PR review, GitHub-integráció, kódbázis-tudatosság | GitHub AI csomagok / usage | GitHub-központú csapatoknak |
ChatGPT / Codex |
Tervezés, hibakeresés, kódrészletek, architektúra megbeszélés | Előfizetés vagy API | Nem csak IDE-ben dolgozó alapítóknak |
Az AI gyakran kihagy RLS policyt vagy túl engedékeny szabályt ír. Frontendbe tehet service role kulcsot, ami adatvédelmi katasztrófa. Nem mindig kezeli jól az edge case-eket, és a generált kód működhet lokálisan, de productionben törhet. Az AI-generált kódot ugyanúgy kell kezelni, mint junior fejlesztő munkáját.
05–06 — GitHub és Deploy
A GitHub nem csak kódtárhely — ez a projekt memóriája. AI mellett még fontosabb, mert az AI gyorsan sok fájlt módosít: kell a kontroll. A deploy lényege, hogy a helyi gépeden futó appból nyilvánosan elérhető, SSL-lel védett alkalmazás legyen.
| Funkció | AI-native szerep |
|---|---|
| Repository | Projektállapot és AI-munkaterület |
| Branch | Biztonságos kísérleti tér az AI-nak |
| Pull Request | AI által írt módosítás emberi ellenőrzése |
| Actions | Teszt, build, deploy automatikusan |
| Issues | AI-val bontható ticket-struktúra |
MVP-nél is legyen: main branch védelem, dev branch, .env kizárás .gitignore-ban, README, basic CI build és minden AI-munka után diff review.
| Platform | Ár | Mikor? |
|---|---|---|
| Cloudflare Pages | ~$5+/hó | Edge-közeli, CDN-orientált rendszer |
| Vercel | Free / ~$20/hó | Next.js app, gyors iteráció |
| Netlify | Free / ~$9+/hó | Marketing site + formok + app |
| Render | Usage alapú | Hagyományosabb backend is fut |
| Railway | Credit alapú | Prototípus, kis backend |
07 — Backend-as-a-Service
A BaaS lényege, hogy nem te építed meg nulláról az adatbázist, authot, storage-ot és API-t. Ez óriási gyorsulás, de a döntés hosszú távú hatással van az architektúrára — érdemes körültekintően választani.
| Platform | Adatbázis / Logika | Erősség | Kockázat | Ajánlás |
|---|---|---|---|---|
Supabase Ajánlott |
PostgreSQL + Auth + Storage + Edge Functions | SQL-alapú, RLS erős, open-source háttér | RLS-t érteni kell; rossz policy veszélyes | Ha SQL-t és jogosultságot tanulnál |
Firebase |
Firestore/Realtime DB + Auth + Google Cloud | Mobil/web apphoz gyors, skálázható | NoSQL modell; reads/writes költség meglepő lehet | Gyors mobil prototípus Google-ökoszisztémában |
Appwrite |
Open-source backend, auth, DB, storage | Egységes csomag, self-host opció | Kisebb ökoszisztéma, mint Firebase/Supabase | Self-host kontrollra vágyóknak |
PocketBase |
SQLite alapú self-host backend | Nagyon gyors prototípus, egyszerű setup | Nagy skálán limitáltabb | Kis belső app, gyors demo |
Xano |
No-code backend, API builder | Nem fejlesztőknek is érthető backend | Drágább lehet, lock-in erős | No-code backend üzleti csapatnak |
Directus |
Headless CMS + DB layer | Adatvezérelt adminfelület, CMS logika | SaaS apphoz kiegészítőként jobb | CMS-vezérelt tartalomhoz |
08 — Adatbázis és jogosultság
Az RLS (Row Level Security) azt jelenti, hogy nem csak az API-ban, hanem közvetlenül az adatbázisban mondod meg: melyik felhasználó melyik sort láthatja, módosíthatja vagy törölheti. A modern frontend közvetlenül hívja a backend API-ját — ezért ez kritikus.
| Tábla | Tipikus tartalom | Veszély RLS nélkül | RLS logika |
|---|---|---|---|
| projects | projekt neve, owner_id | Minden user látja az összes projektet | auth.uid() = owner_id |
| invoices | számlák, user_id, összeg | Adatszivárgás ügyfelek között | user csak saját számlát olvas |
| organizations | céges workspace-ek | Más cég adatai megjelenhetnek | membership tábla alapján hozzáférés |
| admin_notes | belső megjegyzések | Normál user admin adatot lát | role = 'admin' kell olvasáshoz |
09 — Auth és biztonság
A biztonság nem egyetlen plugin. Rétegek rendszere. A modern stack megkönnyíti a biztonságos indulást, de nem garantálja. Az AI működő demót készít, de production-szintű védelmet nem mindig.
RLS teszt két userrel → secrets audit (nincs kulcs frontendben?) → backup ellenőrzés → error logging bekapcsolva → rate limit beállítva → admin műveletek naplózva → költségplafon beállítva → rollback terv dokumentálva.
10 — Edge Functions
Az Edge Function egy kis backend funkció, amelyet nem saját szerveren futtatsz. Akkor kell, amikor valami túl érzékeny vagy túl komplex ahhoz, hogy a frontendben legyen.
| Feladat | Frontend? | Edge Function kell? | Miért? |
|---|---|---|---|
| Nyilvános lista lekérése | Igen | Nem feltétlenül | Egyszerű read RLS-sel mehet |
| OpenAI / Claude API hívás | Nem! | Igen, kötelező | API kulcs titkos, költséget védeni kell |
| Stripe webhook | Nem! | Igen, kötelező | Aláírás ellenőrzés, fizetési állapot frissítés |
| Email küldés | Nem! | Igen, kötelező | SMTP/API kulcs titkos, spam kontroll |
| PDF generálás | Részben | Gyakran igen | Erőforrásigény, sablonkezelés, audit |
| Admin művelet | Nem! | Igen, kötelező | Service role csak szerveroldalon használható |
11 — MCP és AI agentek
Az MCP (Model Context Protocol) nyílt szabvány arra, hogy AI alkalmazások külső rendszerekhez kapcsolódjanak: fájlokhoz, adatbázishoz, GitHubhoz, böngészőhöz, CRM-hez. Ezért hívják az AI "USB-C portjának". Az agent nem csak szöveget generál — cél alapján tervez, eszközt hív, ellenőriz és módosít.
Agentnek soha ne adj korlátlan hozzáférést. Kötelező: sandbox, read-only mód első körben, külön teszt adatbázis, explicit emberi jóváhagyás veszélyes műveletekre (törlés, productionbe deploy, email küldés), és részletes log arról, milyen toolt mikor hívott és milyen inputtal.
12 — Workflow automatizálás
A workflow rendszer előre definiált lépéseket futtat. Az agent rugalmasabban dönthet a következő lépésről. Üzleti rendszerekben a kettő kombinációja a legjobb. Pénzt, törlést vagy production adatot érintő műveleteknél mindig legyen emberi jóváhagyás.
| Eszköz | Típus | Erősség | Mire jó? |
|---|---|---|---|
n8n Ajánlott |
Workflow automation, self-host opció | Sok integráció, vizuális flow, fejlesztőbarát | Sajtófigyelés, email, CRM, AI összefoglalók |
Zapier |
No-code automatizáció | Rengeteg app integráció, gyors setup | Egyszerű üzleti automatizmusok |
Make (Integromat) |
Vizuális folyamatépítés | Komplexebb ágak, jó UI | Marketing, lead folyamat, adatmozgatás |
Cloudflare Workflows |
Edge-közeli folyamatok | Cloudflare ökoszisztéma, tartós state | Serverless appon belüli tartós folyamatok |
Temporal |
Komoly workflow engine | Megbízható hosszú folyamatok, retry logika | Enterprise, mission critical folyamatok |
| Szolgáltató | Erősség | Árlogika | Optimalizálás |
|---|---|---|---|
Anthropic (Claude) Claude Code |
Erős kódolás, hosszú kontextus, MCP natív, Claude Code | Előfizetés + API tokenárak | Sonnet/Haiku modell, kontextus rövidítése, cache |
OpenAI |
Erős általános modellek, tool/API ökoszisztéma, GPT-4o | Tokenalapú API, modellfüggő | Kisebb modell, cache, batch, limit/user |
Google Gemini |
Google-integrációk, multimodális, hosszú kontextus | Tokenalapú / platformfüggő | Dokumentumdarabolás, kvóták beállítása |
Mistral |
Európai szereplő, open-weight modellek, GDPR-barát | API + self-host lehetőségek | Kisebb modellek, lokális futtatás mérlegelése |
Open-source / self-host |
Adatkontroll, nincs per-token vendor lock-in | GPU/infra költség | Csak ha van üzemeltetési tudás és adatvédelmi kötelezettség |
AI app költség = felhasználók száma × interakciók száma × átlagos token/feladat × választott modell ára. Agenteknél ezt szorozhatja a több lépés és a tool-hívások száma. Mindig állíts be havi budget alertet!
14 — Email, fizetés, tárolás
A legtöbb SaaS nem csak belépésből és adatbázisból áll. Kell email, fizetés, fájlfeltöltés, számlázási logika. Ezeknél a titkos kulcsok és webhookok miatt szinte mindig kell szerveroldali réteg.
| Terület | Eszközök | Árlogika | Figyelj erre |
|---|---|---|---|
| Email küldés | Resend, SendGrid, Postmark, Mailgun | Free limit + ~$15-25/hó | Domain verification, SPF/DKIM, unsubscribe link |
| Fizetés | Stripe, Paddle, Lemon Squeezy, Barion | Tranzakciós díj %; Billing extra | Webhook ellenőrzés, számlázás, EU ÁFA-kezelés |
| Fájltárolás | Supabase Storage, Cloudflare R2, S3 | GB + egress + request alapú | Privát bucket, aláírt URL, vírusellenőrzés |
| PDF / riport | Browserless, DocRaptor, saját function | Usage alapú vagy saját futtatás | Timeout, fontok, adatvédelem, sablon |
| Ügyfélszolgálat | Crisp, Intercom, Zendesk | Free + paid seat/usage | GDPR, adatmegőrzés, AI bot kontroll |
User belép Supabase Auth-tal → feltölt egy fájlt Supabase Storage-ba → Edge Function meghívja az AI API-t → fizetés Stripe-on történik → tranzakciót webhook frissíti → kész riportot emailben Resend küldi ki. Ez már teljes SaaS-logika, mégis nagyon kevés saját infrastruktúrával.
15 — Monitoring és backup
A demó attól demó, hogy csak akkor látod a hibát, amikor a felhasználó szól. A production attól production, hogy látod a hibát, vissza tudod fejteni mi történt, és van mentésed.
| Terület | MVP minimum | Fejlettebb opció | Miért fontos? |
|---|---|---|---|
| Frontend hibák | Browser console + Vercel logs | Sentry, Highlight.io | Látod, hol omlik össze a UI |
| Backend/Edge logs | Supabase/Cloudflare function logs | Axiom, Datadog, Grafana Loki | Webhook és AI hibák visszakeresése |
| DB backup | Platform alap backup | PITR, rendszeres export | RLS hiba vagy törlés után visszaállítás |
| Audit log | Admin műveletek naplózása | Külön audit táblák, SIEM | Ki mit módosított és mikor? |
| Költség monitoring | Havi budget alert | Per-user usage meter | AI és serverless költségfutás megelőzése |
17 — Költségmodell
Az árak tájékoztató jellegűek, 2026. május 11-i nagyságrendek. A pontos díjakat mindig a szolgáltatók hivatalos oldalain kell ellenőrizni — az AI és serverless piac gyorsan változik.
18 — Tipikus hibák
Az AI-stack nem varázslat. A legtöbb kudarc oka nem az, hogy a toolok rosszak — hanem hogy a felhasználó nem tervezi meg az adatmodellt, a jogosultságot, a költséget és a tesztelést.
19 — Javasolt architektúrák
A döntési keret: nincs login → statikus oldal. Van login és useradat → Supabase/Firebase + RLS kötelező. Van titkos API kulcs → Edge Function kell. Van fizetés → Webhook + audit. Van agent → Sandbox + log.
Olcsó, gyors, kevés backend.
Első lépés: Statikus oldal, domain, email értesítés.
Gyors full-stack indulás SQL alapon.
Első lépés: Auth + projects tábla + RLS + CRUD.
Titkos AI kulcs szerveroldalon, user adatok DB-ben.
Első lépés: Fájlfeltöltés + edge AI call + eredmény mentése.
Subscription és user entitlement kezelhető.
Első lépés: Stripe checkout + webhook + user plan mező.
Jogosultság és audit fontosabb, mint design.
Első lépés: Szervezeti roles + audit log.
Kontrollált automatizáció, kisebb kockázat.
Első lépés: Read-only adatkapcsolat + riport draft.
16 — MVP-építés lépésről lépésre
Előbb adatmodell és jogosultság, utána képernyők, végül automatizáció és agent. Ez a profi sorrend — kezdőknek és tapasztaltaknak egyaránt.
Ne az agenttel kezdj. Előbb legyen tiszta adatmodell, jogosultság és egyszerű működő app. Az agent csak akkor hasznos, ha biztonságos rendszeren belül dolgozik. Egy instabil alapra épített agent csak gyorsabban épít rossz rendszert.
20 — 30 napos terv
Ha kezdő vagy, haladj sorrendben. Ha már építettél webappot, ugorj az RLS, MCP, agent, security és költség részekre — ott van a valódi változás.
Rendszerszemlélet + prompt engineering + alap SQL/security + tesztelési fegyelem = az AI-native fejlesztő szuperereje 2026-ban.
Belső oktatási vagy értékesítési anyagként ezt a dokumentumot negyedévente érdemes frissíteni, különösen az AI API, Claude Code, Vercel/Cloudflare, Supabase és GitHub Copilot árazás miatt. Az AI és serverless piac gyorsan változik.
Források
Az árak és szolgáltatásleírások 2026. május 11-i ellenőrzés alapján, hivatalos szolgáltatói dokumentációkra és pricing oldalakra épülnek. A díjak devizában, csomagban és régió szerint változhatnak.