import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Introducing Firebase Studio

<SocialEmbed platform="youtube" id="vVAui3_rvD8" />

## Description

Discover Firebase Studio, an AI-powered agentive development environment that helps developers build and ship production quality full stack AI apps. From APIs to backends, frontends, mobile, and more, Firebase Studio is the tool you need to bring your ideas to life faster than ever.

Chapters:
0:00 - Firebase Studio overview
0:30 - Prototyping with AI
2:08 - Code mode and customization 
2:36 - Preview and deploy 
3:06 - Recap

Resources:
Check out the docs → https://goo.gle/4micjGg 

Subscribe to Firebase → https://goo.gle/Firebase

#Firebase 

Speaker: Rody Davis
Products Mentioned: Firebase,

## Transcript

### Firebase Studio overview

**0:00** · \[MUSIC PLAYING\] RODY DAVIS: Hey, Firebase developers.

**0:06** · Are you're ready to build full stack web apps faster than ever?

**0:09** · We're excited to introduce Firebase Studio, your AI-powered development environment now available in preview.

**0:17** · Firebase Studio not only helps you go from idea to fully functional app in record time by leveraging the power of generative AI, it also is a fully fledged development environment accessible from anywhere.

**0:28** · Let's dive in.

### Prototyping with AI

**0:31** · Let's start with the App Prototyping agent.

**0:33** · Imagine you have an idea for an app that generates an inspirational quote and then an image based on that quote.

**0:39** · Instead of starting from scratch, we can just describe our idea into Firebase Studio.

**0:43** · Log in to your Google account and then open up Firebase Studio to get started.

**0:48** · Enter a description of the app that you want to build.

**0:51** · In this case, we'll use the prompt to prototype an app that will generate images and texts with generative AI.

**0:57** · Click on Prototype with AI.

**0:59** · Firebase Studio generates an app blueprint based on your prompt, returning a proposed app name, required features, and style guidelines.

**1:08** · This is the stage where you can really start to think about what you want your app to do.

**1:11** · You can suggest new features or UI themes, and it will generate a new blueprint for you.

**1:16** · If you do not want an AI feature or want something completely different, edit the PRD and remove it.

**1:22** · For example, let's change the app name and color scheme.

**1:25** · Make sure to be as detailed as possible if you have something specific in mind.

**1:33** · Click Prototype this App and watch the magic happen as Firebase Studio App Prototyping agent scaffolds and builds out your app.

**1:40** · Because we asked for an AI feature, Firebase Studio prompts us for a Gemini API key.

**1:45** · We can then click Auto Generate to get a key and a brand new Firebase project.

**1:49** · Now let's take a look at what we got.

**1:55** · Click on Generate to create a new image and quote.

**2:01** · If you want to check out the Firebase project it just created, click on the New name in the app header.

**2:07** · Now let's take a look at the code.

### Code mode and customization

**2:09** · Firebase Studio gives you a fully functional code editor powered by Code OSS, the open source fork of VS Code.

**2:15** · You have full control over the generated code.

**2:18** · Want to tweak the UI, add a new feature, or debug the code?

**2:21** · No problem, we have covered.

**2:24** · You can use the built-in chat functionality to ask questions and get suggestions from our AI Assistant.

**2:29** · You can even change the built-in model if you have a preferred one or want to try out an experimental one from the Google AI API.

### Preview and deploy

**2:37** · You can see your changes in real time with the built-in preview.

**2:41** · And when you're ready to share your app with the world, you can publish it with Firebase App Posting.

**2:48** · After publishing, you can continue to make changes and roll them out when you're ready.

**2:53** · Now, while we showed off the App Prototyping agent flow, that's not all you can do with Firebase Studio.

**2:58** · You can import existing projects from a zip file or source control, or start with one of our many Firebase Studio templates.

**3:05** · Firebase Studio is an agentic cloud-based development environment that helps you build and ship production quality full stack AI apps, including APIs, back-ends, front-ends, mobile, and so much more.

### Recap

**3:16** · From AI-powered prototyping to an all-in-one, cloud-based development environment accessible from anywhere, it has everything you need to help make your app idea a reality.

**3:24** · If you have an idea for an app that you've been wanting to build, try it out now with the App Prototyping agent with Firebase Studio and share with us how it went.

**3:32** · We cannot wait to see what you're going to build.

**3:34** · Happy coding!

**3:36** · \[MUSIC PLAYING\]