This is a submission for Weekend Challenge: Earth Day Edition
What I Built
Every time you send a message to an AI, it consumes water, energy, and emits CO₂. Most people have no idea how much. Gemini Footprint Tracker makes that cost visible — in real time, per request, with full transparency about how the numbers are calculated.
You bring your own Gemini API key, pick a model, and start chatting. After every response the tracker shows how much water and CO₂ that exchange cost — scaled by token count and model weight. A community panel aggregates anonymous footprint data from all users via Supabase, so you can see the collective impact grow in real time.
Important: this is an awareness and transparency project, not an official measurement tool. The estimates are based on Google's publicly published baseline for a median Gemini Apps text prompt, combined with transparent app-side scaling logic. Every assumption is documented — what comes from Google, what is estimated, and where the model falls short. The /learn page inside the app explains the full methodology.
The goal is simple: make something invisible a little more visible.
Demo
🔗 Live: gemini-footprint-tracker.vercel.app
You'll need a free Google AI Studio API key to send messages. The key stays in your browser — it never touches a server.
Code
🌍 Gemini Footprint Tracker
An awareness project that makes the environmental cost of AI visible — tracking water, CO₂, and energy usage per Gemini API request in real time.
Built for the DEV Earth Day Challenge 2026.
What it does
Every prompt you send to Gemini uses water, energy, and emits CO₂. This tracker uses Gemini's usage metadata (token counts) combined with Google's official published baseline values to estimate the environmental footprint of each request — and aggregates it anonymously across all users via Supabase.
- 💧 Water consumption per request (mL)
- ☁️ CO₂ emissions per request (gCO₂e)
- ⚡ Token-based scaling per model (Flash-Lite / Flash / Pro)
- 📊 Community stats across all sessions
- 🔒 Your API key stays local — never sent anywhere except directly to Gemini
Stack
| Framework | React 19 + TypeScript + Vite |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion |
| Backend | Supabase (anonymous footprint |
How I Built It
Stack: React 19 + TypeScript + Vite, Tailwind CSS v4, Framer Motion, Supabase, Gemini API
The estimation model
Google publicly reports that a median Gemini Apps text prompt uses 0.26 mL of water, emits 0.03 gCO₂e, and consumes 0.24 Wh of energy. That's the only official number available. From there I built a token-based scaling model:
WeightedTokens = PromptTokens + ResponseTokens × 3.5
TokenScale = max(0.2, WeightedTokens / 775)
WaterEstimate = 0.26 × TokenScale × ModelMultiplier
CO₂Estimate = 0.03 × TokenScale × ModelMultiplier
The 3.5× output weight reflects that autoregressive decoding is significantly more compute-intensive than input prefill. The reference prompt (250 input + 150 output tokens) and the model multipliers (Flash-Lite: 0.85×, Flash: 1.0×, Pro: 1.35×) are documented approximations — not official Google values. The /learn page inside the app makes this separation explicit: what is official, what is estimated, and where the numbers can't be trusted.
Community stats
Each request anonymously logs water and CO₂ to Supabase. The topbar shows live community totals — water consumed, CO₂ emitted, unique users tracked. The numbers update in real time across all sessions.
UX decisions
The interface is intentionally built to feel like a normal AI chat — familiar composer, clean response layout, no dashboard clutter. That was a deliberate choice: AI resource usage is a topic that matters for everyone who uses these tools, not just people who go looking for environmental data. If it looks like a tracker, most people close it. If it looks like a chat, they stay.
The footprint numbers appear quietly after each response — present, but not in your face. The community stats in the topbar give a sense of collective scale without being alarming. Transparency about estimates is built into the UI from the start: the helper text, the suggestion chips, and the /learn page all reinforce that these are informed approximations, not ground truth.
Other decisions:
- API key stored in localStorage only, never transmitted anywhere except directly to Gemini
- Voice input via Web Speech API
- Animated transition between hero and chat state using Framer Motion's
layoutId - Mobile-responsive throughout, including the KaTeX methodology page
- Earth background video from NASA-Imagery via Pixabay
Prize Categories
Best use of Google Gemini — The entire app is built around the Gemini API. Every message goes through generateContent, and the response's usageMetadata — prompt and candidate token counts — directly drives the footprint calculation. The model selector supports gemini-2.5-flash-lite, gemini-2.5-flash, and gemini-2.5-pro, each with a distinct environmental multiplier. Gemini isn't a feature bolted on — it's the thing being measured.
Top comments (2)
Making the carbon cost of each AI prompt visible is such a needed transparency layer. It's easy to forget the environmental cost when it's abstracted away behind an API call.
Thanks! That was exactly the idea 🙌