In the video it’s visible that inspite of giving the prompt to build android app, studio is taking next.js as the stack, which is used to build websites and not mobile app.
Plus, it’s not giving me the option to change the stack.
Then the final result is also a website, not a mobile app.
So, can anyone please help me to understand, how can I build mobile app using firebase studio? Like, what steps am I missing?
I’d like a clear tutorial for this too. Just like you I have a next.js Web ‘app’ but via the terminal I have repackaged this to work as an app. I’ll dig out my prompts later.
This will create an android folder in your file browser which you can download.
You then need the android studio app to be able to open your android folder and you can continue developing your app in the android environment.
I’m hoping someone sees this and let’s us know if there is a super simple way to do this
You’ve hit upon a crucial point about Firebase Studio’s current capabilities, and it’s a common area of confusion due to how these new AI-powered development tools are evolving.
The core of your observation is correct: While Firebase Studio is designed to build “full-stack AI apps” including mobile, its initial and primary prototyping agent, especially for generating full applications from prompts, heavily favors web technologies like Next.js.
Here’s a breakdown of what’s happening and what you might be missing:
Firebase Studio’s App Prototyping Agent Starts with Web:
Google has explicitly stated that the “App Prototyping agent, which quickly generates functional web app prototypes (starting with Next.js) using prompts, images, or even drawings.”
This is a strategic choice for rapid prototyping. Web apps (especially with frameworks like Next.js) can be quickly stood up and previewed in a browser, making the iterative feedback loop very fast. They are also inherently cross-platform.
This is why you consistently get a Next.js stack and a website as a result, even when you prompt for an “Android app.” The AI agent’s initial generation capability is biased towards web.
Lack of Direct “Mobile App from Prompt” Option (Currently):
As you’ve observed, there isn’t a direct, explicit dropdown or prompt option (yet) that forces the App Prototyping agent to output a native Android (Java/Kotlin) or Flutter project directly from a high-level prompt.
While Firebase Studio supports Flutter and Android development (meaning you can import existing projects, use the Code OSS-based IDE, and leverage Firebase services), its generative AI capabilities for starting a mobile app from scratch via a prompt are still focused on web.
How Firebase Studio Supports Mobile Development (Beyond Prototyping):
Import Existing Mobile Projects: You can absolutely import existing Flutter or Android Studio projects into Firebase Studio’s Code OSS-based IDE. This allows you to leverage Gemini for code assistance (debugging, refactoring, explaining code) within your mobile codebase.
Firebase Services Integration: Firebase is fundamentally a mobile and web backend platform. So, regardless of whether your frontend is Next.js, Flutter, or native Android, you use Firebase’s SDKs to integrate services like Authentication, Firestore, Cloud Functions, Storage, etc. Firebase Studio facilitates this integration.
Genkit for AI Features: If your mobile app needs AI features (like using Gemini for text generation, image recognition, etc.), you’d typically implement the AI logic on the backend using a framework like Genkit (which Firebase Studio supports) and then call those backend functions from your mobile app.
Webview/Hybrid Approach: A Next.js app generated by Firebase Studio can technically be wrapped into a mobile app using technologies like Capacitor or Cordova. This creates a hybrid app, which isn’t a native mobile app in the purest sense but looks and feels like one to the end-user. This isn’t something Firebase Studio does automatically from a prompt, but it’s a possible pathway if you start with Next.js.
Built-in Preview for Android Apps: The documentation mentions “Preview your web and Android apps right in the browser and take advantage of built-in runtime services and tools for emulation, testing, and debugging.” This suggests that if you import an Android project, you can preview it within Studio.
What You’re Missing (and What Firebase Studio is Currently Built For):
You’re not missing a step for directly generating a native Android app from a prompt. That capability, as a starting point for the AI agent, isn’t the primary focus right now.
Firebase Studio’s strength, at least in its current public preview, for “mobile” mostly lies in:
AI-assisted coding within existing mobile projects.
Rapid prototyping of web frontends (often with AI features) that can serve as a backend for mobile apps or be wrapped into hybrid apps.
Seamless integration with Firebase backend services for any type of app (web, mobile, game).
How to Proceed for Your Todo App (Mobile):
Given your goal to create a mobile (Android) Todo app:
Option 1 (Traditional Mobile Development + Firebase):
Start a new Flutter or native Android project (e.g., in Android Studio or VS Code for Flutter).
Manually build your UI and logic.
Integrate Firebase services (Firestore for data, Authentication for users) directly using the Firebase SDKs for Flutter/Android.
Then, if you wish, you can import this project into Firebase Studio to leverage its Code OSS IDE and Gemini for code assistance.
Option 2 (Hybrid/Web-First Approach - if acceptable):
You could continue with the Next.js app generated by Firebase Studio.
Then, use a tool like Capacitor (highly recommended for Next.js and web apps) to wrap your Next.js web application into native Android (and iOS) applications. Capacitor provides access to native device features. This gives you a mobile app based on web technologies.
Option 3 (Wait and See / Feature Request):
Keep an eye on Firebase Studio updates. As it’s still in preview, it’s highly likely that Google will expand its AI-driven generation capabilities to directly support Flutter and native Android/iOS as initial project types in the future. You could also submit feedback to Google requesting this feature.
In conclusion, while Firebase Studio is advertised as supporting mobile, its “generate from prompt” feature currently focuses on web frameworks like Next.js for initial app creation. You’ll need to either build your mobile app traditionally and integrate Firebase services, or consider a hybrid web-to-mobile approach if starting with Firebase Studio’s generated output.
