
Before you begin
- Labs create a Google Cloud project and resources for a fixed time
- Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
- On the top left of your screen, click Start lab to begin
Setup your Genkit Project
/ 25
Deploy the flow to Cloud Run
/ 25
Deploy the flow to Firebase
/ 30
Develop web app using Firebase Local Emulator
/ 20
Firebase Genkit is an open source framework that helps you build, deploy, and monitor production-ready AI-powered apps.
Genkit is designed for app developers. It helps you to easily integrate powerful AI capabilities into your apps with familiar patterns and paradigms.
Use Genkit to create apps that generate custom content, use semantic search, handle unstructured inputs, answer questions with your business data, autonomously make decisions, orchestrate tool calls, and much more.
This lab provides an introductory, hands-on experience with Firebase Genkit and the Gemini foundation model. You leverage the default flow and deploy it to both Google Cloud and Firebase.
You learn how to:
This Qwiklabs hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.
To complete this lab, you need:
Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is a panel populated with the temporary credentials that you must use for this lab.
Copy the username, and then click Open Google Console. The lab spins up resources, and then opens another tab that shows the Choose an account page.
On the Choose an account page, click Use Another Account. The Sign in page opens.
Paste the username that you copied from the Connection Details panel. Then copy and paste the password.
After a few moments, the Cloud console opens in this tab.
Google Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud.
Google Cloud Shell provides command-line access to your Google Cloud resources.
In Cloud console, on the top right toolbar, click the Open Cloud Shell button.
Click Continue.
It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. For example:
gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.
Output:
Example output:
Output:
Example output:
In this task, you set up a node application to use Firebase Genkit, and configure it to access the Gemini model in Google Cloud's Vertex AI.
In Cloud Shell, to set environment variables and enable relevant APIs, run the following command:
The first three lines specify the active project and the region that should be used.
Disabling and enabling Cloud Run functions ensures that the service account used by Genkit for functions is available.
To authenticate to Google Cloud and set up credentials for your project and user, run the following command:
When prompted, type Y, and press Enter.
To launch the Google Cloud sign-in flow in a new tab, press Control (for Windows and Linux) or Command (for MacOS) and click the link in the terminal.
In the new tab, click the student email address.
When you're prompted to continue, click Continue, and click Allow.
To get the verification code, click Allow.
Click Copy.
Back in the terminal, where it says Enter authorization code, paste the copied verification code, and press Enter.
You are now authenticated to Google Cloud.
To create a directory for your project and initialize a new Node project, run the following commands:
This command creates a package.json
file in the genkit-intro
directory.
To install Genkit CLI, tsx, and typescript, run the following command:
To install the core Genkit package and other dependencies for your app, run the following commands:
Create the application source folder and main file:
To open the Cloud Shell editor, click Open Editor () on the menu bar.
If the student folder is not already visible in the left panel, in the IDE activity bar, click Explorer ().
Open the ~/genkit-intro/package.json
file, and review all the dependencies that were added.
The dependency list should look similar to this:
Go to the src
folder and open the index.ts
file. Add the following import library references to the index.ts file:
After the import statements, add code to initialize and configure the genkit
instance, and configure logging and telemetry:
Add code to define a flow named menuSuggestionFlow which prompts the model to suggest an item for a menu of a themed restaurant, with the theme provided as input:
Add code to start the flow server and expose your flows as HTTP endpoints on the specified port:
To test the application, click Open Terminal, and, in Cloud Shell, run the following commands:
This command starts Genkit without the Genkit Developer UI, and provides the npx tsx src/index.ts
command to Genkit.
When prompted, press Enter to continue.
Wait till the Genkit flow server starts. When ready, you should see output similar to:
Open a new terminal in Cloud Shell, and run:
The result is shown.
You can also run a flow and stream the response:
To access the flow using a POST request, run:
Return to the first Cloud Shell Terminal, and press CTRL+C to exit.
For lab assessment purposes, run the following commands to move the files to the Cloud Storage Bucket named
Click Check my progress to verify the objectives.
In this task, you deploy your Genkit application to Cloud Run, so that anyone can access it over the internet.
In Cloud Shell, to update package.json
, run the following commands:
In the Cloud Shell editor, open the file ~/genkit-intro/package.json
.
The package.json
file now should look similar to:
The exact versions of some libraries might be different from what is shown.
To create a default Typescript configuration file to build your application, in Cloud Shell, run the following command:
To run the build, in the Cloud Shell, run the following commands:
To deploy the application to Cloud Run, run the following command:
When prompted to continue, type Y, and press Enter.
It may take a few minutes to deploy the service.
Once the service is deployed, to test the service, run the following commands:
The first command retrieves the URL for the Cloud Run service, and the second command calls the flow hosted on the service.
In the Google Cloud Console, in the Navigation menu (), click Cloud Run, and click the
View the metrics for the call that you just performed.
To see the logs for your service, select the Logs tab.
Click Check my progress to verify the objectives.
Firebase Genkit includes a plugin that helps you deploy your flows to Cloud Functions for Firebase. This task walks you through the process of deploying a default sample flow to Firebase.
To install Firebase tools, run:
The npm install
command installs the Firebase Command Line Interface (CLI) tools to test, manage, and deploy your Firebase project from the command line.
Update the path, and verify the version of Firebase installed:
The path is updated to ensure that you run the firebase commands from the packages you just installed, instead of running them from preexisting installs that may exist in Cloud Shell.
In Cloud Shell Terminal, to create a directory for the new app and set the project and location variables, run the following commands:
To authenticate the Firebase SDK, run the following command:
To allow Firebase to collect CLI and Emulator Suite usage and error reporting information, enter Y, and press Enter.
Click on the URL provided to open a new browser window and follow the steps provided on the screen to generate the verification code.
Copy the verification code, and then, in Cloud Shell, paste it as the authorization code, and press Enter.
To initialize a new Genkit project, run the following command:
Select the Use an existing project option, and press Enter.
Select project
To initialize functions, type Y, and press Enter.
To not use ESLint, type n, and press Enter.
To install dependencies with npm, type Y, and press Enter.
After the dependencies are installed, to install the Genkit CLI locally, select Just this project, and press Enter.
Select Google Cloud Vertex AI as your model provider, and press Enter.
After the NPM packages are installed, select Set if unset to update your tsconfig.json with suggested settings, and press Enter.
Select Set if unset to update your package.json with suggested settings, and press Enter.
To generate a sample flow, type Y, and press Enter.
Rename the generated sample application file:
To change the default region for Vertex AI, run the following command:
Update the Gemini model used in the sample application:
Click Open Editor, navigate to the ~/genkit-fire/functions/src
folder, and open the index.ts
file.
To define an authorization policy for the flow, in the onCallGenkit()
method, uncomment the authPolicy parameter:
To deploy your flow to Firebase Cloud Functions, you must wrap the flow in the onCallGenkit()
method that enables you to quickly create a callable function in Firebase.
Add the cors
, and region
parameters to the onCallGenkit()
function:
Comment out the secrets
parameter as the flow does not use the Gemini model in Google AI which reqires an API key to be provided. Instead, the flow uses Gemini in Vertex AI.
Also, comment out these lines above the genkit
initialization code:
After the updates are made, the onCallGenkit()
method invocation should look like this:
(Comments have been removed from the snippet below)
Click Open Terminal, navigate to the ~/genkit-fire/functions
folder, and try the flow in the developer UI.
Wait for the command to return the Genkit Developer UI URL in the output before continuing to the next step.
Click the Web Preview button, and click Change port.
Change the port to 4000
, and click Change and Preview.
The Genkit Developer UI opens in your browser.
On the left side panel, click Flows. For the flow to run, click menuSuggestionFlow.
On the Input JSON tab, use the following subject for the model:
Click the Context JSON tab, and use the following as a simulated auth object:
To test the flow, click Run.
The output from the flow is displayed.
Close the Genkit Developer UI tab, and return to Cloud Shell Terminal. Press CTRL+C to exit.
For lab assessment purposes, run the following commands to move the file to the Cloud Storage Bucket named
Now, deploy the function to Firebase using the following command:
Ignore any warning messages that might be displayed.
If prompted to enter the number of days to keep container images, use the default and press Enter.
You've now deployed the flow as a Cloud Run function, but you won't be able to access your deployed endpoint with curl or a similar tool, because of the flow's authorization policy. Continue to the next section to learn how to securely access the flow.
The default sample flow uses the authorization policy:
The onCallGenkit()
wrapper provided by the Firebase Functions library uses Firebase Auth to protect your flows. It has built-in support for the Cloud Functions for Firebase client SDKs.
To test your flow endpoint, you can deploy a simple web app.
In a new tab of the same browser window, open the Firebase console (https://console.firebase.google.com/).
Select the project
If prompted, accept the Firebase Terms and Conditions.
In the Firebase console, click on the Setting icon next to Project Overview, and click Project settings.
In the Your apps section, to add a new web app, click the Web App (</>) platform.
For App nickname, type
Select Also set up Firebase Hosting for this app, and click Register app.
For the Add Firebase SDK and Install Firebase CLI sections, leave the settings as their defaults and click Next for both sections.
For the Deploy to Firebase Hosting section, click Continue to Console.
In the left panel, click Build, and select Authentication.
To begin setting up user authentication for the app, click Get started.
For Sign-in providers, click Google, then click Enable.
For Support email for project, select the student email, then click Save.
To set up Firebase Hosting, return to Cloud Shell and run the following commands:
Click Open editor, navigate to the ~/genkit-fire/public
folder, and replace the code in index.html
with the following:
Return to the Firebase Console, click the Settings icon next to Project Overview, and then click Project settings.
Scroll down to the Your apps section, and for the large code block, click the copy button.
Navigate back to Cloud Shell, click on Open Editor, and navigate to the ~/genkit-fire/functions/src
folder.
Paste the copied code into the index.ts file after the import section and above the genkit
initialization code.
Find the initializeApp line that was just copied in, and remove const app =
.
The new line should contain only initializeApp(firebaseConfig);
.
Click Open terminal, and then, to add the firebase
dependency to the package.json
file, run the following commands:
Deploy the web app and Cloud Run function using the following command:
To open the web app, in a new browser tab, enter the following URL:
The app requires you to login with a Google account, after which you can initiate endpoint requests.
On the web app page, click Sign in with Google, and select the Google account
The entry form is displayed.
For Subject, type
After a short delay, the application returns the flow response, which may resemble this:
Click Check my progress to verify the objectives.
Firebase offers a suite of emulators for local development, which you can use with Genkit.
To use Genkit with the Firebase Emulator Suite, start the Firebase emulators by running the following commands.
To use Genkit with the Firebase Emulator Suite, in Cloud Shell, run the following commands:
This will run your code in the emulator and run the Genkit framework in development mode, which launches and exposes the Genkit reflection API (but not the Dev UI).
The emulators' UI is hosted on localhost port 4000.
Click the Web Preview button, and click Change port.
Change the port to 4000
, and click Change and Preview.
The emulators UI is presented.
Keep the emulators running in this terminal tab, and open a new tab using the + button in Cloud Shell.
To launch the Genkit Developer UI and run it against the emulated code, run the following commands:
The Genkit Developer UI will be hosted on port 4001. Instead of calling a Cloud Run function, the developer UI uses the emulator.
Click the Web Preview button, and click Change port.
Change the port to 4001
, and click Change and Preview.
The Genkit developer UI opens in a new tab, and you can make calls against the emulator.
Return to the Cloud Shell terminal and press CTRL+C to exit.
Run the following commands to move the file to the Cloud Storage Bucket named
Click Check my progress to verify the objectives.
You have successfully created a Genkit project and deployed it both to Google Cloud Run and Firebase. Additionally, you tested the application through the Genkit development UI and the CLI interface.
Manual Last Updated February 14, 2025
Lab Last Tested February 14, 2025
Copyright 2024 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.
This content is not currently available
We will notify you via email when it becomes available
Great!
We will contact you via email if it becomes available
One lab at a time
Confirm to end all existing labs and start this one