Get started with the the App Prototyping agent

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

The App Prototyping agent is a streamlined no-code development flow that uses generative AI to develop, test, iterate, and publish a full-stack, agentic web app. You describe your app idea in natural language with an optional image, and the agent generates an app blueprint, code, and a web preview. To assist 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 the Gemini Developer API to your app, using the power of Genkit flows to work with Gemini. You can use your own Gemini API key or let Firebase Studio provision a Firebase project and Gemini API key for you.
  • If you want to publish your app to the web: Firebase Studio creates a project and provides a quick way to publish your app with Firebase App Hosting.

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 from Firebase Studio.

Get started

To get started with the App Prototyping agent, follow these steps:

  1. Log into your Google Account and open Firebase Studio.

  2. In the Prototype an app with AI field, describe your app idea in natural language.

    Optionally, add an image to accompany your prompt. This can be a diagram of your app's ideal user flow, or a color scheme you want Firebase Studio to adhere to. Images can be a maximum of 3 MiB.

  3. Click Prototype with AI.

    The App Prototyping agent returns an app blueprint, which provides a proposed app name, core features, and style guidelines.

  4. Review the blueprint. You can prompt Gemini for enhancements and changes and directly edit the blueprint:

    • 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.

  5. When you approve the blueprint, click Prototype this App.

    Gemini generates code from the blueprint and returns a web preview for you to review.

  6. If your app uses AI, you're prompted to add or generate a Gemini API key. If you click Auto-generate, Firebase Studio then provisions a Firebase project and a Gemini API key for you.

After your initial app is created, you can:

  • 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. Learn more at Preview your app.

  • Test and iterate using natural language: Test your app thoroughly and work with the App Prototyping agent to iterate on the code and blueprint until you're happy with it.

  • Debug and iterate directly in the code: Click Code switch icon 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.

  • Publish your app with Firebase App Hosting: Click Publish to publish your app to App Hosting.

  • Monitor and optimize your app and AI features: Monitor your web app's performance and usage with observability in App Hosting and your generative AI flows with Firebase telemetry in Genkit. Learn more at Monitor web apps.

Next steps