AWU Tracker

Inspiration

We noticed that while people are becoming more aware of AI's environmental impact, there's no easy way to visualize it in real time. Every time you send a message to an AI such as ChatGPT, it consumes water to cool the data centers running those models. We wanted to make that invisible cost visible. This tool will allow us to be both more environmentally knowledgeable.

What it does

AWU Tracker is a Firefox extension that tracks how much water is consumed by your AI usage in real time. It counts output tokens from ChatGPT, converts them to an estimated water usage figure, and displays your stats in a clean sidebar and dashboard. You can see your total water used, water bottles equivalent, and even what percentage of Lake Mendota you've consumed.

How we built it

We built it using Plasmo, a browser extension framework that lets you write extensions in React and TypeScript. The frontend is built with React and Tailwind CSS. Content scripts detect AI responses on ChatGPT and Claude, count tokens using a tokenizer library, and store the data in chrome.storage. The sidebar and dashboard read from that storage and update in real time.

Challenges we ran into

Finding accurate research data on how much water is consumed by AI was tricky. Another issue is that without an API key to ChatGPT, there would only be an estimate on how many tokens were used unless we were to use our own LLM thereby consuming more water. To counteract this we decided to use DOM scrapping on the ChatGPT website to get a more estimated figure, and allow for non-tech savvy users to use the extension.

Getting the Firefox sidebar API working with Plasmo was tricky since Plasmo is primarily designed for Chrome. We also had to figure out how to detect when an AI response finished streaming before counting tokens, since these sites load responses dynamically.

Accomplishments that we're proud of

Creating a web extension and being able to connect the frontend and the backend is what we are most proud of. Every process from the research, to the innovative solutions, to the actual implementation is what we are proud of.

What we learned

We learned a lot about how browser extensions work under the hood such as content scripts, background workers, and extension storage. We also got hands on experience with React, Tailwind, and TypeScript as a team. We honestly also learned the more accurate usage of water per prompt, as AI becomes more infamous a lot of misinformation spreads quickly of how much/little water AI actually uses.

What's next for AWU Tracker

Some features that we did not have time for include: allowing the scrapper to read images, creating a chrome version for a bigger userbase, even more detailed breakdowns by model and session, and perhaps even settings to toggle things like including water training costs.

Built With

• javascript
• react
• tailwind
• typescript