Challenge 1: Set up your environment

Next Challenge

Introduction

Welcome to the Movie Guru team! In your role as a Site Reliability Engineer on this team, you will work through the challenges to ensure that the app is reliable and performant. Your first task is to get the application running smoothly in your local environment. You’ll set up your development environment using the Cloud Shell editor and interact with the initial version of the Movie Guru application, ensuring a stable starting point for the system.

Step 1: Firebase setup

To use Firebase Genkit and Genkit Monitoring, you’ll need to set up a web app in Firebase.

  • Go to the Firebase Console and create a new Firebase Web App in the existing project.

Step 2: Clone the Repository and set the environment variables

Note: All participants will need to do Step 2 in their own environments.

  • Open the Cloud Shell Editor and type the following commands.
git clone https://github.com/MKand/movie-guru.git
cd movie-guru
git checkout ghack-genkit-monitoring
  • Edit the set_env_vars.sh to replace PROJECT_ID, _FIREBASE_API_KEY, and _FIREBASE_APP_ID values.

Step 3: Run the app

  • Start the application on your cloud shell instance.

    chmod +x start_app.sh

# This step takes several minutes to spin up all docker
# images for the application containers (frontend, webserver,
# and Genkit flows).
./start_app.sh

  • While waiting for services to start, explore the application architecture and connect it to what you see in the codebase.

Architecture diagram

  • Open the js/flows folder within the codebase. Find where the application:

    1. Establishes connection with the database
    2. Configures Genkit.
    3. Defines prompts for interacting with the LLM.

Step 4: Test the app

  • Access the Movie Guru app on http://localhost:8080 by clicking the Web Preview button on the top right of the Cloud Shell window and selecting “Preview on port 8080”. The icon for Web Preview looks like the following.

    this

  • Login using your name.
  • Get to know the Movie Guru application by chatting with it.

Success Criteria

  • All your team mates have cloned the source code into their own cloud shell environments.
  • Your local environment is set up in Cloud Shell for all group members.
  • You are able interact with the Movie Guru app running on your local Cloud Shell instance.

Tips

  • You can find the firebase config values in the Project Settings page by clicking the settings cog next to Project Overview in the left-hand nav of the firebase console.
  • The Movie Guru app uses dotprompt to manage its prompt variants.
  • The Movie Guru app uses flows to encapsulate AI workflows.

  • MovieGuru Application Architecture:

    • The user interface: A Vue frontend (code found in frontend).
    • The application logic layer: A GoLang backend server (code found in chat_server_go).
    • The GenAI core: Genkit flows, which handle the conversational and recommendation logic. These flows communicate directly with Gemini models on Vertex AI to leverage large language model capabilities (code found in js/flows).
    • Data Storage: PostgreSQL with the pgvector extension, used for storing both structured movie data (title, plot, etc.) and vector embeddings for semantic search.
    • Session Management: A Redis cache for storing user session information and conversation history.

Learning Resources

Next Challenge