Ga naar hoofdinhoud

Firebase Studio: een eerlijke review met voorbeelden

Leer meer over Google's Firebase Studio, een AI-gestuurde ontwikkeltool voor het bouwen van full‑stack apps met natuurlijke taalprompts.
· 8 min lezen

Verken met AI

Firebase biedt een krachtige reeks tools die alles dekt wat je nodig hebt om moderne web- en mobiele apps te bouwen. Het is een bekende naam in de ontwikkelaarswereld en al lang de favoriete backend voor startups, met fijne features zoals authenticatie, cloudopslag, realtime databases en serverless functies.

Google gaat nu een stap verder met Firebase Studio, een nieuwe AI-gestuurde ontwikkelomgeving waarmee je in enkele minuten van idee naar MVP kunt gaan. Net als Replit en Lovable maakt Firebase Studio het mogelijk om full‑stack apps te bouwen met alleen een prompt.

In dit artikel kijken we wat Firebase Studio is en hoe het werkt. Ik laat je zien hoe ik er vanaf nul een IoT-dashboard mee bouwde en deel mijn eerste indrukken!

We houden onze lezers op de hoogte van het laatste AI-nieuws via The Median, onze gratis vrijdagse nieuwsbrief waarin we de belangrijkste verhalen van de week ontleden. Abonneer je en blijf scherp in een paar minuten per week:

Wat is Google’s Firebase Studio?

Firebase Studio is Google’s nieuwe AI-gestuurde ontwikkeltool waarmee je full‑stack apps kunt bouwen met natuurlijke taalprompts. 

Het is eigenlijk de evolutie van Project IDX, een cloud-IDE die Google in 2023 lanceerde. Project IDX richtte zich op een algemene cloud-IDE met AI-ondersteuning, maar de rebranding naar Firebase Studio versmalt de focus om de ervaring voor Firebase-ontwikkelaars te optimaliseren. Het neemt de beste onderdelen van IDX, zoals de Code OSS-editor, AI-assistent en cloudomgeving, en voegt integraties toe met Firebase-services zoals Firestore, Auth, Hosting en Cloud Functions.

Firebase Studio werd aangekondigd tijdens Firebase’s rebrand in 2024 en is Firebase’s antwoord op de groeiende golf van “AI-native” devtools.

Toegang krijgen tot Firebase Studio

Je kunt Firebase Studio nu meteen proberen via studio.firebase.google.com. Alles wat je nodig hebt is een Google-account. Zodra je binnen bent, kun je een prompt typen waarin je de app beschrijft die je wilt bouwen, en Firebase Studio genereert een kant-en-klaar project dat onder de motorkap de tools van Firebase gebruikt. 

Firebase Studio-prijzen

Firebase Studio is gratis te gebruiken tijdens de previewperiode. Standaard kun je tot 3 workspaces aanmaken zonder kosten. Sommige geïntegreerde services, zoals Firebase App Hosting of het overschrijden van het gratis quotum voor de Gemini API, vereisen echter dat je een factureringsaccount koppelt en kunnen kosten met zich meebrengen. Je Firebase-project wordt automatisch geüpgraded naar het Blaze (pay‑as‑you‑go) abonnement, en je wordt gefactureerd voor gebruik buiten de gratis quota.

Dat gezegd hebbende: als je Firebase Studio vooral wilt gebruiken voor prototyping en ontwikkeltaken, zou je binnen de gratis workspacelimieten moeten blijven en Firebase Studio kunnen verkennen zonder kosten te maken.

Test 1: IoT-dashboardapp vanuit een prompt

Ik besloot eerst de appgeneratie vanuit een prompt te testen. Bij het testen van AI-gestuurde app-bouwtools gebruik ik graag een wat complexere prompt om het gedrag van de tool echt te beproeven. Een to-do-app lukt meestal prima, maar een iets complexere app laat goed zien waar de tool sterk in is en waar hij moeite mee heeft.

Dus, mijn prompt was het volgende:

firebase studio testen met een prompt

Na op de knop “Prototype with AI” te drukken en ongeveer een minuut te wachten, staarde ik nog steeds naar een leeg scherm.

firebase studio leegscherm-bug

De pagina vernieuwen hielp niet veel, dus ik besloot de workspace te verwijderen en het opnieuw te proberen. Deze keer kreeg ik een plan voor mijn app te zien:

Firebase: gegenereerd appplan

Ik was best onder de indruk dat het stijlrichtlijnen had gegenereerd die ik kon bewerken (zo kon ik bijvoorbeeld de kleuren aanpassen door er simpelweg op te klikken). 

Maar als je naar de sectie met features kijkt, zie je dat het de Cloud Function- en Firestore-vereisten die ik in mijn prompt had opgegeven, had laten vallen. Hoe dan ook, ik vond dit dichtbij genoeg en ging akkoord met het plan, benieuwd naar het resultaat. Dit was wat het volgende scherm liet zien:

Sensordashboard-app gebouwd met firebase studio

Op dit punt was ik wat teleurgesteld over het resultaat. De UI was erg basic en er was inderdaad helemaal geen gebruikersauthenticatie.

Ik begon de verschillende knoppen en functionaliteit van het prototypescherm te testen. 

Als je op de knop rechtsboven in de app-UI klikt, opent de app in een nieuw tabblad. De volgende knop links daarvan laat je een previewlink delen. Best handig. De meest linkse knop op de UI opent een componentselector—daarover zo meer.

Als je op de oranje, kronkelige knop links van het chatveld klikt, opent er een interessant “teken”-menu.

Firebase studio tekenfunctionaliteit

Ik kon een rechthoek tekenen rond een sensorkaart en aangeven dat ik de status van die sensor wilde zien. Inderdaad, aan- en uitzetten heeft weinig zin als ik niet weet in welke toestand hij nu is. 

Firebase Studio bijgewerkt dashboard, met status-eigenschap

Het voegde inderdaad een statuseigenschap toe op beide sensorkaarten, die wordt bijgewerkt op basis van de aangeklikte knop.

Ik probeerde via de UI een nieuwe keukensensor toe te voegen, wat prima werkte.

Een nieuwe sensor toevoegen

Maar die nieuwe sensor bleef na een refresh niet bewaard, wat een beetje teleurstellend was.

Op dat moment wilde ik de code bekijken. Ik klikte op het code-icoon rechtsboven in het Firebase Studio-scherm, naast de blauwe “Publish”-knop. Ik was blij om een online code-editor te zien verschijnen. Hij is snel genoeg, ziet er goed uit en heeft een ingebouwde Gemini-functie. Het openen van source control begon te scannen naar Git-repositories.

firebase studio Code-tab

firebase studio: zoeken naar git-repositories

En het leek erop dat hij er een had gevonden en wachtte tot ik de branch waarop ik zat zou publiceren.

Git-repository gevonden, zo te zien.

Dat vond ik wat vreemd, dus ik klikte op “Publish Branch”.

firebase studio: foutmelding, git niet gevonden

Inderdaad, ik was niet ingelogd, en dat was gewoon een eigenaardigheid van de editor. Hoe dan ook, ik waardeerde wel dat je rechtstreeks via de online editor bij GitHub kunt inloggen.

Wat ik echt wilde zien was de mogelijkheid om te integreren met de Firebase-suite. Ik ging terug naar het prototypetabblad en vroeg in de chat om te integreren met Auth en Cloud Functions om sensorgegevens te mocken.

Het voldeed en gaf me een Login-scherm, maar faalde meteen met wat errors.

firebase studio: loginscherm met fouten

firebase studio foutdetail

Een van de fouten, te zien op de screenshot hierboven, kwam doordat de code probeerde te fetchen van een Cloud Function die niet bestond, omdat die helemaal niet in de code was aangemaakt. Meerdere keren op “Fix Error” klikken leverde niets op.

Ik navigeerde terug naar het codetabblad en moest de Gemini-assistent een paar keer aansporen voordat die ermee instemde om Cloud Function-code te maken, en niet gewoon een reguliere functie. Daarna gaf het aan dat het niet voor me kon deployen, maar wel kon helpen met de stappen daarvoor. Fair enough.

Gemini-assistent in firebase studio

Omdat de chatinterface niet erg goed leek in het oplossen van logische problemen, vroeg ik me af of hij misschien beter UI-problemen kon oplossen. Ik vroeg om de UI van de loginpagina spannender te maken door afbeeldingen toe te voegen met een data- en analytics-thema. Ook dat leverde geen enkele wijziging op, ondanks dat de chat aangaf een paar bestanden te wijzigen.

Poging om afbeeldingen te genereren in firebase studio

De laatste feature die ik wilde proberen was het publiceren van de app. Als je op de grote “Publish”-knop rechtsboven klikt, opent een zijpaneel met stappen om de app te publiceren.

App publiceren in firebase studio

Ik besloot een factureringsaccount aan te maken en automatisch over te gaan naar het Blaze‑plan zodat ik de app kon publiceren met Firebase App Hosting. De link in het zijpaneel verwijst door naar de Google Cloud-console, waar ik werd gevraagd een factureringsprofiel te maken. Nadat ik op bevestigen had geklikt, werd ik doorgestuurd naar een “URL niet gevonden”-pagina op GCP. 

GCP-console geopend vanuit firebase studio

Terug in mijn Firebase Studio-tabblad zag ik nu het bericht “Waiting for billing account from Cloud Console”. Ik wachtte een paar minuten en ververste meerdere keren, en kon uiteindelijk mijn factureringsaccount selecteren en mijn app publiceren.

App publiceren in firebase studio

Hiermee was mijn test “app genereren vanuit een prompt” afgerond. Mijn eerste gedachte was dat het met Firebase Studio misschien wat lastiger was dan met andere tools die ik eerder heb gebruikt.

Door naar de tweede test.

Test 2: Een project genereren vanuit een template

Hoewel Firebase Studio appgeneratie vanuit een prompt biedt, kun je er ook apps mee aanmaken via templates.

Op de homepage van Firebase Studio opent een klik op een van de kleine framework- of taaliconen onder de sectie “Start coding an app” een nieuw scherm. Ik koos ervoor om een Node Express API-server te maken met de naam “My Node App” en daarvoor TypeScript te gebruiken.

Templategenerator in firebase studio

Na een paar seconden verscheen de resulterende server in de online code-editor. Geen prototypetab hier, maar dat is logisch gezien dit backendcode is.

Gegenereerde template in firebase studio

Deze keer gaf het openen van het source control-tabblad me de mogelijkheid om een nieuwe Git-repository te initialiseren.

Sourcecodepaneel in firebase studio

Deze template stelde slechts een basic “hello world”-endpoint bloot, maar had wel alle code en boilerplate die je nodig hebt om een NodeJs + Express API te gaan bouwen. 

Eerste indrukken en gedachten over Firebase Studio

Al met al is Firebase Studio een goede stap richting AI-ondersteunde ontwikkeling, maar het voelt nog sterk als een bètaversie.

Het idee om van één enkele prompt naar een werkende app te gaan met een visueel prototype, live preview, bewerkbare componenten en stylingcontrols is super spannend. Er waren ook doordachte kleine details, zoals kleuren kunnen wijzigen door direct op een palet te klikken of op het prototype tekenen om wijzigingen te vragen.

De ingebouwde code-editor was ook een aangename verrassing: hij ziet er goed uit, werkt vlot en wordt standaard geleverd met Gemini- en GitHub-ondersteuning, waardoor met de code spelen behoorlijk eenvoudig was. Het is zeker zo goed als sommige andere online code-editors die ik in het verleden heb geprobeerd.

Toch liep ik tegen de nodige frustraties aan. Generatie op basis van prompts voelde wisselvallig: features waar ik expliciet om vroeg (zoals Cloud Functions, Auth en Firestore) werden weggelaten, en toen ik er later opnieuw om vroeg, voerde het systeem ze deels uit maar liet het kapotte functionaliteit en onopgeloste fouten achter.

De gegenereerde UI was behoorlijk basic, en mijn verzoeken om achtergrondafbeeldingen toe te voegen werden genegeerd. Na meerdere keren aandringen kreeg ik alleen een kleurverloop op de achtergrond. Ook liep ik tegen wat eigenaardigheden aan rondom publiceren en facturering instellen, waardoor het hele proces wat stroef aanvoelde.

App-creatie op basis van templates verliep beter. De Node.js-backendtemplate gaf me een goed gestructureerde en schone codebase waar ik meteen mee aan de slag kon. Dat voelde een stuk betrouwbaarder en ontwikkelaarsvriendelijker.

Eerlijk is eerlijk: ik heb niet alles kunnen testen, en het is duidelijk dat de tool nog in ontwikkeling is. Ik heb anderen horen zeggen dat hij beter werkt met eenvoudigere use-cases of meer gestructureerde prompts, dus dat probeer ik de volgende keer misschien.

Op dit moment voelt Firebase Studio als een sneak peek van wat AI-first development zou kunnen worden. Het is nog niet helemaal klaar voor prime time, zeker vergeleken met tools als Replit, Lovable, Bolt of v0, maar het is een spannende ruimte om in de gaten te houden.

Conclusie

Firebase Studio heeft een paar oprecht spannende ideeën, maar ik denk niet dat het al klaar is om op zichzelf productieklare apps te bouwen. Ben je nieuwsgierig naar AI-ondersteunde ontwikkeling of wil je verkennen wat er hierna komt, dan is het zeker de moeite waard om mee te spelen!

Marie Fayard

Auteur

Marie Fayard

Ik ben een productgerichte tech lead die gespecialiseerd is in het laten groeien van startups in een vroeg stadium, van het eerste prototype tot product‑market fit en verder. Ik ben eindeloos nieuwsgierig naar hoe mensen technologie gebruiken, en ik werk graag nauw samen met oprichters en multidisciplinaire teams om gedurfde ideeën tot leven te brengen. Als ik geen producten bouw, zoek ik inspiratie in nieuwe uithoeken van de wereld of ontspan ik me in de yogastudio.

Onderwerpen

Gerelateerd