ClimaChat AI

💡 Inspiration

Climate change is the defining crisis of our generation, yet most students either feel overwhelmed by it or have been misled by misinformation. When we searched for a resource that could answer "Why do sea levels rise?" in plain teenage language at 11pm before an exam, nothing existed. Textbooks are dry. Google returns conflicting articles. Social media is full of myths.

We wanted to build something that felt like texting a brilliant, patient science teacher who is always available, never judges you for asking a "basic" question, and actually makes you care about the planet. That's the spark behind ClimaChat.

🌍 What it does

ClimaChat is an AI-powered climate science tutor built specifically for students aged 13–20. It has two core modes:

💬 Ask Mode Students can type any climate question in natural language and receive a clear, jargon-free, age-appropriate answer with real-world analogies. Topic starter cards cover Global Warming, Rising Seas, Carbon Sinks, Clean Energy, Biodiversity, and Food & Farming to help students who don't know where to begin.

🔍 Myth Buster Mode Students paste a climate claim they've seen on social media or heard from a friend. The AI delivers a clear TRUE, FALSE, or PARTLY TRUE verdict backed by scientific evidence. This directly fights climate misinformation at the source young people's social feeds.

The app is fully responsive, works on mobile and desktop, and requires zero sign-up. Any student anywhere in the world can open the link and start learning immediately.

🔧 How I built it

Architectural Stack:

Generated & scaffolded with: Claude AI (Anthropic) for code generation and architecture planning
Refined in: Manual editing in VS Code
Frontend: Vanilla JavaScript with ES Modules no heavy framework, keeping it fast and accessible
Bundler: Vite 5 for lightning-fast dev and optimized production builds
AI Model: Qwen 2.5 7B Instruct via Featherless AI (OpenAI-compatible API)
Styling: Pure CSS with CSS Variables no Tailwind dependency, full control
Fonts: Playfair Display + DM Sans via Google Fonts
Deployment: GitHub Pages via gh-pages npm package

How I Steered the AI: The project is cleanly separated into focused modules config.js for settings, api.js for the Featherless API call, state.js for app state, render.js for incremental DOM updates, data.js for all static content, and main.js as the entry point that wires everything together. This separation was a deliberate architectural decision to keep the codebase auditable and maintainable, not just AI-generated spaghetti.

The system prompt was carefully engineered to keep responses student-friendly: concise answers, relatable analogies, encouraging tone, and a specific Myth Buster format that labels claims clearly.

🧱 Challenges I ran into

CORS & browser security Direct API calls from a file:// URL are blocked by browsers. We solved this by using Vite as a local dev server and deploying via GitHub Pages so the app always runs on a proper http:// origin.
API key management Keeping the key out of the public GitHub repo while still having it available at build time required setting up GitHub Actions with repository secrets that inject the key into config.js at deploy time.
DOM performance Early versions rebuilt the entire message list on every state update, causing browser violation warnings. We fixed this by switching to incremental DOM updates only appending new message bubbles rather than wiping and rebuilding the whole list.
Model availability Some larger models (70B) were behind paid tiers on Featherless. We tested and settled on Qwen 2.5 7B which gives excellent responses on the free tier.

🏆 Accomplishments that I'm proud of

Built a fully functional, deployed AI application with clean, modular code architecture
The Myth Buster feature directly tackles one of the most dangerous real-world problems facing young people climate misinformation on social media
Achieved zero external UI framework dependencies the entire beautiful interface is pure CSS, making it extremely lightweight and fast-loading for students in low-bandwidth regions
The app is genuinely useful it can correctly answer complex climate questions and accurately fact-check common myths with scientific reasoning
Secure key management API key never appears in the public repository

📚 What we learned

How to architect a clean, maintainable vanilla JS project using ES Modules without reaching for a framework
How to work with OpenAI-compatible APIs and the difference between Anthropic-style and OpenAI-style message formats
How to use GitHub Actions to securely inject secrets at build time for static site deployments
The importance of incremental DOM updates vs full re-renders for performance
How to craft effective AI system prompts for a specific audience — the difference between a generic chatbot response and one tuned for a 15-year-old student is significant

🔮 What's next for ClimaChat

Quiz Mode After a conversation, ClimaChat generates a short quiz to test what the student just learned
Progress tracking Local storage to remember which topics a student has explored
Classroom mode Teachers can set a topic for the week and students explore it together
Multilingual support Climate education shouldn't be limited to English speakers; auto-detect and respond in the student's language
Image analysis Students can upload photos (deforestation, pollution, weather events) and ask "what's happening here?"
School integration A lightweight embed widget schools can add to their own websites

🤖 AI Stack Summary

Tool	Role
Claude (Anthropic)	Code generation, architecture, prompting strategy
Qwen 2.5 7B (Featherless AI)	Runtime AI model powering student responses
Vite	Build tooling
GitHub Actions	Automated deployment pipeline
GitHub Pages	Hosting