Check out the latest news from Firebase at Cloud Next 2025. Learn more.

Develop, publish, and monitor a full-stack web app with the App Prototyping agent

This guide shows you how to use the App Prototyping agent to rapidly develop and publish a full-stack app with the help of Gemini in Firebase. You'll use a natural-language prompt to generate a Next.js app that identifies food items from a picture or in-browser camera, and provides a recipe that contains the identified ingredients. You'll then refine and improve the app, ultimately publishing to Firebase App Hosting.

Other technologies you'll use as you proceed through this guide include:

Step 1: Generate your app

Log into your Google Account and open Firebase Studio.
In the Prototype an app with AI field, enter a description of the app you want to build. For this solution, where you're creating an image-based recipe app, you can use a prompt like the following to prototype an app that uses the camera, generative AI:
```
Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.
```
Tip: You can also upload an image to accompany your prompt. For example, you can upload an image that contains the color scheme you want your app to use and tell Firebase Studio to use it. Images must be less than 3MiB.
Click Prototype with AI.

Gemini generates an app blueprint based on your prompt, returning a proposed app name, required features, and style guidelines.
Review the blueprint and make a few changes. For example, you could change the proposed app name or color scheme using one of these options:
- Click Customize and edit the blueprint directly. Make your changes and click Save.
- In the Describe... field in the chat pane, add clarifying questions and context. You can also upload additional images.
Click Prototype this app. Gemini begins coding your app. Because the app description described features that require generative AI, Gemini prompts you for a Gemini API key.
Add your own Gemini API key or click Auto-generate to generate a Gemini API key.

Important: If you choose Auto-generate, the App Prototyping agent creates a Firebase project on your behalf with a prefix that matches the name of your Firebase Studio workspace and creates a new Gemini API key in the project. It also stores the key within your Firebase Studio workspace in an .env file. To access your new project at any time, click the project name at the top of page. To access your Gemini API key to copy or delete in the future, use the Google Cloud console.

Step 2: 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 to test it.
Iterate on your app using natural language: Continue to use the chat interface to ask Gemini to add features and refine the app.
Test the app: In the app preview pane, upload an image that shows different foods to test your app's ability to identify the ingredients and provide a recipe. Optionally, you can use Code view to share your app publicly and temporarily using Firebase Studio public previews.
Debug and iterate directly in the code: Click Switch to Code to open Code view, where you can see all of your app's files and modify your code directly. You can switch back to Prototyper mode at any time.

While in Code view, you can also use the following helpful features:
- Firebase Studio's built-in debugging and reporting features to inspect, debug, and audit your app.
- AI assistance using Gemini in Firebase either inline within your code or using interactive chat (both are available by default). Interactive chat can diagnose issues, provide solutions, and run tools to help fix your app faster. To access chat, click sparkGemini at the bottom of the workspace.

(Optional) Step 3: Publish your app with App Hosting

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

When you set up App Hosting, Firebase Studio creates a Firebase project for you and walks you through linking a Cloud Billing account.

To publish your app to Firebase App Hosting:

Click Publish to create a new Firebase project and begin App Hosting setup. The Publish your app pane appears.

Important: If you did not auto-generate a Gemini API key, Firebase Studio provisions a Firebase project on your behalf when you click Publish. You can access the Firebase project by clicking the project name at the top of the page.
In the Firebase project step, note the name of the Firebase project that was created for you, then click Next.
In the Link Cloud Billing account step, choose one of the following:
- Select the Cloud Billing account that you want to link to your Firebase project.
- If you don't have a Cloud Billing account or want to create a new one, click Create a Cloud Billing account. This opens the Google Cloud console, where you can create a new self-serve Cloud Billing account. After you create the account, return to Firebase Studio and select the account from the Link Cloud Billing list.
Click Next. Firebase Studio links the billing account to the project associated with your workspace, created either when you auto-generated a Gemini API key or when you clicked Publish. Then, App Hosting sets up a fully-managed environment for your app in Google Cloud.

Important: Linking a billing account upgrades your project from the no-cost Spark pricing plan to the pay-as-you-go Blaze pricing plan. Learn more at Firebase Studio pricing.
Click Create your first rollout. Firebase Studio launches the App Hosting rollout. This can take up to ten minutes to complete. To learn more about what's happening behind the scenes, see The App Hosting build process.

Tip: If you don't want to create a rollout now, you can click Create rollout later.
When the rollout completes, the App overview appears with a URL and app insights powered by App Hosting observability. To use a custom domain (like example.com or app.example.com) instead of the Firebase-generated domain, you can add a custom domain in the Firebase console.

For more information about App Hosting, see Understand App Hosting and how it works.

(Optional) Step 4: Monitor your app

The App Hosting App overview panel provides key metrics and information about your app, letting you monitor your web app's performance using App Hosting's built-in observability tools. After your site rolls out, you can access the overview by clicking Publish. From this panel, you can:

Click Create rollout to release a new version of your app.
Share the link to your app or open your app directly in Visit 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 latest rollout. Click View details to access even more information in the Firebase console.
View a graph of the number of the number of requests your app has received over the last 24 hours, broken down by HTTP status code.

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

Learn more about managing and monitoring App Hosting rollouts at Manage rollouts and releases.

(Optional) Step 5: Roll back your deployment

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

To roll back a published site:
1. Open App Hosting in the Firebase console.
2. Locate your app's backend, click View, and then click Rollouts.
3. Next to the deployment you want to roll back to, click More , then choose Roll back to this build, and confirm.
Learn more at Manage rollouts and releases.
To remove your App Hosting domain from the web:
1. From the Firebase console, open App Hosting, and click View in the Firebase Studio app section.
2. In the Backend information section, click Manage. The Domains page loads.
3. Next to your domain, click More , then choose Disable domain, and confirm.
This removes your domain from the web. To fully remove your App Hosting backend, follow the instructions in Delete a backend.

(Optional) Step 6: Use Genkit Monitoring for your deployed features

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

To set up monitoring in Genkit, you add telemetry to the Genkit AI flows and then view the results in the Firebase console.

Step 1: Add telemetry to your Genkit flow code in Firebase Studio

To set up monitoring in your code:

If you aren't already in Code view, click Switch to Code to open it.
Check package.json to verify the version of Genkit that's installed.
Open the terminal (Ctrl-Shift-C, or Cmd-Shift-C in MacOS).
Click inside the terminal and install the Firebase plugin, using the version that matches your package.json file. For example, if the Genkit packages in your package.json are at 1.0.4, you should run the following command to install the plugin:
```
npm i --save @genkit-ai/firebase@1.0.4
```
From Explorer, expand src > ai > flows. One or more TypeScript files that contain your Genkit flows appear in the flows folder.
Click one of the flows to open it.

Tip: Note the prompt section of the file: You can edit this manually to refine Gemini's responses.
At the bottom of the imports section of the file, add the following to import and enable FirebaseTelemetry:
```
import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();
```
Tip: To learn more about advanced telemetry options in Genkit, see Advanced configuration.

Step 2: Set up permissions

Firebase Studio enabled the required APIs for you when it set up your Firebase project, but you also need to provide permissions to the App Hosting service account.

To set up permissions:

Open the Google Cloud IAM console select your project, then grant the following roles to the App Hosting service account:
- Monitoring Metric Writer (roles/monitoring.metricWriter)
- Cloud Trace Agent (roles/cloudtrace.agent)
- Logs Writer (roles/logging.logWriter)
Re-publish your app to App Hosting.
When publishing is complete, load your app and start using it. After five minutes, your app should start logging telemetry data.

Step 3: Monitor your generative AI features on the Firebase 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 logs captured traces.

To monitor your AI features implemented with Genkit:

After five minutes, open Genkit in the Firebase console and review Genkit's prompts and responses.

Genkit compiles the following Stability metrics:
- Total requests: The total number of requests received by your flow.
- Success rate: The percentage of requests that were successfully processed.
- 95th percentile latency: The 95th percentile latency of your flow, which is 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 the response.
- 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 the response.
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 about Genkit at Genkit.

Next steps

Learn how to develop apps in a Firebase Studio workspace.
Learn more about AI assistance in Firebase Studio.