{"id":456088,"date":"2025-04-14T21:00:31","date_gmt":"2025-04-14T21:00:31","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=456088"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=456088","title":{"rendered":"<span>Firebase Studio Explained: Features and How to Get Started<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>I recently tried using Firebase Studio, and it has been an interesting experience that I want to share with you. It&#8217;s a free, browser-based tool from Google that allows you to build full-stack web apps with AI assistance. Want to know more? Then read this article until the end.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eeb\/48f\/137\/eeb48f137056e1c6c2120d791819e241.png\" alt=\"Firebase Studio Explained\" title=\"Firebase Studio Explained\" width=\"1580\" height=\"917\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/eeb\/48f\/137\/eeb48f137056e1c6c2120d791819e241.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eeb\/48f\/137\/eeb48f137056e1c6c2120d791819e241.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Firebase Studio Explained<\/figcaption><\/div>\n<\/figure>\n<h3>What Is Firebase Studio?<\/h3>\n<p>Firebase Studio was officially unveiled during <strong>Google Cloud Next 2025<\/strong> (early April 2025) as one of Firebase\u2019s major new updates.<\/p>\n<p>In short, Firebase Studio is a cloud-based development environment by Google that lives at <a href=\"http:\/\/studio.firebase.google.com\" rel=\"noopener noreferrer nofollow\">studio.firebase.google.com<\/a>. It combines:<\/p>\n<ul>\n<li>\n<p>A full IDE based on VS Code (Code OSS)<\/p>\n<\/li>\n<li>\n<p>AI assistance from Gemini (Google\u2019s LLM)<\/p>\n<\/li>\n<li>\n<p>Deep integration with Firebase services (Firestore, Auth, Hosting, Functions, etc.)<\/p>\n<\/li>\n<li>\n<p>A visual app prototyping agent that can generate a full-stack app from a prompt<\/p>\n<\/li>\n<\/ul>\n<p>It\u2019s meant to help you go from idea to deployed app entirely from your browser\u2014with no setup, installations, or local environments.<\/p>\n<p>If to be honest, it&#8217;s not a new thing from Google; it&#8217;s a rebranded and updated version of <a href=\"https:\/\/proflead.dev\/posts\/will-project-idx-replace-vs-code-for-developers\/\" rel=\"noopener noreferrer nofollow\">Project IDX<\/a>.<\/p>\n<p>I would say currently the core feature is prototyping.<\/p>\n<h3>Prototyping with Firebase Studio<\/h3>\n<p><strong>Prototyping Agent\u2014<\/strong>I think it&#8217;s one of Firebase Studio&#8217;s most powerful features. It allows you to start building an app by simply describing what you want in natural language. I&#8217;ll show you a real example later in this article.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/294\/9b2\/cea\/2949b2ceac98d7cd79a026738c337165.png\" alt=\"Prototyping with Firebase Studio\" title=\"Prototyping with Firebase Studio\" width=\"667\" height=\"588\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/294\/9b2\/cea\/2949b2ceac98d7cd79a026738c337165.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/294\/9b2\/cea\/2949b2ceac98d7cd79a026738c337165.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Prototyping with Firebase Studio<\/figcaption><\/div>\n<\/figure>\n<p>What makes this feature so impactful is that it:<\/p>\n<ul>\n<li>\n<p><strong>Accelerates MVP creation<\/strong> \u2013 great for testing ideas quickly<\/p>\n<\/li>\n<li>\n<p><strong>Reduces boilerplate<\/strong> \u2013 lets you focus on unique features<\/p>\n<\/li>\n<li>\n<p><strong>Works with real code<\/strong> \u2013 so you can edit, extend, and deploy immediately<\/p>\n<\/li>\n<li>\n<p><strong>One-Click Deployment to Production &#8212; <\/strong>once you\u2019re satisfied with your application, Firebase Studio makes it trivial to deploy it. It leverages <strong>Firebase App Hosting<\/strong> under the hood so that with a single <strong>\u201cPublish\u201d<\/strong> button, your web app is built and deployed globally on Google\u2019s CDN.<\/p>\n<\/li>\n<\/ul>\n<p>Currently, it supports Next.js projects, but Google is planning to expand to other frameworks soon.<\/p>\n<h3>How Is It Different from the Firebase Console?<\/h3>\n<p>Firebase Studio is made for <strong>actual development<\/strong>. You write code, test it, preview your app, and deploy \u2014 all from within Firebase Studio.<\/p>\n<p>The Firebase Console manages the project settings, database rules, analytics, and production configurations. Firebase Studio builds on top of that by letting you code, prototype, and iterate faster than ever.<\/p>\n<p>So, these are two completely different tools.<\/p>\n<h3>Use Cases for Firebase Studio<\/h3>\n<ol>\n<li>\n<p><strong>Rapid Prototyping:<\/strong> Build working versions of your app in hours, not days. Great for pitching ideas or testing concepts. <\/p>\n<\/li>\n<li>\n<p><strong>Client Demos:<\/strong> Show functional versions of apps to clients without having to maintain a local environment. <\/p>\n<\/li>\n<li>\n<p><strong>Learning &amp; Education<\/strong>: Perfect for students, educators, and bootcamps. No installations. No config headaches. Just code. <\/p>\n<\/li>\n<li>\n<p><strong>Solo Developers &amp; Hackathons<\/strong>: Move fast and build entire apps from your browser during weekend projects or events. <\/p>\n<\/li>\n<li>\n<p><strong>Cross-Team Collaboration:<\/strong> Allow frontend and backend devs to work in the same environment. Coming soon: real-time coding collaboration. <\/p>\n<\/li>\n<li>\n<p><strong>AI Feature Exploration:<\/strong> Easily experiment with AI-driven features using built-in Gemini integration and Genkit setup.<\/p>\n<\/li>\n<\/ol>\n<h3>Getting Started with Firebase Studio<\/h3>\n<p>It&#8217;s straightforward. Follow<\/p>\n<p> these steps:<\/p>\n<ul>\n<li>\n<p>Navigate to <a href=\"http:\/\/studio.firebase.google.com\" rel=\"noopener noreferrer nofollow\">studio.firebase.google.com<\/a> <\/p>\n<\/li>\n<li>\n<p>Sign in with your Google account.\u200b<\/p>\n<\/li>\n<li>\n<p>On the dashboard, locate the <strong>&#171;Prototype an app with AI&#187;<\/strong> field.\u200b In the input field, enter a natural language description of your app. For example: <em>A simple recipe maker that generates recipes based on the ingredients I have in my fridge. Simple UI, green color scheme.<\/em><\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/052\/323\/996\/052323996b7c22e016a9e82c515c7e40.png\" alt=\"Getting Started with Firebase Studio\" title=\"Getting Started with Firebase Studio\" width=\"1551\" height=\"794\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/052\/323\/996\/052323996b7c22e016a9e82c515c7e40.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/052\/323\/996\/052323996b7c22e016a9e82c515c7e40.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Getting Started with Firebase Studio<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p>Optionally, upload an image to guide the app&#8217;s design, such as a color scheme or layout inspiration, and click the &#171;Prototype with AI&#187; button.<\/p>\n<\/li>\n<li>\n<p>Firebase Studio will generate a blueprint outlining. If you aren&#8217;t happy with it, you can use the chat pane to adjust the blueprint and click &#171;Edit&#187; to modify the blueprint.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a25\/db0\/8ee\/a25db08eec96132ef25a169d41a704a8.png\" alt=\"Firebase Studio will generate a blueprint outlining\" title=\"Firebase Studio will generate a blueprint outlining\" width=\"1035\" height=\"867\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a25\/db0\/8ee\/a25db08eec96132ef25a169d41a704a8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a25\/db0\/8ee\/a25db08eec96132ef25a169d41a704a8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Firebase Studio will generate a blueprint outlining<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>Once the app is generated, a preview will appear.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a62\/b6d\/a6b\/a62b6da6ba8dcfaf6b31f9821684ef96.png\" alt=\"Preview of the App\" title=\"Preview of the App\" width=\"1676\" height=\"1365\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a62\/b6d\/a6b\/a62b6da6ba8dcfaf6b31f9821684ef96.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a62\/b6d\/a6b\/a62b6da6ba8dcfaf6b31f9821684ef96.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Preview of the App<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>To request modifications or add features, use the chat interface, element selector, or the &#171;annotate&#187; button.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/35f\/c0d\/8b5\/35fc0d8b51c62df85de7c9a50bd99b02.png\" alt=\"To request modifications or add features\" title=\"To request modifications or add features\" width=\"1676\" height=\"1365\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/35f\/c0d\/8b5\/35fc0d8b51c62df85de7c9a50bd99b02.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/35f\/c0d\/8b5\/35fc0d8b51c62df85de7c9a50bd99b02.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>To request modifications or add features<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>Once you are happy with the result, you can publish the application to the Firebase App Hosting by clicking the &#171;Publish&#187; button. Then, Firebase Studio will guide you through the process. If you are stuck, you can watch <a href=\"https:\/\/youtu.be\/DzlvILoMYiQ\" rel=\"noopener noreferrer nofollow\">my video tutorial<\/a> with a more detailed explanation.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da5\/d30\/fd6\/da5d30fd6a97eee8f310f831f61a8c9d.png\" alt=\"Publish Application\" title=\"Publish Application\" width=\"1676\" height=\"358\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/da5\/d30\/fd6\/da5d30fd6a97eee8f310f831f61a8c9d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/da5\/d30\/fd6\/da5d30fd6a97eee8f310f831f61a8c9d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Publish Application<\/figcaption><\/div>\n<\/figure>\n<h3>Firebase Studio Pricing<\/h3>\n<p>Firebase Studio itself is currently in <strong>Preview<\/strong> and offers a free tier for developers:\u200b<\/p>\n<h4>Free Tier (Preview Access)<\/h4>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/888\/8e2\/966\/8888e296608a6b4460bb254ddaa21c28.png\" alt=\"Firebase Studio Pricing\" title=\"Firebase Studio Pricing\" width=\"678\" height=\"71\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/888\/8e2\/966\/8888e296608a6b4460bb254ddaa21c28.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/888\/8e2\/966\/8888e296608a6b4460bb254ddaa21c28.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Firebase Studio Pricing<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>3 workspaces<\/strong> per user at no cost.<\/p>\n<\/li>\n<li>\n<p><strong>10 workspaces<\/strong> for members of the Google Developer Program.<\/p>\n<\/li>\n<li>\n<p><strong>30 workspaces<\/strong> for Premium members of the Google Developer Program. <\/p>\n<\/li>\n<\/ul>\n<p>However, there are some instances when costs may apply.<\/p>\n<ul>\n<li>\n<p><strong>Firebase App Hosting<\/strong>: Deploying your app requires a linked billing account, transitioning your project to the Blaze (pay-as-you-go) plan. <\/p>\n<\/li>\n<li>\n<p><strong>Gemini API Usage<\/strong>: Utilizing Gemini for AI assistance beyond the free tier may lead to charges, especially for Google Workspace users who need a valid Gemini Code Assist subscription. \u200bBut make sure you set up <a href=\"https:\/\/youtu.be\/PSqoJdlIae8\" rel=\"noopener noreferrer nofollow\">a budget alarm<\/a>.<\/p>\n<\/li>\n<li>\n<p><strong>Other Firebase Services<\/strong>: Services like Firestore, Cloud Functions, and Cloud Storage have free usage quotas, but exceeding these limits will result in charges. <\/p>\n<\/li>\n<\/ul>\n<h2>Video Tutorial<\/h2>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/67fd1e308f844fa8249540af\" data-style=\"\" id=\"67fd1e308f844fa8249540af\" width=\"\"><\/div>\n<p><strong><em>Watch on YouTube: <\/em><\/strong><a href=\"https:\/\/youtu.be\/DzlvILoMYiQ\" rel=\"noopener noreferrer nofollow\"><strong><em>Firebase Studio<\/em><\/strong><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>This tool is still in preview so that you may encounter some bugs or limitations. While Gemini is helpful, it can occasionally misinterpret prompts\u2014so be ready to revise your input or fine-tune the results. If Google continues improving it, this could become the default IDE for Firebase developers.<\/p>\n<p>Have you already tried it? I\u2019d love to hear your thoughts in the comments below.<\/p>\n<p>Thanks for reading \u2014 cheers! \ud83d\ude09<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/900768\/\"> https:\/\/habr.com\/ru\/articles\/900768\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>I recently tried using Firebase Studio, and it has been an interesting experience that I want to share with you. It&#8217;s a free, browser-based tool from Google that allows you to build full-stack web apps with AI assistance. Want to know more? Then read this article until the end.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Firebase Studio Explained<\/figcaption><\/div>\n<\/figure>\n<h3>What Is Firebase Studio?<\/h3>\n<p>Firebase Studio was officially unveiled during <strong>Google Cloud Next 2025<\/strong> (early April 2025) as one of Firebase\u2019s major new updates.<\/p>\n<p>In short, Firebase Studio is a cloud-based development environment by Google that lives at <a href=\"http:\/\/studio.firebase.google.com\" rel=\"noopener noreferrer nofollow\">studio.firebase.google.com<\/a>. It combines:<\/p>\n<ul>\n<li>\n<p>A full IDE based on VS Code (Code OSS)<\/p>\n<\/li>\n<li>\n<p>AI assistance from Gemini (Google\u2019s LLM)<\/p>\n<\/li>\n<li>\n<p>Deep integration with Firebase services (Firestore, Auth, Hosting, Functions, etc.)<\/p>\n<\/li>\n<li>\n<p>A visual app prototyping agent that can generate a full-stack app from a prompt<\/p>\n<\/li>\n<\/ul>\n<p>It\u2019s meant to help you go from idea to deployed app entirely from your browser\u2014with no setup, installations, or local environments.<\/p>\n<p>If to be honest, it&#8217;s not a new thing from Google; it&#8217;s a rebranded and updated version of <a href=\"https:\/\/proflead.dev\/posts\/will-project-idx-replace-vs-code-for-developers\/\" rel=\"noopener noreferrer nofollow\">Project IDX<\/a>.<\/p>\n<p>I would say currently the core feature is prototyping.<\/p>\n<h3>Prototyping with Firebase Studio<\/h3>\n<p><strong>Prototyping Agent\u2014<\/strong>I think it&#8217;s one of Firebase Studio&#8217;s most powerful features. It allows you to start building an app by simply describing what you want in natural language. I&#8217;ll show you a real example later in this article.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Prototyping with Firebase Studio<\/figcaption><\/div>\n<\/figure>\n<p>What makes this feature so impactful is that it:<\/p>\n<ul>\n<li>\n<p><strong>Accelerates MVP creation<\/strong> \u2013 great for testing ideas quickly<\/p>\n<\/li>\n<li>\n<p><strong>Reduces boilerplate<\/strong> \u2013 lets you focus on unique features<\/p>\n<\/li>\n<li>\n<p><strong>Works with real code<\/strong> \u2013 so you can edit, extend, and deploy immediately<\/p>\n<\/li>\n<li>\n<p><strong>One-Click Deployment to Production &#8212; <\/strong>once you\u2019re satisfied with your application, Firebase Studio makes it trivial to deploy it. It leverages <strong>Firebase App Hosting<\/strong> under the hood so that with a single <strong>\u201cPublish\u201d<\/strong> button, your web app is built and deployed globally on Google\u2019s CDN.<\/p>\n<\/li>\n<\/ul>\n<p>Currently, it supports Next.js projects, but Google is planning to expand to other frameworks soon.<\/p>\n<h3>How Is It Different from the Firebase Console?<\/h3>\n<p>Firebase Studio is made for <strong>actual development<\/strong>. You write code, test it, preview your app, and deploy \u2014 all from within Firebase Studio.<\/p>\n<p>The Firebase Console manages the project settings, database rules, analytics, and production configurations. Firebase Studio builds on top of that by letting you code, prototype, and iterate faster than ever.<\/p>\n<p>So, these are two completely different tools.<\/p>\n<h3>Use Cases for Firebase Studio<\/h3>\n<ol>\n<li>\n<p><strong>Rapid Prototyping:<\/strong> Build working versions of your app in hours, not days. Great for pitching ideas or testing concepts. <\/p>\n<\/li>\n<li>\n<p><strong>Client Demos:<\/strong> Show functional versions of apps to clients without having to maintain a local environment. <\/p>\n<\/li>\n<li>\n<p><strong>Learning &amp; Education<\/strong>: Perfect for students, educators, and bootcamps. No installations. No config headaches. Just code. <\/p>\n<\/li>\n<li>\n<p><strong>Solo Developers &amp; Hackathons<\/strong>: Move fast and build entire apps from your browser during weekend projects or events. <\/p>\n<\/li>\n<li>\n<p><strong>Cross-Team Collaboration:<\/strong> Allow frontend and backend devs to work in the same environment. Coming soon: real-time coding collaboration. <\/p>\n<\/li>\n<li>\n<p><strong>AI Feature Exploration:<\/strong> Easily experiment with AI-driven features using built-in Gemini integration and Genkit setup.<\/p>\n<\/li>\n<\/ol>\n<h3>Getting Started with Firebase Studio<\/h3>\n<p>It&#8217;s straightforward. Follow<\/p>\n<p> these steps:<\/p>\n<ul>\n<li>\n<p>Navigate to <a href=\"http:\/\/studio.firebase.google.com\" rel=\"noopener noreferrer nofollow\">studio.firebase.google.com<\/a> <\/p>\n<\/li>\n<li>\n<p>Sign in with your Google account.\u200b<\/p>\n<\/li>\n<li>\n<p>On the dashboard, locate the <strong>&#171;Prototype an app with AI&#187;<\/strong> field.\u200b In the input field, enter a natural language description of your app. For example: <em>A simple recipe maker that generates recipes based on the ingredients I have in my fridge. Simple UI, green color scheme.<\/em><\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Getting Started with Firebase Studio<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p>Optionally, upload an image to guide the app&#8217;s design, such as a color scheme or layout inspiration, and click the &#171;Prototype with AI&#187; button.<\/p>\n<\/li>\n<li>\n<p>Firebase Studio will generate a blueprint outlining. If you aren&#8217;t happy with it, you can use the chat pane to adjust the blueprint and click &#171;Edit&#187; to modify the blueprint.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Firebase Studio will generate a blueprint outlining<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>Once the app is generated, a preview will appear.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Preview of the App<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>To request modifications or add features, use the chat interface, element selector, or the &#171;annotate&#187; button.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>To request modifications or add features<\/figcaption><\/div>\n<\/figure>\n<\/li>\n<li>\n<p>Once you are happy with the result, you can publish the application to the Firebase App Hosting by clicking the &#171;Publish&#187; button. Then, Firebase Studio will guide you through the process. If you are stuck, you can watch <a href=\"https:\/\/youtu.be\/DzlvILoMYiQ\" rel=\"noopener noreferrer nofollow\">my video tutorial<\/a> with a more detailed explanation.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Publish Application<\/figcaption><\/div>\n<\/figure>\n<h3>Firebase Studio Pricing<\/h3>\n<p>Firebase Studio itself is currently in <strong>Preview<\/strong> and offers a free tier for developers:\u200b<\/p>\n<h4>Free Tier (Preview Access)<\/h4>\n<figure class=\"full-width\">\n<div><figcaption>Firebase Studio Pricing<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>3 workspaces<\/strong> per user at no cost.<\/p>\n<\/li>\n<li>\n<p><strong>10 workspaces<\/strong> for members of the Google Developer Program.<\/p>\n<\/li>\n<li>\n<p><strong>30 workspaces<\/strong> for Premium members of the Google Developer Program. <\/p>\n<\/li>\n<\/ul>\n<p>However, there are some instances when costs may apply.<\/p>\n<ul>\n<li>\n<p><strong>Firebase App Hosting<\/strong>: Deploying your app requires a linked billing account, transitioning your project to the Blaze (pay-as-you-go) plan. <\/p>\n<\/li>\n<li>\n<p><strong>Gemini API Usage<\/strong>: Utilizing Gemini for AI assistance beyond the free tier may lead to charges, especially for Google Workspace users who need a valid Gemini Code Assist subscription. \u200bBut make sure you set up <a href=\"https:\/\/youtu.be\/PSqoJdlIae8\" rel=\"noopener noreferrer nofollow\">a budget alarm<\/a>.<\/p>\n<\/li>\n<li>\n<p><strong>Other Firebase Services<\/strong>: Services like Firestore, Cloud Functions, and Cloud Storage have free usage quotas, but exceeding these limits will result in charges. <\/p>\n<\/li>\n<\/ul>\n<h2>Video Tutorial<\/h2>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/67fd1e308f844fa8249540af\" data-style=\"\" id=\"67fd1e308f844fa8249540af\" width=\"\"><\/div>\n<p><strong><em>Watch on YouTube: <\/em><\/strong><a href=\"https:\/\/youtu.be\/DzlvILoMYiQ\" rel=\"noopener noreferrer nofollow\"><strong><em>Firebase Studio<\/em><\/strong><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>This tool is still in preview so that you may encounter some bugs or limitations. While Gemini is helpful, it can occasionally misinterpret prompts\u2014so be ready to revise your input or fine-tune the results. If Google continues improving it, this could become the default IDE for Firebase developers.<\/p>\n<p>Have you already tried it? I\u2019d love to hear your thoughts in the comments below.<\/p>\n<p>Thanks for reading \u2014 cheers! \ud83d\ude09<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/900768\/\"> https:\/\/habr.com\/ru\/articles\/900768\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-456088","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/456088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=456088"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/456088\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=456088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=456088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=456088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}