VitAir

Poster

Inspiration

Stepping outside in Pune and not knowing if the hazy sky was just fog or genuinely harmful air. Most weather apps tell you temperature — none of them tell you should I put on a mask today? I wanted something that could answer that question personally, not generically.

What it does

VitAir pulls real-time air quality (AQI, PM2.5, PM10, NO₂, CO, Ozone), weather, and UV data for your exact GPS location, then cross-references it with your health profile (asthma, heart condition, pregnancy, etc.) to generate a personalized risk score and daily health briefing — powered by Claude AI. It also shows a 7-day AQI forecast, a 24h trend chart, and 4 AI-generated recommendations that actually make sense for your conditions and today's air.

How we built it

Single-file HTML/CSS/JS — no backend, no build tools, no framework. Data comes from three free APIs: Open-Meteo (weather + AQI), OpenAQ, and Nominatim (reverse geocoding). The AI briefing and recommendations are generated live via the Anthropic Claude API (claude-sonnet). The whole thing runs in the browser.

Challenges we ran into

Getting the recommendations to be coherent was harder than expected — early versions would simultaneously tell you "air quality is dangerous" and "great day for a run!" in the same panel. Fixing that meant scrapping the rule-based system entirely and handing it to Claude with strict consistency instructions. Also wrangling browser geolocation permissions — turns out people click "Block" and then wonder why they're seeing New York's weather in Pune.

Accomplishments that we're proud of

The whole thing is a single .html file with zero dependencies you need to install. It works offline-first with graceful fallbacks, generates genuinely personalized AI health briefings (not just mad-libs with your name), and looks good doing it. The location permission screen that actually explains what to click and why felt like a small but satisfying UX win.