Firebase MCP in Firebase Studio

1. Overview

In this codelab, you'll practice using the App Prototyping agent along with Firebase MCP server in Firebase Studio to create a full-stack web app that uses Firebase Realtime Database.

Animated gif of final app

What you'll learn

Generate a static web app using the App Prototyping agent
Set up the Firebase MCP server
Add Firebase Realtime Database using Firebase MCP

What you'll need

A browser of your choice, such as Google Chrome
A Google Account for the creation and management of your Firebase project

2. Generate your app using the App Prototyping agent

The App Prototyping agent uses Gemini in Firebase to build your app. Even when using identical prompts, the results may vary. If you get stuck, we've provided a set of files you can add to your workspace to pick up the lab at several checkpoints throughout this codelab.

Log into your Google Account, join Google Developer Program, and open Firebase Studio.
In the Prototype an app with AI field, enter a description of the app:
```
An app for a picker wheel that allows custom input.
```
Click Improve Prompt. Review the improved prompt.
Click Prototype with AI.
Review the suggested App Blueprint. Click Customize to edit it.
Click Save.
When the blueprint finishes incorporating your updates, click Prototype this App.
If your blueprint contains AI elements, the agent prompts you for a Gemini Gemini key. Add your own Gemini API key or click Auto-generate to generate a Gemini API key. If you click Auto-generate, Firebase Studio creates a Firebase project and generates a Gemini API key for you.
The App Prototyping agent uses the blueprint to create a first version of your app. When it's done, the preview of your app appears alongside a Gemini chat interface. Take a moment to review and test your app. If you encounter errors, click Fix Error in the chat to allow the agent to fix its own errors.

3. Set up Firebase MCP in Firebase Studio

The Firebase MCP server extends the capabilities of the App Prototyping agent by providing tools that the agent can call to set up, manage, and pull data from Firebase services, including Firebase Authentication, Cloud Firestore, and Firebase Data Connect. Here is how to set it up.

In Firebase Studio, click Switch to Code to open the Code view.
In the terminal (Shift+Ctrl+C), run the following command to sign in to your Firebase account, following on-screen instructions and leave all default options:
```
firebase login --no-localhost
```
From Explorer (Ctrl+Shift+E), right-click the .idx folder, and select New file. name the file mcp.json and press Enter.

Add the server configurations to .idx/mcp.json.

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Verify that you are connected to the Firebase MCP Server. You should see similar log entries in the Output panel, with "Gemini" selected as the right channel. MCPManager from Gemini logs

4. Add Firebase Realtime Database using Firebase MCP

Goal 1: Add Firebase to your app

Switch to Prototyper. In the chat interface, ask the agent to create a project.
```
Create a Firebase project for my app.
```
Expect the agent to call the Firebase MCP tool firebase_create_project.Skip this step if you have already had a Firebase project created while using the auto-generate option to get a Gemini API Key. Your project ID should appear next to your workspace name on the top left corner of your screen. Alternative, ask the agent to list your projects and note down the project you want to use.
```
List my Firebase projects
```
Expect the agent to call the Firebase MCP tool firebase_list_projects.
Ask the agent to connect to this project.
```
Connect my app to my project `spinsync-3y3c6`.
```
Make sure you see a .firebaserc file that sets your active project. If not, ask the agent to update your Firebase environment.
```
Update my Firebase environment to use this project.
```
Expect the agent to call the Firebase MCP tool firebase_update_environment . However, it is possible that the agent accomplishes this without calling the tool.Lastly, check that your Firebase environment has the correct active project and you as the authenticated user.
```
Show me my current Firebase environment.
```
Expect the agent to call the Firebase MCP tool firebase_get_environment.
Ask the agent to create a web app in your Firebase project.
```
Create a web app in my active Firebase project.
```
Expect the agent to call the tool firebase_create_app and return the App ID. If the agent fails to do so, try again by clicking , or follow these instructions to complete the step in Firebase Console.
```
Use the App ID to get the SDK configuration and add to my app.
```
Expect the agent to call the tool firebase_get_sdk_config and update your code with your Firebase Configuration.If your API key and other configs appear in src/lib/firebase.ts after the agent declares task completion, ask it to move them out to keep your app secure.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Goal 2: Add Firebase Realtime Database

Stay or Switch to Prototyper. In the chat interface, ask the agent to set up Firebase Realtime Database in your project.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
Expect the agent to call the Firebase MCP tool firebase_init and create security rules in database.rules.json as part of the file changes at the end of this conversation turn.
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
Here you give everyone read and write access to your database. Outside this CodeLab, you should always secure your databases. Learn more about this topic in our documentation.
Switch to Code. In the terminal (Shift+Ctrl+C), initialize Firebase Realtime Database.
```
firebase init database
```
Follow on screen instructions and leave default options.Then deploy the security rules for your database instance.
```
firebase deploy --only database
```
Switch to Prototyper. Ask the agent to use your default database instance for user entries.
```
Use my default Realtime Database instance for user entries.
```
Expect the agent to update the rest of the source code to connect your app to your database instance.

Goal 3: Test it out

Create a few new entries for the picker wheel, and watch them appear in the Firebase Realtime Database page in Firebase Console.

Firebase Realtime Database in Firebase Console

5. Conclusion

Congratulations! You have successfully created a full-stack web app using the App Prototyping agent with Firebase MCP. Feel free to try other tools offered by the Firebase MCP server and expand what your app can do.