Author: Joshua de Guzman
Date: August 2, 2025

What is Firebase Studio?

Firebase Studio Landing Page

Firebase Studio is Google's cloud-based development environment that combines:

What You'll Build

Mindfully, a mindful journaling app** that:

Running locally within Firebase Studio:

Mindfully

Deployed to Firebase App Hosting:

Mindfully

Why This Stack?

Key Benefits

Prerequisites

What You'll Learn

Firebase Studio Features

Feature

What It Does

Why It's Great

AI Prototyping

Generate apps from natural language

No coding required to start

Gemini Assistant

AI-powered coding help

Get help with any development task

Firebase Integration

Built-in backend services

No server setup needed

Cloud IDE

Full development environment

Work from anywhere, no local setup

One-Click Deploy

Instant production deployment

Get your app live in minutes

The first step in building the mindful journaling app involves setting up the development environment. This process is designed to be straightforward, allowing developers to quickly access Firebase Studio and begin development.

Accessing Firebase Studio

  1. Open a web browser and navigate to the Firebase Studio dashboard at studio.firebase.google.com
  2. Sign in with a Google Account if prompted

This is what you should see after signing in and agreeing to the terms of service.

Firebase Studio Landing Page

To empower the mindful journaling app with therapeutic advice capabilities, you'll need a Gemini API key. This step covers how to obtain and secure your API key for AI integration.

Getting Your Gemini API Key

Google AI Studio

  1. Navigate to Google AI Studio: Open a new browser tab and go to https://ai.google.dev/
  2. Sign in: Make sure you're signed in with your Google account
  3. Access API Keys:
    • Look for the "Get API key" button in the top navigation bar
    • Or click on your profile picture/account menu and select "API keys"
  4. Create a New API Key:
    • Click "Create API key" or "Create new API key"
    • If prompted, select an existing Google Cloud project or create a new one
    • Give your API key a descriptive name (e.g., "Mindful Journal App")
  5. Copy Your API Key:
    • Once generated, you'll see a string of characters (e.g., AIzaSyC...)
    • Copy this key immediately - you won't be able to see it again
    • Store it securely for use in the next steps

Important Security Note: Treat this API key like a password. Never hardcode it directly into your application's source code, especially for client-side applications. We'll use environment variables and secure proxy services to keep it safe.

Firebase Studio's App Prototyping agent, often referred to as "Prototyper," introduces a revolutionary way to build user interfaces through "vibe coding." This approach allows developers to translate natural language descriptions directly into foundational UI code, significantly accelerating the initial design phase and enabling rapid iteration without extensive manual coding.

Creating a New Project in Firebase Studio

  1. Navigate to Firebase Studio: Open a web browser and go to studio.firebase.google.com
  2. Sign in: Use your Google account to sign in
  3. Start a New Project:
    • Click "Start coding an app" or "Create new project"
    • Choose Next.js as your framework
    • Give your project a name (e.g., "mindful-journal-app")
    • Click Create to initialize the workspace
  4. Access the Prototyper:
    • Once the workspace loads, look for the "Prototype an app with AI" section
    • This is where you'll enter your app description

Understanding Effective Prompt Engineering

The effectiveness of the generated application depends on how clearly you describe what you want. Here are key guidelines:

Generating Your App with AI

  1. Enter Your Prompt: In the "Prototype an app with AI" field, enter this detailed description:
Create a Next.js web application for a mindful journaling app.
I want a clean, minimalist design.
Include a simple header with the title "Mindful Journal".
Below the header, create a main content area.
Inside the main content area, add a form with:
- A text input field for "Title" of the entry.
- A multi-line text input field for "Journal Entry" content.
- A button labeled "Save Entry".
Below the form, display a list of journal entries, with each entry showing its title and a snippet of its content.
Ensure the layout is responsive for web.
Use Cloud Firestore to store journal entries.
Add a feature to generate therapeutic advice based on the journal entry content using Google Gemini AI with the latest stable model gemini-2.0-flash-001.
  1. Generate the App:
    • Click "Prototype with AI"
    • Review the generated blueprint
    • Click "Prototype this app"

Firebase Studio Prototyper

  1. What Happens Next:
    • Firebase Studio will automatically create a Firebase project
    • Generate a Gemini API key if needed
    • Set up the Next.js project structure
    • Create the initial UI components
    • Configure basic Firebase integration

The Prototyper will handle most of the setup automatically, including Firebase project creation and API key generation. This saves significant time compared to manual configuration.

Reviewing the Generated Project

Once generation is complete, Firebase Studio will:

The generated code follows Next.js App Router conventions with clear separation between client and server components.

Exploring Your Generated Code

While the App Prototyper handles most of the development for this workshop, you can explore the generated Next.js code:

  1. Switch to Code View: Click the code view icon in Firebase Studio to see the actual Next.js files
  2. Browse Project Structure: Explore the app/ directory to see your components, pages, and configuration
  3. Understand the Code: See how the AI translated your natural language description into actual React/Next.js code
  4. Return to Prototyper: Click back to the Prototyper view to continue with AI-assisted development

Workshop Focus: For this workshop, we'll primarily use the App Prototyper Agent for development. The code view is great for understanding what's being generated, but we'll focus on the AI-powered workflow for building features.

Now that you have your Gemini API key and have prototyped your app, let's integrate AI capabilities into your application using the App Prototyper. This approach leverages Firebase Studio's AI-powered development to automatically generate the AI integration code.

Using the App Prototyper for AI Integration

Instead of manually writing code, we'll use the App Prototyper to generate the AI integration. This approach is more consistent with Firebase Studio's philosophy of AI-assisted development.

Adding AI Features with Natural Language

  1. Access the Prototyper: In your Firebase Studio workspace, locate the App Prototyper chat interface
  2. Enter AI Integration Prompt: Use the following prompt to add AI capabilities:
Add AI-powered therapeutic advice to my mindful journaling app.
When a user saves a journal entry, automatically generate therapeutic advice using Gemini AI with the latest stable model gemini-2.0-flash-001.
The advice should:
- Analyze the emotional content of the journal entry
- Provide empathetic and supportive responses
- Offer simple mindfulness exercises or coping strategies
- Maintain a positive and encouraging tone
- Be displayed below the journal entry form
Include proper error handling and loading states.
Use environment variables for the Gemini API key.
  1. Review Generated Code: The Prototyper will:
    • Create API routes for AI integration
    • Set up the Gemini AI client
    • Generate the therapeutic advice component
    • Add proper error handling and loading states
    • Configure environment variables
  2. Test the AI Feature:
    • Enter a journal entry
    • Click save to trigger the AI advice generation
    • Verify the therapeutic advice appears below the form

Understanding the Generated AI Integration

The App Prototyper will generate code that:

(Optional) Customizing the AI Behavior

You can further customize the AI integration by asking the Prototyper:

Make the AI advice more specific to different emotions.
Add different types of advice based on whether the entry is positive, negative, or neutral.
Include breathing exercises for stress and gratitude practices for positive entries.

Ethical Considerations and Disclaimers

It is paramount to include a disclaimer within the application that the AI-generated advice is for informational and supportive purposes only and should not be considered professional medical, psychological, or therapeutic advice. This ensures users understand the limitations of the AI and seek professional help when necessary.

The App Prototyper approach eliminates the need to manually write complex AI integration code, making it accessible to developers of all skill levels while ensuring best practices are followed.

Exploring More AI Capabilities with Google AI Studio

Now that you've integrated Gemini AI into your Firebase Studio project, you might be interested in exploring more advanced AI capabilities. Google AI Studio offers a collection of starter apps that showcase Gemini's core features and provide ready-to-use templates for various AI-powered applications.

Available Starter Apps

Based on the latest Google AI Studio starter apps, you can explore:

  1. Spatial Understanding App:
    • Build applications with sophisticated visual AI
    • Analyze images with advanced 2D and 3D bounding box capabilities
    • Perfect for robotics, augmented reality, and image-based search applications
  2. Video Analyzer App:
    • Create interactive video experiences
    • Extract data from video streams for summarization and scene description
    • Build custom video search tools and automated content tagging systems
  3. Map Explorer App:
    • Combine Gemini's intelligence with Google Maps API
    • Create location-aware applications with conversational discovery
    • Build travel planning tools and intelligent recommendation systems

(Optional) Getting Started with Starter Apps

These starter apps demonstrate the full potential of Gemini AI and can inspire your next AI-powered application development.

Now that you have AI capabilities integrated, let's create a new Firebase project and manually set up Firestore. This step focuses on project creation and basic database provisioning.

Firebase Create Project

Creating Firebase Project with App Prototyper

We'll use the App Prototyper to create the Firebase project, then manually provision the Firestore database.

  1. Access the Prototyper: In your Firebase Studio workspace, locate the App Prototyper chat interface
  2. Enter Firebase Project Prompt: Use the following prompt to create a new Firebase project:
Create a new Firebase project for my mindful journaling app.
Set up the project with:
- A new Firebase project ID
- Firebase configuration for Next.js
- Environment variables setup
- Basic project structure
Make sure the project is properly connected to my app.
  1. Review Generated Project: The Prototyper will:
    • Create a new Firebase project with a unique ID
    • Generate Firebase configuration files
    • Create environment variable setup
    • Set up basic project structure
  2. Verify Project Creation:
    • Check that the Firebase project was created successfully
    • Verify the project ID is accessible
    • Confirm Firebase configuration is properly set up

Firebase Create Project

Manually Provisioning Firestore Database

Since automated Firestore provisioning requires Firebase MCP (covered in the optional step), we'll manually set up the database:

  1. Access Firebase Console:
    • Click on your project name in the top-left corner of Firebase Studio
    • This will open the Firebase Console in a new tab

Firebase Console - Firestore Database

  1. Enable Firestore Database:
    • In the Firebase Console, click Build in the left sidebar
    • Select Firestore Database
    • Click Create database
  2. Configure Database Settings:
    • Choose Start in test mode for development
    • Select a location for your database (choose the closest to your users)
    • Click Enable
    Firebase Console - Firestore Database
  3. Verify Database Setup:
    • Confirm the database is created successfully
    • Note the database URL and project ID
    • Check that the database is accessibleFirebase Console - Firestore Database

Understanding the Firebase Setup

This setup provides:

Next Steps

After completing this step, you can:

This manual approach gives you direct control over the database setup while leveraging the App Prototyper for project creation and configuration.

The Firebase MCP (Model Context Protocol) server extends the capabilities of the App Prototyper agent by providing tools that can set up, manage, and pull data from Firebase services. This optional step shows you how to enable Firebase MCP for enhanced Firebase integration.

What is Firebase MCP?

Firebase MCP is a server that provides the App Prototyper agent with direct access to Firebase tools and services. It allows the agent to:

Setting Up Firebase MCP

  1. Switch to Code View: In Firebase Studio, click the code view icon to open the Code view
  2. Sign in to Firebase: In the terminal (Shift+Ctrl+C), run:
   firebase login --no-localhost

Follow the on-screen instructions and leave all default options

  1. Create MCP Configuration:
    • From the Explorer (Ctrl+Shift+E), right-click the .idx folder
    • Select New file and name it mcp.json
    • Press Enter to create the file
  2. Add Server Configuration: Add the following configuration to .idx/mcp.json:
    {
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "experimental:mcp"]
    }
  }
}
  3. Verify Connection: You should see log entries in the Output panel with "Gemini" selected as the right channel, indicating successful connection to the Firebase MCP Server

Using Firebase MCP with Firestore

Once Firebase MCP is set up, you can use enhanced prompts with the App Prototyper:

  1. Switch to Prototyper: Return to the App Prototyper chat interface
  2. Use Enhanced Firestore Commands: Try prompts like:
    Use Firestore for user entries. Give anyone read and write access.
  3. Query Your Database: You can also chat with Firestore directly:
    List my Firestore collections.

Benefits of Firebase MCP

Note: Firebase MCP is in Preview, which means it's not subject to any SLA or deprecation policy and could change in backwards-incompatible ways.

Now that you have Firebase MCP set up and your Firestore database configured, let's implement the functionality to save journal entries to your Firestore database. This step will show you how to use the App Prototyper to generate the code for persisting journal entries.

Firebase Firestore

Using the App Prototyper for Firestore Integration

With Firebase MCP enabled, the App Prototyper can now directly interact with your Firestore database. This makes it much easier to implement data persistence without manual coding.

Adding Firestore Save Functionality

  1. Access the Prototyper: In your Firebase Studio workspace, locate the App Prototyper chat interface
  2. Enter Firestore Integration Prompt: Use the following prompt to add Firestore save functionality:
Add Firestore integration to save journal entries to the database.
When a user submits the journal entry form:
- Save the entry to a "journals" collection in Firestore
- Include the title, content, timestamp, and AI-generated advice
- Show a success message when the entry is saved
- Display all saved entries below the form
- Add proper error handling for database operations
- Include loading states during save operations
Make sure the entries are displayed in reverse chronological order (newest first).
  1. Review Generated Code: The Prototyper will:
    • Create Firestore client configuration
    • Generate functions for saving entries to the database
    • Create components for displaying saved entries
    • Add proper error handling and loading states
    • Implement real-time updates for new entries
  2. Test the Firestore Integration:
    • Enter a journal entry with title and content
    • Click save to store it in Firestore
    • Verify the entry appears in the list below
    • Check that the AI advice is also saved with the entry

Understanding the Generated Firestore Code

The App Prototyper will generate code that:

Customizing the Data Structure

You can further customize how data is stored by asking the Prototyper:

Modify the journal entry structure to include:
- User ID for future authentication
- Tags or categories for entries
- Mood indicators
- Word count for analytics
Add a search function to filter entries by title or content.

Verifying Data in Firebase Console

  1. Open Firebase Console: Click on your project name in Firebase Studio to open the console
  2. Navigate to Firestore: In the left sidebar, click Build → Firestore Database
  3. View Your Data: You should see a journals collection with your saved entries
  4. Check Entry Structure: Each entry should contain:
    • title: The journal entry title
    • content: The full journal entry text
    • timestamp: When the entry was created
    • aiAdvice: The generated therapeutic advice
    • id: Unique document ID

Testing Data Persistence

  1. Create Multiple Entries: Add several journal entries to test the save functionality
  2. Refresh the Page: Verify that entries persist after page refresh
  3. Check Real-time Updates: Open the app in multiple tabs to see real-time synchronization
  4. Test Error Scenarios: Try saving entries with network issues to test error handling

Security Considerations

The current setup uses Firestore in test mode, which allows read/write access to anyone. For production:

With Firebase MCP enabled, the App Prototyper can now directly manage your Firestore database, making it much easier to implement complex data operations without manual coding.

The final step is to deploy your mindful journaling app and make it accessible to users. Before deploying, we need to ensure proper billing setup, then Firebase Studio provides a simple way to publish your application directly from the development environment.

Setting Up Billing for Your Firebase Project

Before deploying, you need to set up billing for your Firebase project to ensure all services work properly:

  1. Access Firebase Console:
    • Click on your project name in the top-left corner of Firebase Studio
    • This will open the Firebase Console in a new tab
  2. Navigate to Billing:
    • In the Firebase Console, click the gear icon (⚙️) next to "Project Overview"
    • Select Project settings
    • Click on the Billing tab
  3. Set Up Billing Account:
    • If you don't have a billing account, click "Link a billing account"
    • Choose to create a new billing account or link an existing one
    • Fill in your billing information (credit card required)
    • Click "Set account" to complete the setup
  4. Verify Billing Status:
    • Ensure your billing account is properly linked
    • Check that the status shows as "Active"
    • Note that Firebase has a generous free tier that should cover most development needs

Important: Firebase requires billing setup even for free tier usage. This is for verification purposes and to handle any usage that exceeds the free tier limits.

Publishing Your Project with the App Prototyper Agent

  1. Prepare Your App: Ensure your app is working correctly in the preview panel
  2. Access the App Prototyper:
    • In your Firebase Studio workspace, locate the App Prototyper chat interface
    • This is the same AI assistant you've been using throughout the development process
  3. Publish your app:
    • In the upper right corner of the screen, click the Publish button
    • The publishing process in Firebase Studio follows these steps:
      1. Create Billing Account (if not already set up)
      2. Link Google Cloud Billing AccountFirebase Studio - Link Billing
      3. Use Google Cloud Billing AccountFirebase Studio - Use Billing
      4. Enable Firebase Services: Firebase Studio - Enable Services
      5. Publish Your App: Firebase Studio - Publish App

Testing Your Live Application

Mindfully

  1. Open Your Live App: Visit the provided hosting URL
  2. Test Core Functionality:
    • Create new journal entries
    • Verify AI-generated therapeutic advice
    • Check that data is saved correctly
    • Ensure responsive design works
  3. Monitor Performance: Check that your app loads quickly and functions smoothly

Deployment Options

The App Prototyper Agent automatically handles:

Understanding Firebase Pricing

Firebase offers a generous free tier that includes:

For most personal projects and small applications, the free tier should be sufficient.

Note: The App Prototyper Agent simplifies deployment to just a few button clicks, making it accessible to developers of all skill levels.

Congratulations! You've successfully built a full-stack AI-powered mindful journaling application using Firebase Studio. This codelab demonstrated how Firebase Studio's AI-powered development environment can accelerate the entire development process, from initial prototyping to deployment.

What You've Accomplished

Firebase Studio for Production Apps

Firebase Studio is designed for building production-ready applications. While some features may still be in preview, the core functionality provides a solid foundation for:

Keep Learning

Firebase Studio continues to evolve with new features and capabilities. Stay updated with the latest developments and explore advanced features like Firebase MCP for enhanced automation.

Connect & Support

Follow me for more tutorials and updates:

Need help or have questions? Email: hi@joshuamdeguzman.com

Happy coding! 🚀