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

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 Firestore 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 Firestore using Firebase MCP

Goal 1: Add Firebase to your app

Switch to Prototyper. In the chat interface, ask the agent to create a Firebase project.
```
Create a Firebase 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. Alternatively, 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 use your Firebase project for your local development.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Make sure you see a .firebaserc file that sets your default Firebase project. This file tells the Firebase CLI which Firebase project to use. If you don't see this file, ask again specifically for this file.
Ask the agent to create a web app in your Firebase project.
```
Create a web app in my Firebase project.
```
Expect the agent to call the tool firebase_create_app. If the agent fails to do so, try again, or follow these instructions to complete the step in Firebase Console.The agent may go on to call the tool firebase_get_sdk_config and create the necessary files to connect your project to your Firebase web app. In case it does not, prompt it to do so.
```
Add my Firebase SDK configuration to my app.
```
The agent often puts your API key and other configs in src/lib/firebase.ts directly. Ask it to move them out of your application code to keep your app secure.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Goal 2: Add Firestore

Switch to Code. In the chat interface, ask the agent to use Firestore in your app.
```
Use Firestore for user entries. Give anyone read and write access.
```
Expect the agent to update your source code to use Firestore instead of local storage for user entries, and create Firestore security rules. Note that it may call the Firebase MCP tool firebase_init or prompt you to run the firebase init command in the terminal to initialize Firestore. Regardless, make sure you see the file firestore.rules with the following content before continuing.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if 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.
In the terminal (Shift+Ctrl+C), initialize Firestore if the agent has not prompted you to do so before.
```
firebase init firestore
```
Follow the on-screen instructions and leave the default options. Do not overwrite the security rules from the previous step.Then deploy the security rules for your database instance.
```
firebase deploy --only firestore
```
This will provision a Firestore database instance for you.

Goal 3: Test it out

Reload your app, create and delete entries on your picker wheel, and watch these updates on the Firestore page in Firebase Console.

App in Studio and 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.