Google's Firebase Studio: The Secret to build Apps in Minutes.

Hey there techies. In this video, we're going to check out a new Vibe coding tool that's making huge waves in the market. With this tool, you can build a

market. With this tool, you can build a website simply by typing a prompt. It

also features a built-in debugging mechanism, a canvas where you can design your user interface, and the most exciting part, it supports Android app development with a built-in Android

Studio. Yes, I am speaking about

Studio. Yes, I am speaking about Firebase Studio. That is the former

Firebase Studio. That is the former project IDX. Firebase Studio is

project IDX. Firebase Studio is developed by Firebase, a backend as a service provider owned by Google. As it

is owned by Google, it uses Gemini AI for project development. One more

advantage is that Firebase Studio also supports Gemini 2.5 Pro which is the most advanced model of Gemini. Let's try

using Firebase Studio. To access the Firebase Studio, let's click on the try Firebase Studio option. As I am using my Google account, I need not sign up separately. Once the authentication is

separately. Once the authentication is successfully done, we are redirected to this page. Firebase Studio offers only

this page. Firebase Studio offers only three project spaces for free. So once

you hit the limit, you'll need to delete existing projects to create a new one.

However, if you want to store more than three projects without a paid plan, you can try joining the Google Developer Program for free. This will give you access to create up to 10 free projects.

Now, let's develop our first project.

The UI looks great. At the bottom left corner of the prompt box, we have an option to attach files. So basically

through this option, we can attach an image containing our workflow or something like that. Below the prompt box, we have two options. One to create a workspace for our project and the second one is to import a repo from

GitHub. At the right side, we are

GitHub. At the right side, we are provided with many programming languages like Go, Python, Cotlin and text stacks like React plus Express, Nex.js, NodeJS, etc. Among these we can select a

particular language to develop our project. Or else we can simply enter a

project. Or else we can simply enter a prompt and Firebase will take care of text stack selection according to our project needs. Now let's ask the

project needs. Now let's ask the Firebase Studio to build a home inventory website. So in the prompt box

inventory website. So in the prompt box I'm going to say build a responsive home inventory website. Users should be able

inventory website. Users should be able to add, edit, and delete items with fields like name, category, location, value, and photo. Include search and

filter options for easy item lookup.

Display items in a clean card-based grid layout. Add local storage support for

layout. Add local storage support for saving data. Use a modern minimalist UI

saving data. Use a modern minimalist UI with light and dark mode toggle. For

this project, I am not going to select any particular text stack. So, let's see what Firebase chooses. Let's hit enter and wait for the response. The response

speed is great. And before developing the project, it prototypes the website features like add item, edit or delete item and as website basics like color, layout and animation. We can edit this

prototype by selecting the edit option form the top right corner. Once the edit option is selected, we are redirected to this page where we can edit each and every feature of this app. This

basically work like a Google docs and we can change the font size, alignment and style. Let's try to edit something. As

style. Let's try to edit something. As

the first one, I'm going to change the name of the website. Let's call it my home instead. The core features look

home instead. The core features look fine. In the style guidelines, let's

fine. In the style guidelines, let's change the color to olive and add one more feature. Display an animated

more feature. Display an animated progress bar under every item showcasing the quantity of it. I don't want to make any more changes. So, let's click on the save option. Now, we are redirected to

save option. Now, we are redirected to the previous window. And here we can check whether all the changes are noted or not, like the color and the progress bar. Yes, all the changes are noted. So,

bar. Yes, all the changes are noted. So,

I am going to click on the prototype this app option. Once clicked, Firebase Studio takes care of developing the app from front end to back end. But still,

we are not provided with any option to select a specific AI model like Gemini 2.5 Pro or Flash or anything like that.

Though the generation speed is great, I wish I have an option to select a specific model. Let's check the output.

specific model. Let's check the output.

After waiting for a few minutes, our home inventory website is ready. Before

checking the website, I want you to see this. At the right side, we are provided

this. At the right side, we are provided with the blueprint of the website. And

below that, Firebase Studio has listed all the files created for this project.

We can open and navigate through these files by simply clicking on them. As I

guessed, Firebase Studio has used TypeScript to develop this project. And

at last, we have an option to edit the code. Let's check the functionalities of

code. Let's check the functionalities of our website. Well, first let's maximize

our website. Well, first let's maximize the screen by clicking the expand option for the top right corner and try to change the theme of the website. Great,

it works perfectly. But still the olive color we mentioned is not used as the primary color in the UI. Let's try to add an item to this list. Wow, it has

many options like location, category, price, quantity, and photo. As of now, I'm going to add oil to the items. So the name is going to be oil category

groceries location kitchen value say $5 and quantity is two and for the photo I have downloaded an image from Google let's try to attach it okay I have added

all the details let's add this item and check the output this is amazing the item is added and displayed at the homepage a card element is used to display the items which makes it look

dynamic a progress bar is also displayed with the maximum count as 100 at the bottom bottom of the card, we have options to edit and delete the stored items. Let's try to edit the item. The

edit window is open. Now I'm going to change the quantity of the item to 50.

This way we can check the working both the edit and progress bar feature. Let's

save this. Yes, the item is edited and stored seamlessly. The progress bar is

stored seamlessly. The progress bar is also updated accordingly. Now let's

delete this item and add more items to check if it works.

And one more notable point is if I didn't attach an image a random image is added automatically. So it means that

added automatically. So it means that the card element it is not dynamic but static because it is requiring all the fields to have some value to store the item. But still we can change this

item. But still we can change this easily. Okay. As far as I've checked it

easily. Okay. As far as I've checked it is working fine. At the top we have two filters. The first one filters by

filters. The first one filters by category and the next one filters by the location of the item. One more cool feature of Firebase Studio is that at the top we have option called select.

Using this option we can particularly select an element of the website and make changes to that. For example, I'm going to select the card in which the items are stored and let's try to add

hover effect to it. So I am going to say add hover effect to all the cards and hit enter. From the right side panel, we

hit enter. From the right side panel, we can notice the changes being updated. At

first, it didn't work. I entered the same prompt once again, and in the second time, it worked fine. The hover

effect looks cool. The coolest feature of Firebase Studio is the canvas or annotate option, which basically turns handdrawn features into real coded elements. Using this, we can easily

elements. Using this, we can easily design our website. To use it, click on the annotate option at the bottom. Now,

we can freely draw anything on the screen. For example, I'm going to draw a

screen. For example, I'm going to draw a button. At the top, you'll notice

button. At the top, you'll notice various elements like shapes, text, eraser, image, etc. It basically looks like paint software. From these options, I'll select the curved rectangle and

draw a button here. Once an element is drawn, we can specify instructions or describe the purpose of the element over here. Whenever I click on this button, I

here. Whenever I click on this button, I want the page to be reloaded. So, I am going to say this button should reload the page whenever clicked. To add text to the button, just double click on the

button element and you can start typing.

As of now, I'm just going to name it as reload and let's click the send drawing option. Once the drawing is sent, the

option. Once the drawing is sent, the Firebase Studio takes a screenshot of the page and starts the implementation.

This feature is what makes the Firebase Studio stand out from the other AIS because other AIs like lovable, augment code or Trey don't have this feature.

Using this feature, we can design our UI seamlessly. This makes our work very

seamlessly. This makes our work very simple because we don't have to prompt each and every detail. To be honest, prompting is difficult than drawing. The

major issue is sometimes we may not be able to prompt every minute details as all of us are not prompt engineers. Now

our website is updated and let's try to use the reload button. Cool. It works.

I'm really impressed. To edit our project, we can use the prompt box at the bottom right corner. For example,

let's change the color of the website to orange. So in the prompt box I'm going

orange. So in the prompt box I'm going to say change the primary color of the website to orange and hit enter. It took

only few seconds to update the color.

But still the result is not great because not all the elements color is changed to orange. Some of them are still in olive color. What do you think about this AI? Comment below your thoughts. And you can open the code by

thoughts. And you can open the code by clicking on the code option from the top right corner which opens the code files in a VS code like interface. But still I don't think this AI can outwork lovable.

Though Firebase Studio have some features which are not available in lovable, it can't beat lovable in terms of front-end features like UI design, responsiveness and also it is not producing results according to our

prompt means it lacks the ability to follow the instructions mentioned in our prompt and I am wondering how great it will be if these annotation and selection features are introduced and lovable. By the way, if you find my work

lovable. By the way, if you find my work helpful, consider liking and subscribing. Follow my channel for more

subscribing. Follow my channel for more videos like this. See you in the next video.