Google Firebase Studio Agent Mode Just Killed Every AI App Builder (it's Free)

Today we're checking out Firebase Studio, the full stack AI workspace. It's easy to use and completely free. With this tool, you can build full stack apps and even mobile apps. It will support lot of frameworks and it automatically integrate Gemini. So you can build AI apps also. This is a website I built using Firebase Studio. This project is an AI calories check app. It helps you track your meals and shows details like calories, protein, and fat. It also gives an exact description of the food you upload, so you always know what you're eating. When you open Firebase.Studio, the first thing you'll notice is the heading the full stack AI workspace. Basically saying you can build full stack apps right here. Now, click the try Firebase Studio button. Here you can also see some suggested project ideas to get started and it supports a lot of frameworks. So you can build both web and mobile apps from one place. The best part is you can also import your existing projects and continue working on them here. Now I'm going to paste my prompt for the AI calories check app. This is my prompt here. You'll also notice an option to improve the prompt. Just click it and it will make your prompt even better. Once updated, the prompt looks much cleaner and more refined. From here, you can click the prototype button and it will instantly generate a prototype for your project, including colors, fonts, and frameworks, and AI libraries. Now it automatically gives the app a name called new tree snap. You can also edit the prototype if you want to make changes. It also suggests colors, fonts, and frameworks. For this project, it's going to use Next.js, TypeScript, Tailwind CSS, and Gemini AI. Once your prototype is ready, just click the button and it will generate the full project for you. First, Firebase Studio generates all the Gemini related code for your project. Once that's done, it moves on to the main app implementation. After the main app code is implemented, the AI automatically checks for errors. Finally, our application is running. But before testing the app, we need to provide the Gemini API key. You can either click the autogenerate option to create it automatically or use the Gemini API key link to create one manually. In my case, I just let it generate automatically. Now the API key is set up so we can check the website. At the top we can see the meal logs and below that we can upload a meal image. Now I'm uploading a chicken biryani pick. Click the button. Oh, in the first try we got an error. The error says cart is not defined. No worries, there's an autofix button here. Just click it and the AI will fix it. Once the AI fixed the error, I reuploaded the image and clicked the button. I hope this time we will get the response. Boom. Now the application is working. This is the response from the food image. It shows protein, calories, and fat. And the nice thing is it also gives an exact description of the food. Now you can just click the log meal button and it will be added to the meal list. Once it's submitted, you can see the meal in the list. If you want, you can edit the description, update the meal, or delete it. At the bottom, you can see another feature called portion advisor. You can select your goal and enter your profile details like age, gender, height, and weight. Once done, just click the get recommendation button. Boom. We got the recommendation based on the profile. You can just follow the description to achieve your goal. It says we need 2,800 calories and we've already eaten 1,300 calories based on our meal list. That's awesome. Really awesome. This app is really useful and can be a great tool for daily routine because it helps you track meals, count calories, and stay on top of your health goals. If you want, you can also view the web app in full screen mode. Our website UI looks really good. And another nice feature is that you can also see the full code of the project. You can also go and edit the code. And you can even commit the code to GitHub. That's awesome. Now I'm going to implement dark mode and light mode for our app. So I enter the prompt and hit submit. We just need to wait a few seconds. Nice. Now our app supports both light and dark mode. Click the theme toggle icon to see the options. We have light, dark, and system, dark theme looking nice. So that's our app built with Firebase Studio. It can generate code, fix errors, track meals, give nutrition advice, and even support dark and light mode. You can view and edit the full code and commit it to GitHub. Overall, it's a really powerful tool for daily use. Thanks for watching. If you found this video helpful, make sure to share it and don't forget to subscribe for more content like this.