Firebase Studio includes a web-based interface that lets you rapidlyprototype and generate AI-forward web apps using multimodal prompts, includingnatural language, images, and drawing tools. The agent supportsNext.js apps, with other platforms and frameworks planned in the future.

TheApp Prototyping agent is a streamlined no-code development flow thatuses generative AI to develop, test, iterate, and publish a full-stack,agentic web app. You describe your app idea in natural language with anoptional image, andthe agent generates an app blueprint, code, and a web preview. Toassist in the development and publishing of your full-stack app,Firebase Studio can automatically provision the following services for you:

• If your app uses AI:Firebase Studio adds theGemini Developer API to your app, using the power ofGenkit flows to work withGemini.You can use your ownGemini API key or letFirebase Studioprovision a Firebase project and Gemini API key for you.
• If you want to publish your app to the web:Firebase Studio creates aproject and provides a quick way to publish your app withFirebase App Hosting.

Important: When theApp Prototyping agent sets up theGemini API keyand other Firebase services, it creates a new Firebase project toassociate with the workspace. At this time, this is the only project that canbe associated when publishing from theApp Prototyping agent view. Note thatyou can publish to other Firebase projects bychecking your code intoGitHub andcreating anApp Hostingbackend. You can also useCodeview to integrate Firebase services.

You can refine the app using natural language, images, and drawing tools,edit code directly, roll back changes, publish the app,and monitor its performance—all fromFirebase Studio.

Note: TheApp Prototyping agent can help you build web apps with Next.js.Support for other platforms and frameworks is coming soon!

Get started

To get started with theApp Prototyping agent, follow these steps:

1. Log into your Google Account and openFirebase Studio.

2. In thePrototype an app with AI field, describe your app idea innatural language.

   For example, you could enter a prompt like the following to create arecipe generation app:

   Use secure coding practices to create an error-free web app that letsusers upload a photo or take a picture with their browsercamera. The app identifies the food in the picture and generates arecipe and accompanying image that includes that food.If no food product is identified, generate a random dessert recipe.

   Tip: For best results, be as specific as possible in your prompt. Include the features you want, user workflows, and data requirements. Optionally, clickImprove prompt to askGemini to refine your initial prompt. Also understand that the most effective development processes with AI are iterative and you can continue to refine and add features collaboratively withGemini. Learn more about craftingeffective prompts.

3. Optionally, upload an image to accompany your prompt. For example, youcan upload an image that contains the color scheme you want your app touse and tellFirebase Studio to use it. Images must be less than 3 MiB.

4. ClickPrototype with AI.

   TheApp Prototyping agent generates an app blueprint based on yourprompt, returning a proposed app name, required features,and style guidelines.

5. Review the blueprint. If necessary, make a few changes. For example,you could change the proposed app name or color scheme using one ofthese options:

   • ClickeditCustomize and edit theblueprint directly. Make your changes and clickSave.

   • In theDescribe... field in the chat pane, add clarifying questionsand context. You can also upload additional images.

6. ClickPrototype this app.

   Important:Gemini can generate output that seems plausible but is factually incorrect. It may respond with inaccurate information that doesn't represent Google's views. Validate all output from Gemini before you use it and do not use untested generated code in production. Do not enter personally-identifiable information (PII) or user data into the chat.

7. TheApp Prototyping agent begins coding your app.

   • If yourapp uses AI, you're prompted to add or generate aGemini API key.If you click Auto-generate, theApp Prototyping agent provisions aFirebase project and aGemini API key for you.
   Important: If you chooseAuto-generate, theApp Prototyping agent creates aFirebase project on your behalf with a prefix that matches the name of yourFirebase Studio workspace and creates a newGemini API key in the project. It also stores the key within yourFirebase Studio workspace in an.env file. To access your new project at any time, click the project name at the top of the page. To access yourGemini API key to copy or delete in the future, use theGoogle Cloud console.

Test, refine, debug, and iterate

After the initial app is generated, you can test, refine, debug, and iterate.

• Review and interact with your app: After code generation completes,a preview of your app appears. You can interact with the preview directly totest it. Learn more atPreview your app.

• AddCloud Firestore andFirebase Authentication: During the iteration phase,you can ask theApp Prototyping agent to add user authentication and adatabase usingCloud Firestore andFirebase Authentication. For example, give usersthe ability to save and download recipes with a prompt like the following:

  Add user authentication to the app. Authenticated users can:  - Download the recipe and its generated image as a PDF (Print).  - Save the recipe as public or private and make accessible to a search    feature. For now, just save the text, not the image, to the database.Important: Only authenticated users can download the PDF.

  Tip: TheApp Prototyping agent can addCloud Firestore andFirebase Authentication to your app during the iteration phase, not in the initialapp blueprint.

• Fix any errors as they occur: In most cases, theApp Prototyping agentprompts you to fix any errors that arise. ClickFix Error to allowit to attempt a fix.

  If you receive errors that you're not prompted to fix automatically,copy the error and any relevant context (for example, "Can you fix thiserror in my Firebase initialization code?") into the chat window andsend it toGemini.

  Tip:Gemini explains its reasoning, but you can also ask it to explain its plan before it executes it.

• Test and iterate using natural language: Test your app thoroughly andwork with theApp Prototyping agent to iterate on the code and blueprintuntil you're happy with it.

  While inPrototyper view, you can also use the followingfeatures:

  • ClickAnnotate to draw directly on the Preview window. Use the availableshape, image, and text tools, along with an optional text prompt, tovisually describe what you want theApp Prototyping agent to change.

  • ClickSelect to select a specific element and enter instructions fortheApp Prototyping agent. This lets you quickly target a specific icon,button, piece of text, or other element. When you click an image, you alsohave the option of searching for and selecting a stock image fromUnsplash.

  Optionally, you can clickShare preview link to share your app publicly and temporarily usingFirebase Studiopublic previews.

• Create a Firebase project: TheApp Prototyping agent provisions aFirebase project on your behalf when you:

  • Auto-generate a Gemini API key
  • Ask to connect your app to a Firebase project
  • Ask for help connecting your app to Firebase services, such asCloud Firestore orFirebase Authentication
  • Click thePublish button and set upFirebase App Hosting

  To change the Firebase project connected to your workspace, prompttheApp Prototyping agent with the project ID you want to use instead. Forexample, "Switch to Firebase project with ID<your-project-id>."

• Test the app and verifyCloud Firestore database rules: In the apppreview pane, upload an image that shows different foods to test yourapp's ability to identify the ingredients and generate and save recipes.

  Sign in as different users and generate recipes: make sure thatauthenticated users can see their private recipes and recipes and thatall users see public recipes.

  When you ask theApp Prototyping agent to addCloud Firestore, it writesand deploysCloud Firestore database rules for you. Review the rules in theFirebase console.

• Debug and iterate directly in the code: ClickSwitch to Code to openCode view, where you can seeall of your app's files and modify your code directly. You can switch backtoPrototyper mode at any time.

  While inCode view, you can also use the followinghelpful features:

  • Firebase Studio'sbuilt-in debugging and reporting features toinspect, debug, and audit your app.

  • AI assistance usingGeminieither inline within your code or usingGemini interactive chat(both are available by default). Interactive chat candiagnose issues, provide solutions, and run tools to help fix your appfaster.To access chat, clicksparkGeminiat the bottom of the workspace.

    Note:Apps created with theApp Prototyping agent default tothePrototyper chat inCode view. To useGemini interactive chat instead, underGemini, click+, then selectNew Chat. Toreturn toPrototyper chat, clickhistoryRecent chats, andthen choosePrototyper chat.

  • Access theFirebase Local Emulator Suite to view database andauthentication data. To open the emulator inyour workspace:

    1. ClickSwitch to Code and open theFirebase Studio extension(Ctrl+',Ctrl+', orCmd+',Cmd+' on MacOS).

    2. Scroll toBackend ports and expand it.

    3. In theActions column that corresponds toPort 4000, clickOpen in new window.

• Test and measure your generative AI feature performance: You can usethe Genkit Developer UI to run your Genkit AI flows, test, debug, interactwith different models, refine your prompts, and more.

  To load your Genkit flows in the Genkit Developer UI and start testing:

  1. From the terminal in yourFirebase Studio workspace, run thefollowing command to source yourGemini API key and start theGenkit server:

     npmrungenkit:watch

  2. Click the Genkit Developer UI link. The Genkit Developer UI opens ina new window with your flows, prompts, embedders, and a selection ofdifferent available models.

  Learn more about the Genkit Developer UI atGenkit DeveloperTools.

Publish your app withFirebase App Hosting

After you've tested your app and are satisfied with it in your workspace,you can publish it to the web withFirebase App Hosting.

Important:Firebase App Hosting requires aCloud Billing account. When you link a billing account to a Firebase project, then your project is automatically upgraded to thepay-as-you-go Blaze pricing plan and yourGemini API and other Firebase and Google Cloud service usage is upgraded to the paid tier. You will be charged for usage of paid services that exceed the no-cost quota. Learn more atUnderstandApp Hosting costs,Firebase pricing, andGemini Developer API pricing.

When you set upApp Hosting,Firebase Studio creates aFirebase projectfor you (if one was not already created by auto-generating aGemini API keyor other backend services)and guides you through linking aCloud Billing account.

To publish your app:

1. ClickPublish to set up yourFirebase project and publish your app.ThePublish your app pane appears.

   Important: If you did notauto-generate aGemini APIkey or prompttheApp Prototyping agent to create a Firebase project,Firebase Studio provisions aFirebaseproject on yourbehalf when you clickPublish. You can access the Firebase project byclicking the project name at the top of the page.

2. In theFirebase project step, theApp Prototyping agent displays theFirebase project associated with the workspace. If a Firebase projectdoesn't already exist, theApp Prototyping agent creates a new project foryou. ClickNext to proceed.

3. In theLinkCloud Billing account step, choose one of the following:

   • Select theCloud Billing account that you want to link to your Firebaseproject.

   • If you don't have aCloud Billing account or want to create a new one,clickCreate aCloud Billing account. This opens theGoogle Cloud console, where you cancreate a new self-serveCloud Billingaccount.After you create the account, return toFirebase Studio and selectthe account from theLinkCloud Billing list.

4. ClickNext.Firebase Studio links the billing account to the projectassociated with your workspace, created either when you auto-generated aGemini API key or when you clickedPublish.

   Important:Firebase App Hosting requires aCloud Billing account. When you link a billing account to a Firebase project, then your project is automatically upgraded to thepay-as-you-go Blaze pricing plan and yourGemini API and other Firebase and Google Cloud service usage is upgraded to the paid tier. You will be charged for usage of paid services that exceed the no-cost quota. Learn more atUnderstandApp Hosting costs,Firebase pricing, andGemini Developer API pricing.

5. ClickSet up services. TheApp Prototyping agent beginsprovisioning Firebase services.

6. ClickPublish now.Firebase Studio sets up Firebase servicesand then launches theApp Hosting rollout. This can take up to severalminutes to complete.To learn more about what's happening behind the scenes, seeTheApp Hosting build process.

   Tip: If you don't want to publish now, you can clickPublish later.

7. When the publish step completes, theApp overview appears with aURL and app insights powered byApp Hosting observability. To use acustom domain (like example.com or app.example.com) instead of theFirebase-generated domain, you canadd a customdomain in theFirebase console.

Tip: If you receive any errors during publishing, seeI received a "Failed topublish app" error afterpublishing for instructionson how to find and fix publishing errors.

For more information aboutApp Hosting, seeUnderstandApp Hosting and how itworks.

Secure your app withFirebase App Check and reCAPTCHA Enterprise

If you've integrated Firebase or Google Cloud services into your app,Firebase App Check helps protect your app backends from abuse by preventingunauthorized clients from accessing your Firebase resources. It works withboth Google services (including Firebase and Google Cloud services) andyour own custom backends to keep your resources safe.

We recommend addingApp Check to any app you post publicly to protect yourbackend resources from abuse.

This section guides you through setting upApp Check withinFirebase Studio usingreCAPTCHAEnterprise for a web appcreated by theApp Prototyping agent, but you can set upApp Check withinany app that implements Firebase services and can implement custom providers.Learn more atFirebase App Check.

ReCAPTCHA Enterprise providesup to 10,000 assessments atno-cost.

Step 1: Set up reCAPTCHA Enterprise for your app

1. Open thereCAPTCHA Enterprisesection of theGoogle Cloud console.

2. Select the name of your Firebase project from theGoogle Cloud consoleproject picker.

3. If you're prompted to enable the reCAPTCHA Enterprise API, do so.

4. ClickGet started, and add aDisplay name for your reCAPTCHAsite key.

5. Accept the defaultWebApplication type key.

6. ClickAdd a domain and add a domain. You'll want to add yourApp Hosting domain (for example,studio--PROJECT_ID.REGION.hosted.app)and any custom domains you use with or plan to use with your app.

7. ClickNext step.

8. LeaveWill you use challenges? unselected.

9. ClickCreate key.

10. Copy and save yourKey ID and proceed toConfigureApp Check.

Step 2: ConfigureApp Check

1. Open theFirebase console and clickBuild >App Check from the navigation menu.

2. ClickGet started, then clickRegister next to your app.

3. Click to expandReCAPTCHA and paste the Key ID you generated forreCAPTCHA Enterprise.

4. ClickSave.

Step 3: AddApp Check to your code

1. Return toFirebase Studio and inCode view, addthe site key you generated to your.env file:

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

2. If you don't already have your Firebase configuration saved to.env,obtain it:

   • From theFirebase console,openProject settings and locate it within your the section thatcorresponds with your app.

   • From the Terminal inCode view:

     1. Log into Firebase:firebase auth login
     2. Select your project:firebase useFIREBASE_PROJECT_ID
     3. Obtain the Firebase config:firebase apps:sdkconfig

3. Add the configuration to your.env file so that it looks like thefollowing:

   NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEYNEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAINNEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_IDNEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKETNEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_IDNEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_IDNEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

4. AddApp Check to your app code. You can askGemini to addApp Check with reCAPTCHA Enterprise to your app (be sure tospecify "reCAPTCHA Enterprise" and be sure to double-check it!), orfollow the steps inInitializeApp Check.

5. Re-publish your site toApp Hosting. Try testing yourdatabase and authentication features to generate some data.

6. Verify thatApp Check is receiving requests in theFirebase console by openingBuild >App Check.

7. Click to inspectCloud Firestore. After you verify that requests arrive,clickEnforce to enforceApp Check.

8. Repeat verification and enforcement forFirebase Authentication.

If, after you have registered your app forApp Check, you want to run yourapp in an environment thatApp Check would normally not classify as valid,such as locally during development, or from a continuous integration (CI)environment, you can create a debug build of your app that uses theApp Check debug provider instead of a real attestation provider. Learn moreatUseApp Check with the debug provider in webapps.

Monitor your app

TheApp overview panel inFirebase Studio provides keymetrics and information about your app, letting you monitor your web app'sperformance usingApp Hosting's built-in observability tools. After yoursite rolls out, you can access the overview by clickingPublish. From thispanel, you can:

• ClickPublish to release a new version of your app.
• Share the link to your app or open your app directly inVisit your app.
• Review a summary of your app's performance over the last 7 days,including the total number of requests and the status of your latestrollout. ClickView details to access even more information in theFirebase console.
• View a graph of the number of the number of requests your app hasreceived over the last 24 hours, broken down by HTTP status code.
• View the activation status of Firebase services likeFirebase Authentication andCloud Firestore.

If you close the App overview panel, you can re-open it at any time byclickingPublish.

Learn more about managing and monitoringApp Hosting rollouts atManage rollouts and releases.

Roll back your deployment

If you've deployed successive versions of your app toApp Hosting, you canroll it back to one of the earlier versions. You can also remove it.

• To roll back a published site:

  1. OpenApp Hosting in theFirebase console.

  2. Locate your app's backend, clickView, and then clickRollouts.

  3. Next to the deployment you want to roll back to, clickMoremore_vert, then chooseRollback to this build, and confirm.

  Learn more atManage rollouts and releases.

• To remove yourApp Hosting domain from the web:

  1. From theFirebase console,openApp Hosting, and clickView in theFirebase Studio app section.

  2. In theBackend information section, clickManage. TheDomains page loads.

  3. Next to your domain, clickMoremore_vert, then chooseDisable domain,and confirm.

  This removes your domain from the web. To fully remove yourApp Hosting backend, follow the instructions inDelete abackend.

UseGenkit Monitoring for your deployed features

You can monitor yourGenkit feature steps, inputs, and outputs by enablingtelemetry to your AI flow code.Genkit's telemetry feature lets you monitortheperformance and usage of your AI flows. This data can help you identify areasfor improvement, troubleshoot issues, optimize your prompts and flows for betterperformance and cost efficiency, and track the usage of your flows over time.

To set up monitoring inGenkit, you add telemetry to theGenkit AI flowsand then view the results in theFirebase console.

Important: Genkit Monitoring relies on telemetry data written to Google CloudLogging, Metrics, and Trace, which are paid services. View theGoogle Cloud Observability pricingpage for pricing details and to learn about free-of-charge tier limits.

Step 1: Add telemetry to yourGenkit flow code inFirebase Studio

To set up monitoring in your code:

1. If you aren't already inCode view, clickSwitch to Code to open it.

2. Checkpackage.json to verify the version ofGenkit that's installed.

3. Open the terminal (Ctrl-Shift-C, orCmd-Shift-C in MacOS).

4. Click inside the terminal and install the Firebase plugin, using theversion that matches yourpackage.json file. For example, if theGenkit packages in yourpackage.json are at 1.0.4, you should run the following command toinstall the plugin:

   npmi--save@genkit-ai/firebase@1.0.4

5. FromExplorer, expandsrc > ai > flows. One or more TypeScript filesthat contain yourGenkit flows appear in theflows folder.

6. Click one of the flows to open it.

   Tip: Note theprompt section of the file: You can edit this manually torefineGemini's responses.

7. At the bottom of the imports section of the file, add the following toimport and enableFirebaseTelemetry:

   import{enableFirebaseTelemetry}from'@genkit-ai/firebase';enableFirebaseTelemetry();

   Tip: To learn more about advanced telemetry options inGenkit, seeAdvanced configuration.

Step 2: Set up permissions

Firebase Studio enabled therequiredAPIs for you when itset up your Firebase project, but you also need to provide permissions to theApp Hosting service account.

To set up permissions:

1. Open theGoogle Cloud IAM console select your project, then grant the following roles to theApp Hostingservice account:

   • Monitoring Metric Writer (roles/monitoring.metricWriter)
   • Cloud Trace Agent (roles/cloudtrace.agent)
   • Logs Writer (roles/logging.logWriter)

2. Re-publish your app toApp Hosting.

3. When publishing is complete, load your app and start using it. After fiveminutes, your app should start logging telemetry data.

Step 3: Monitor your generative AI features on theFirebase console

When telemetry is configured,Genkit records the number of requests,success, and latency for all of your flows, and, for each specific flow,Genkit collects stability metrics, shows detailed graphs, and logscaptured traces.

To monitor your AI features implemented withGenkit:

1. After five minutes, openGenkit in theFirebase console and reviewGenkit's prompts and responses.

   Genkit compiles the followingStability metrics:

   • Total requests: The total number of requests received by your flow.
   • Success rate: The percentage of requests that were successfullyprocessed.
   • 95th percentile latency: The 95th percentile latency of your flow, whichis the time it takes for 95% of requests to be processed.

   • Token usage:

     • Input tokens: The number of tokens sent to the model in the prompt.
     • Output tokens: The number of tokens generated by the model in theresponse.

   • Image usage:

     • Input images: The number of images sent to the model in the prompt.
     • Output images: The number of images generated by the model in theresponse.

   If you expand stability metrics, detailed graphs are available:

   • Request volume over time.
   • Success rate over time.
   • Input and output tokens over time.
   • Latency (95th and 50th percentile) over time.

Learn more aboutGenkit atGenkit.

Tip: For a guided tour of the full application lifecycle withtheApp Prototyping agent, from inception through monitoring yourpublished web app, check outDevelop, publish, and monitor a full-stack webapp withFirebase Studio.

Next steps

• Develop, publish, and monitor a full-stack web app withFirebase Studio.
• Develop applications with any framework with a template orsolution.