You have a brilliant idea for an app. You start “vibe coding”, quickly prototyping the core user interface and experience. But then, you realize that the app now needs to remember users, store data, and handle file uploads. Suddenly, you’re faced with the complexities of adding authentication, a database, and cloud storage. This integration step is often where a fun project can start to feel like a chore.

But what if it didn’t have to be like that? What if you could stay in your creative flow and ask an AI assistant to handle the heavy lifting of connecting powerful backend services? Well, now you can with new Firebase integrations in Firebase Studio!

In this blog post, we’ll explore two powerful ways to connect your app to Firebase Authentication, Firestore, and Cloud Storage using the AI capabilities of Firebase Studio:

• Generate a fully integrated application from a prompt using App Prototyping agent.
• Use the Firebase MCP server in the interactive chat for a more hands-on, conversational approach across all your Firebase Studio apps.

The App Prototyping agent

Let’s imagine you’re building a “Community Garden Journal” app. The idea is to have a place for users to log their plants, write notes, and upload photos of the plants’ growth progress. This is a perfect example of “vibe coding” an app that will eventually need real backend services.

Create the application with a prompt

You start in Firebase Studio to interact with the App Prototyping agent, and instead of coding, you begin a conversation. You give the agent a prompt that describes your vision:

Create an application for a community garden journal. I want a 
simple header with the app title "Garden Journal" and a main 
content area. In the main area, there should be a form with 
fields for "Plant Name", "Notes", and a file input for a 
"Photo". Add a "Save" button. Below the form, display a gallery
of journal entries.

The App Prototyping agent generates the foundational code for your app’s frontend. It looks great, but it’s not functional yet. The “Save” button doesn’t do anything, and the gallery is empty.

Connect a Firebase project

To save data and user information, you need a Firebase project, which is your app’s dedicated backend.

We can create that with a prompt:

Connect to a Firebase project.

After connecting to a Firebase project, you’ll see a Firebase project button in the header. This button lets you switch between the Firebase Studio editor and the Firebase project you just created, letting you manage both your code and your backend services.

When you click on the Firebase project button, you will see the Firebase console, where you can enable the services you need.

Set up Firebase services

Once you’re in the Firebase console, you can enable services like Authentication and Cloud Firestore. You can also upgrade your project to Blaze, which is needed for some services (like Cloud Storage for Firebase).

Prompt Gemini to integrate Firebase

With your backend services ready, it’s time for the magic. Head back to the App Prototyping agent and provide a new prompt:

Update the app to use Firebase. Add Firebase Authentication so
users can register and sign in with an email/password. When a
user clicks "Save", upload the photo to Cloud Storage. Save the
journal entry (plant name, notes, and the photo's storage URL)
to a "posts" collection in Cloud Firestore. Display the posts
from Firestore in the gallery.

Next, let’s limit access to posts to only the user who created them:

Limit post access to only the users who created them.

Gemini will generate Firestore rules that you can copy and paste into the “Rules” section of Firestore within the Firebase console.

Review the generated app

The App Prototyping agent gets to work, modifying your code to integrate the Firebase SDKs. It will:

1. Add the necessary configuration
2. Implement the sign-in flow
3. Write the functions to upload files to Storage
4. Save data to Firestore
5. Fetch it back to display in the gallery

Afterward, you can review the changes, see how it all works, and test your now-fully-functional application.

Even more Firebase with the Firebase MCP server

What if you prefer a more iterative, chat-based workflow? Or, maybe you’re building a Flutter app? Gemini can help with that using the Firebase Model Context Protocol (MCP) server across Firebase Studio.

The Firebase MCP server provides a standardized way for AI environments like Firebase Studio to connect to external tools. In other words, it’s a bridge that gives the Gemini chat assistant in Firebase Studio a set of “superpowers” to directly and safely interact with your Firebase project.

After prototyping your app, you may want to enter code view for hands-on coding combined with interactive chat. The Firebase MCP server provides Gemini with tools to perform many Firebase actions, such as:

• Create and manage Firebase projects
• Manage your Firebase Authentication users
• Work with data in Cloud Firestore and Firebase Data Connect
• Retrieve Firebase Data Connect schemas
• Understand your security rules for Firestore and Cloud Storage for Firebase
• Send messages with Firebase Cloud Messaging

This method gives you fine-grained control over your project’s development while still leveraging the power of AI to automate complex tasks and query your project’s state. The Firebase console is your base for provisioning and customizing your service configuration as you flow through your integration steps.

To learn more about the potential of the MCP server and how to configure it in your project, check out Supercharge your Firebase Studio workflow with MCP servers. Prefer hands-on learning? Complete the Firebase MCP in Firebase Studio codelab.

Try it out!

You’ve learned how Firebase Studio can keep you in your creative flow, turning the complex task of backend integration into a simple conversation. Whether you prefer generating a complete app with the App Prototyping agent or taking fine-grained control with the Firebase MCP server, the power to add robust Firebase services is just a prompt away.

Now, it’s your turn. What app have you been “vibe coding”?

• Start building in Firebase Studio today.
• For a step-by-step guide, complete the Firebase MCP in Firebase Studio codelab.
• Share what you create with the community on X using the hashtag #FirebaseStudio!