Studio Scaffold for Mesop

Mesop scaffold for Studio style apps.

This is an example of a multi-page Mesop UX application, where:

• individual pages have their own state management while also having access to an application state
• Mesop custom components are used to facility app scaffolding, with side navigation and header

Open in Firebase Studio (nee Project IDX)

Firebase Studio is an entirely web-based, integrated development environment. Firebase Studio can help you build and deploy applications in various tech stacks. To open this project in Firebase Studio, select the button below.

Local development

Prerequisites

A python virtual environment, with required packages installed.

Using uv:

# create a virtual environment
uv sync
# activate the virtual environment
source .venv/bin/activate
# install the requirements
uv pip install -r requirements.txt

Mesop scaffold app

Start the app

Start the app to explore

mesop main.py

Enable the Gemini Page

This scaffold comes with two pages enabled, and a third page that uses Gemini, is commented out. To use it, you'll have to set a Google Cloud Project.

Create an .env file

This app uses Gemini, so you'll also need to create a .env file with the following:

PROJECT_ID=YOUR_PROJECT_ID
LOCATION=us-central1
MODEL_ID=gemini-2.0-flash-exp

Your GCP Project ID can be obtained via gcloud config get project

Uncomment references to Page & Side Nav

In main.py, uncomment:

• line 21, #from pages.gemini2 import gemini_page_content
• lines 51-60, the mesop page definition for the Gemini page.

In components/side_nav.py, uncomment the entry in the page_json list. This will render the page in the side navigation menu.

• line 27, {"display": "Gemini", "icon": "auto_awesome", "route": "/gemini"},

Disclaimer

This is not an official Google project.