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 .

What you'll learn

• Generate a static web app using the App Prototyping agent
• Connect to a Firebase project
• 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.

1. Log into your Google Account, join Google Developer Program , and open Firebase Studio .
2. In the Prototype an app with AIfield, enter a description of the app:

    An app for a picker wheel that allows custom input. 
   

3. Click Improve Prompt. Review the improved prompt.
4. Click Prototype with AI.
5. Review the suggested App Blueprint. Click Customizeto edit it.
6. Click Save.
7. When the blueprint finishes incorporating your updates, click Prototype this App.
8. If your blueprint contains AI elements, the agent prompts you for a Gemini Gemini key. Add your own Gemini API key or click Auto-generateto generate a Gemini API key. If you click Auto-generate, Firebase Studio creates a Firebase project and generates a Gemini API key for you.
9. 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 Errorin the chat to allow the agent to fix its own errors.

3. (Optional) Get the code

If you get stuck, use the sample files to follow along more closely with the example app from this point on.

1. Download the files in the folder .
2. In Firebase Studio, click Switch to Codeto open Code view.
3. Drag the files you downloaded into the Explorer pane of Firebase Studio. Allow the files to replace any existing files.
4. In the terminal ( Shift + Ctrl + C ), run the following command to install packages.

    npm install 
   

5. Open the Source Controlpane of Firebase Studio, type a message to describe the code change, for example, "imported code from GitHub", then hit Commit.
6. Click Switch to Prototyperto continue the codelab, using the example version of the app.

4. Connect to a Firebase project

Congratulations! You app is working locally. To give it a backend, you'll connect it to a Firebase project next.

1. Ask the App Prototyping agent to connect to a Firebase project.

    Connect to a Firebase project. 
   

   Expect the agent to create a new project or connect to an existing one (if you used the auto-generate option to get a Gemini API Key earlier, your project should appear next to your workspace name on the top left corner of your screen), then generate the necessary Firebase configuration and integrate it into your app through src/lib/firebase.ts (as shown).

     import 
     
    { 
    initializeApp 
    , 
    getApp 
    , 
    getApps 
    } 
    from 
     
    'firebase/app' 
    ; 
    const 
    firebaseConfig 
    = 
    { 
    "projectId" 
    : 
    "foo-bar-baz" 
    , 
    "appId" 
    : 
    "1:630673270654:web:3eda41879acd38fa96ce14" 
    , 
    "storageBucket" 
    : 
    "foo-bar-baz.firebasestorage.app" 
    , 
    "apiKey" 
    : 
    "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0" 
    , 
    "authDomain" 
    : 
    "foo-bar-baz.firebaseapp.com" 
    , 
    "measurementId" 
    : 
    "" 
    , 
    "messagingSenderId" 
    : 
    "630673270654" 
    }; 
    // 
    Initialize 
    Firebase 
    const 
    app 
    = 
    ! 
    getApps 
    () 
    . 
    length 
    ? 
    initializeApp 
    ( 
    firebaseConfig 
    ) 
    : 
    getApp 
    (); 
    export 
    default 
    app 
    ; 
    
   

   Feel free to ask the agent again if the above prompt fails to complete the task in one go. Break down the steps if necessary.

    Create a new Firebase project. 
   

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

1. Click Switch to Codeto open the Code view.
2. 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 
   

3. From Explorer ( Ctrl + Shift + E ), right-click the .idx folder, and select New file. Name the file mcp.json and press Enter.
4. 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.

6. Add Firestore using Firebase MCP

Goal 1: Add Firestore

1. Switch to Prototyper. 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:
   • initialize Firestore by calling the Firebase MCP tool firebase_init , which creates Firestore rules (as shown) and indexes files amongst other configuration changes
   • update your application code to use Firestore instead of local storage

     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 .
2. Switch to Code. In the terminal ( Shift + Ctrl + C ), initialize Firestore if you have never enabled the Firestore API in the current Firebase project.

    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 2: Test it out

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

2. You can also chat with Firestore to query your database.

    List my Firestore collections. 
   

   Expect Gemini to call the Firebase MCP tool firestore_list_collections .

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

Learn more

• Firebase MCP tools
• Firebase MCP on GitHub
• Firebase Tips and Tricks 2
• Learn more about Firebase Studio workspaces