"Planning with the Gemini API" - a Firebase AI sample app

Welcome to the Planning with the Gemini API sample app, an AI-powered web app for to-do lists! It's an Angular app built using the Gemini API and Firebase.

The Gemini API gives you access to Google's latest generative AI models – the Gemini family of multimodal models. This Planning with the Gemini API web app calls the Gemini API to generate a task list from either text or an image provided by the end user.

The backend of Planning with the Gemini API is powered by Firebase, which is Google's platform for building fullstack multi-platform apps. This app uses Firebase Authentication for signing-in and authorizing end users. It also uses Firestore – a NoSQL realtime database – to store the to-do list items.

[!CAUTION] > In its DEFAULT state, this sample app is for EXPERIMENTATION and PROTOTYPING ONLY. It uses the Google AI SDK for JavaScript directly from the client-side which means that you risk potentially exposing your Gemini API key to malicious actors if you deploy this app.

If you want to deploy this sample app or use it as a base for a production app, we strongly recommend that you migrate to use the Vertex AI in Firebase SDK, which offers security options against unauthorized clients.

Explore the app's codebase

• In src/environments/environments.ts, you can find important configuration values:

  • Within firebase, find the values needed to connect your app to Firebase (most importantly apiKey, projectId, and appId).
  • Find your Gemini API key (gemini_api_key).

  Note that if you run the sample app in IDX, then these config values will be automatically populated into the file for you.

• In src/app/services/task.service.ts, you can explore how to make a basic call to the Gemini API, including:

  • Importing the Google AI package: google/generative-ai.
  • Initializing the Google AI service and the generative model.
  • Calling generateContent to send the request to Gemini with the provided prompt (and image, if provided).

• In src/app/app.config.ts and src/app/services/task.service.ts, you can explore how to use Firebase, including:

  • Using Firebase Authentication's anonymous authentication method to create an authenticated user account.
  • Using Firestore to write and read to-do tasks and subtasks generated by Gemini.

Set up and run the app

You can either run the sample app in IDX (recommended) or locally.

Option 1: Run in IDX (recommended)

This Planning with the Gemini API web app is best experienced by running it in IDX, which is Google's browser-based workspace for building, shipping, and managing full-stack multiplatform apps.

Firebase provides a custom workflow using IDX to help you quickly experiment with the sample app. This workflow automatically sets up a new Firebase project with Authentication and Firestore enabled, opens the sample app in IDX, and sets up the app to use Firebase and the Gemini API. The project and app are yours to experiment with and explore how Gemini works.

GET STARTED WITH THE SAMPLE APP IN IDX

You can also kick-off this custom workflow from the Firebase console in the Build with Gemini section (find the "Experiment with a Gemini sample app" banner).

Here's some additional information about this custom workflow:

• To somewhat protect your Gemini API key, the workflow has imposed a quota limit on the API key of 10 RPM.
• This workflow creates a new IDX workspace. If you run out of workspace quota, go to idx.google.com to delete an old workspace.

Option 2: Run locally

You can also run this Planning with the Gemini API web app locally. You'll just need to complete some manual setup steps.

Prerequisites

• Node.js v20+
• npm v10+
• Angular CLI 18+

Setup instructions

1. Set up Firebase: a. Create a new Firebase project in the Firebase console. You can skip setting up Google Analytics. b. Enable Firestore and anonymous authentication in your new project. c. Create a new Firebase web app in your new project. You can skip setting up Firebase Hosting. d. Copy your Firebase config object, and replace the placeholder values in the src/environments/environments.ts file of the sample app.

2. Set up the Gemini API: a. Get a Gemini API key in Google AI Studio. Use the Firebase project you just created. b. Add your Gemini API key into the src/environments/environments.ts file of the sample app.

3. Run npm install to install the app's dependencies.

4. Serve the app: a. Run ng serve to start the Angular development server. b. Open your browser and navigate to http://localhost:4200.

Interact with the app

1. Create a new task.
   Click the "New task" button on the left to initiate the creation of a new task. Gemini suggests a task title. Edit the title as desired.

2. Generate subtasks.
   Gemini can generate a list of subtasks based either on your title and/or an uploaded image.

3. Save the task to add it to the dashboard of to-do tasks.

Migrate to use Vertex AI in Firebase

In its DEFAULT state, this sample app is for EXPERIMENTATION and PROTOTYPING ONLY. It uses the Google AI SDK for JavaScript directly from the client-side which means that you risk potentially exposing your Gemini API key to malicious actors if you deploy this app.

If you want to deploy this sample app or use it as a base for a production app, we strongly recommend that you migrate to use the Vertex AI in Firebase SDK, which offers security options against unauthorized clients. The sample app's codebase is already set up to use the Vertex AI in Firebase SDK, and you just need to do a couple extra steps to set up your Firebase project (as described below).

Note

The sample app includes a Terraform config file (prod.tf.example) that sets up Vertex AI in Firebase, including helping you set up billing, enabling the required APIs, and setting up Firebase App Check.

1. In the Firebase console, go to the Build with Gemini page, and then click the Vertex AI in Firebase card to launch a workflow that helps you do the following tasks (if they're not already done):

   • Upgrade your project to use the pay-as-you-go Blaze pricing plan.
   • Enable the following two APIs for your project:
     Vertex AI API and Firebase ML API

2. As soon as you start seriously developing your app, set up Firebase App Check to protect your app from abuse by unauthorized clients.

3. Follow security best practices by cleaning up your Firebase project and sample app:

   • If you're no longer using your Gemini API key, then delete it.

     • In the API keys section of Google AI Studio, view and delete your Gemini API key.
     • In the sample app's codebase, delete references to the Gemini API key in the following places:
       • google_apikeys_key resource entry in main.tf
       • gemini_api_key in both src/environments/environments.ts and src/environments/environments.ts.tmpl

   • If you're no longer using the Google AI Gemini API, then disable it in your project and delete references to it in your sample app's codebase:

     • Disable the API in the Google Cloud console: generativelanguage.googleapis.com
     • Delete references to generativelanguage.googleapis.com, including the google_service_usage_consumer_quota_override resource entry in main.tf.

Troubleshooting

Error when reading or editing Project "<project-id>": Get "https://cloudresourcemanager.googleapis.com/v1/projects/<project-id>?alt=json&prettyPrint=false":
compute: Received 500

This error happens because authentication has timed-out. Here's how to resolve it:

1. In Project IDX, open a new terminal.
2. In the terminal, run terraform apply --auto-approve, and then click continue when prompted to log in.
3. Wait until the command succeeds.
4. Reload the web preview, if necessary.

Error loading Gemini API key. Please rerun Terraform with terraform apply --auto-approve"

This error happens because Terraform failed to provision some resources during initialization, such as API keys. Here's how to resolve it:

1. In Project IDX, open a new terminal.
2. In the terminal, run terraform apply --auto-approve, and then click continue when prompted to log in.
3. Wait until the command succeeds.
4. Reload the web preview, if necessary.

Check Firestore permissions in Firebase Console: link

This error happens because Firestore security rules are blocking requests from your app. Here's how to resolve it:

1. Go to the Firebase console using the link provided in the error message.
2. Check that the security rules are what you expect. In particular, timestamp.date should be in the future.
3. Reload the web preview, if necessary.

Docs

• Firebase Support
• Google AI Gemini API documentation (for experimentation and prototyping)
• Vertex AI in Firebase documentation (for production apps)