So this week Firebase Studio has launched and it has created a lot of buzz surrounding its capabilities. I heard mostly positive reviews saying it is now the “best vibe coding tool” in the market and my question would be: what can the “best” do right now?

Hello and welcome to another Articles by Victoria where I publish on random tech topics that piqued my interest. This week, I explored Firebase Studio’s capabilities because I am once again, skeptical on how viable vibe coding is, especially to non-coders. Can you build a fully functioning app with just AI?

To answer this question, I wrote and published The Truth about Vibe Coding, do check out the article below.

Then a week after publishing this article, Firebase Studio showed up, so I guess my quest in exploring vibe coding is not over yet. A lot of hype was generated about it on social media, but is it really as good as they say? In this article, we’ll be diving deep into exploring that.

What is Firebase Studio?

In case you haven’t heard of it, Firebase Studio is the latest product in the Firebase ecosystem. Probably my long-time readers know that I’m a fan of Firebase when it comes to quickly prototyping apps that require multiple integrated services like authentication, database, hosting, and analytics.

Firebase Studio takes all of these services and add an App Prototyping Agent which allows you to describe your app in natural language and it will do the rest.

So let’s start exploring its features by going to: https://studio.firebase.google.com/

1) Prototype Workflow

When you open Firebase Studio, you can start a project with 3 options:

1. Describe your app in natural language

2. Start with a template from many supported technologies like Next.js, Angular, .NET, Flutter, etc.

3. Import from a Repo

To test its vibe coding capabilities, I’ll go with option 1, where I prompt it to build me a prototype for a habit/task tracker.

2) App Blueprint

After prompting, Firebase Studio will generate a blueprint. This is where you can revise or add any details that were missed in your original prompt.

For example, I would like to change the primary colour so I simply prompt again to change it.

Once you click “Prototype this App”, the first draft of code will be generated. This could take anywhere between 1-5 minutes, based on my testing on different levels of the app’s complexities. Still, it’s pretty fast.

3) Coding Mode

Once the code is generated, you can see a live preview of your app in the web console preview. You are allowed to click Edit the Code, which will launch the IDE directly in the browser.

This is what the IDE looks like in Coding Mode. You switch back to Prototyper mode by clicking the icon in the top-right as shown in the screenshot below.

In Coding Mode, you have access to GeminiAI where you have the chat, the code action features and inline suggestions to help you write, refactor, and debug code more efficiently. You can select which Gemini model to chat with too.

4) Selector

Back to the Prototyper mode, a new cool feature is the selector. At the top right of the web console preview, you can click on the selector icon. See screenshot below.

This allows you to pinpoint which component you want to make changes on. For this example, I want to change the colour for the Add New Habit button. So I select it, and the text box shows up for me to describe my changes.

The idea is good. However, upon trying it myself, I see a hit-and-miss because sometimes the changes will be implemented well with no-code and sometimes, I find it faster to just change the CSS in the code myself.

5) Rollback

One of the most used features while building an app with AI is the rollback feature. Since the AI makes minor mistakes and stays in an error loop, sometimes just restoring to the previous working version is an easier fix.

6) Annotate

When in Prototyper mode, there is an Annotate button in the corner of the chat window. This is a pretty interesting feature I tried.

Upon clicking the Annotate button, the web console actually becomes a screenshot rather than an interactive web preview. The screenshot look stretched most of the time but this is where you can draw and type what you want to correct directly on this image.

For example, the AI forgot to include a Save button for when I edit my task so here, I drew a Save button with the text “Save” then write in the text box the changes I want to see.

Then we click “Send Drawing”. We will see the command has been added to the chat and the changes are made.

Now my Edit Habit window has a Save button!

7) Preview or Publish

Firebase Studio also has a handy preview feature, where you can immediately scan a QR code to view your web app from your phone. Alternatively, you can publish your prototype for users to test on different devices.

Publishing your app would make use of Firebase App Hosting service. You will need to link it to a Cloud Billing Account to continue.

Verdict

Firebase Studio is still in preview and there are features which can use improvements. Vibe coding in general is still mainly useful for developers to prototype rapidly. Effective prompting strategies would be required for more complex apps.

Making small changes can often lead to errors after errors. While Firebase Studio tries to fix these errors, I find letting the AI fix it leads to nowhere. For example, when the AI itself generated a component that does not exist, it cannot solve the issue. I had to go to Coding mode and removed that non-existent component myself.

There were instances where Annotate mode also cuts off screenshot, even after I scrolled to that particular section of the page. So I was unable to use Annotate for any components after that cut off.

All in all, I cannot say this is the best vibe coding tool right now. What I can say is that it has the potential to become better than it is now. With its seamless integration into the Firebase ecosystem and a clear focus on streamlining development workflows, Firebase Studio is a promising step forward. I'm excited to see how it evolves and if it continues in this direction, it just might become a favorite for many developers looking to prototype and ship faster, with less friction.

Thanks for reading! Hope this article has been helpful! If it has, do leave a like, share the article and comment your thoughts below! Cheers!

Let's Connect!

• Twitter

• LinkedIn

• GitHub