DEV Community

Cover image for Building ClimateSage: An AI-Powered Climate Education Platform
Srikarmk
Srikarmk

Posted on

Building ClimateSage: An AI-Powered Climate Education Platform

The Challenge We Set Out to Solve

Climate change is the defining issue of our generation, yet there's a massive gap between what's happening to our planet and what people actually understand about it. Scientific reports are dense, news coverage can be overwhelming, and finding reliable, easy-to-understand information feels like searching for a needle in a haystack.

We asked ourselves: What if learning about climate change could be as easy as having a conversation?

That question led us to build ClimateSage AI – an interactive platform where anyone can ask questions about climate change and get clear, data-backed answers in return.

What is ClimateSage AI?

Think of ClimateSage as your personal climate teacher, available 24/7. It's a web application that combines three powerful features:

1. AI Chat Interface

Ask anything about climate change – from "What causes global warming?" to "How do solar panels work?" – and get educational responses that actually make sense.

2. Interactive Quizzes

Generate custom quizzes on any climate topic to test your knowledge and reinforce what you've learned.

3. Data Visualizations

See the numbers for yourself with interactive charts showing historical CO₂ trends and other climate data.
But here's what makes ClimateSage special: it doesn't just give you information. It creates an experience. Beautiful design, voice input capabilities, and smart features that make learning about climate science genuinely engaging.

The Tech Behind the Magic

We built ClimateSage using modern web technologies that prioritize both performance and user experience:

  • React & TypeScript for a fast, reliable frontend
  • Google Gemini AI to power our educational content
  • ElevenLabs for voice interaction capabilities
  • Supabase for secure backend infrastructure
  • Recharts for beautiful data visualizations

The result? A platform that loads instantly, responds quickly, and looks gorgeous on any device.

Meet Our AI Assistants

The heart of ClimateSage is powered by two specialized AI agents working together seamlessly:

ClimateSage Teacher Agent

Our main conversational agent acts as your personal climate educator. Built on Eleven Labs and Google Gemini's advanced AI:

  • Understands your questions in natural language
  • Explains complex topics in accessible, age-appropriate language
  • Provides data-backed answers enriched with real climate statistics
  • Connects concepts to help you see the bigger picture

The Teacher Agent isn't just regurgitating facts – it's designed to foster genuine understanding. Ask about renewable energy, and it'll explain not just what it is, but why it matters and how it relates to reducing emissions.

Voice Transcription Agent

Don't want to type? Just speak. Our ElevenLabs integration lets you ask questions using your voice – perfect for multitasking or when you just prefer talking over typing.

Our second agent handles the magic of voice interaction. Built on ElevenLabs' speech-to-text platform, this agent:

  • Listens to your spoken questions with high accuracy
  • Transcribes speech to text in real-time
  • Handles multiple accents and speaking styles
  • Enables hands-free learning – perfect when you're multitasking

This agent bridges the gap between how we naturally communicate (speaking) and how AI processes information (text). Instead of typing out "What is the greenhouse effect?", you can simply say it out loud and get your text instantly.

  • "What causes global warming?"
  • "How do renewable energies work?"
  • "What is the Paris Agreement?"
  • "What can I do about climate change?"

One click, and you're learning.

Topic Detection & Organization
Every question you ask gets automatically categorized into topics like:

🔬 Climate Science
⚡ Renewable Energy
📜 Policy & Agreements
🌍 Environmental Impact

This helps you see patterns in your learning and makes it easy to find previous conversations about specific topics.

Educational Loading States
Even the wait time is educational. While the AI processes your question, you'll see rotating climate facts:

"Did you know? The ocean absorbs 30% of human CO₂ emissions"
"Renewable energy created more jobs than fossil fuels in 2023"
"Trees can store up to 48 pounds of CO₂ per year"

Built with - Google Gemini AI | ElevenLabs | React | Supabase | Lovable

Top comments (1)

Collapse
 
brian_langat_ce98c869d64f profile image
Brian Langat

Can we collaborate. let's connect WhatsApp +254100327130