DEV Community: Navin Kumar R

EcoAgents is a personal AI agent that analyses your carbon footprint, builds a personalized action plan, and remembers you across sessions — so it can follow up, check in, and give advice specific to your situation.

Most carbon footprint tools are one-shot: answer questions, get a number, close the tab, forget everything. EcoAgents is different because it's built around an agent architecture — it has identity, memory, reasoning, and the ability to take action over time.

🔗 Live demo: https://ecoagents.vercel.app/
🐙 GitHub: https://github.com/Navin1-11-04/Ecoagents.git

Demo

The Problem

Climate action at the individual level suffers from an awareness gap — people don't know their actual footprint, don't know which actions matter most, and have no system to hold them accountable over time.

Existing tools either:

Give you a generic number with no follow-up
Show global averages with no connection to your personal situation
Forget you the moment you close the browser I wanted to build something that felt more like a personal sustainability coach than a calculator. That's where the "agent" framing came in.

How I Built It

Architecture overview

User → Auth0 (identity) → Onboarding wizard
                              ↓
                    Gemini 2.5 Flash (analysis)
                              ↓
                    Backboard (memory storage)
                              ↓
                    Dashboard + Chat agent + Weekly email

Tech stack

Layer	Technology	Why
Framework	Next.js 16 (App Router)	Server components + streaming
Auth	Auth0 for Agents v4	Agent identity + secure sessions
AI	Google Gemini 2.5 Flash	Analysis, chat, email content
Memory	Backboard	Persistent agent memory across sessions
Email	Resend	Weekly agentic check-ins
Charts	Recharts	CO₂ breakdown + global comparison
OG Images	Next.js ImageResponse	Shareable score cards
Deploy	Vercel	Edge functions + auto-deploy
Dev assist	GitHub Copilot	Used throughout

Key Technical Decisions

1. Auth0 v4 — the migration that tripped me up

I used Auth0's brand new v4 SDK which completely changed the API from v3. Key differences that caught me out:

Auth routes moved from /api/auth/* → /auth/*
middleware.ts became proxy.ts in Next.js 16
AUTH0_BASE_URL renamed to APP_BASE_URL
AUTH0_ISSUER_BASE_URL renamed to AUTH0_DOMAIN (without https://) The v4 middleware pattern for route protection:

// proxy.ts
export async function proxy(request: NextRequest) {
  const authRes = await auth0.middleware(request);
  if (request.nextUrl.pathname.startsWith('/auth')) return authRes;
  if (request.nextUrl.pathname === '/') return authRes;
  const session = await auth0.getSession(request);
  if (!session) {
    return NextResponse.redirect(new URL('/auth/login', request.url));
  }
  return authRes;
}

2. Gemini for structured analysis

The core analysis prompt asks Gemini to return a typed JSON object with CO₂ estimates per category, 6 ranked actions, and a personalised agent message:

const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' });

const prompt = `
Return JSON only (no markdown). Structure:
{
  "totalTonnesCO2PerYear": number,
  "breakdown": { transport, energy, diet, shopping },
  "actions": [{ id, title, description, impact, difficulty, category }],
  "agentMessage": "warm 2-sentence message"
}
`;

// Always strip code fences before parsing
const clean = text.replace(/\`\`\`json|\`\`\`/g, '').trim();
const analysis = JSON.parse(clean);

I also used Gemini for streaming chat responses — the agent replies appear word-by-word using generateContentStream:

const result = await model.generateContentStream(prompt);

const stream = new ReadableStream({
  async start(controller) {
    for await (const chunk of result.stream) {
      controller.enqueue(encoder.encode(chunk.text()));
    }
    controller.close();
  },
});

return new Response(stream, {
  headers: { 'Content-Type': 'text/plain; charset=utf-8' },
});

And on the client, the chat panel reads the stream chunk by chunk:

const reader = res.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = decoder.decode(value, { stream: true });
  // Append to the last message progressively
  setMessages(prev => {
    const updated = [...prev];
    updated[updated.length - 1].text += chunk;
    return updated;
  });
}

3. Backboard for persistent agent memory

After analysis, I create a per-user Backboard assistant with memory: 'Auto' — this means Backboard automatically extracts facts and preferences from messages without me having to manage what gets stored.

const assistant = await backboardPost('/assistants', {
  name: `EcoAgent_${userId}`,
  system_prompt: 'You are EcoAgent, a personal sustainability coach...',
  llm_provider: 'google',
  llm_model_name: 'gemini-2.5-flash',
  memory: 'Auto',
});

// Store profile as memory-enabled message
await backboardPost(`/threads/${thread.thread_id}/messages`, {
  content: `User carbon profile: ${JSON.stringify(analysis)}`,
  memory: 'Auto',
  send_to_llm: false,
});

On return visits, the agent has context about what the user previously committed to — enabling genuine continuity.

4. Agentic weekly email

The most "agentic" behaviour: a Gemini-generated email personalised to each user's specific uncompleted actions, sent via Resend:

const prompt = `
Write a 150-word weekly check-in for ${name}.
Their footprint: ${total}t CO2/year
Completed this week: ${completedActions.join(', ') || 'none yet'}
Their next best action: ${nextAction.title} (saves ${nextAction.impact}t)
Be warm, specific, and encouraging.
`;

5. Score card with Next.js ImageResponse

Shareable 1200×630 OG images generated on the edge — no external dependencies:

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  return new ImageResponse(<ScoreCardJSX />, { width: 1200, height: 630 });
}

Challenges I Hit

Auth0 v4 callback URL mismatch — The SDK now uses /auth/callback not /api/auth/callback. I spent 20 minutes debugging a "callback URL mismatch" error that turned out to be one character difference in the Auth0 dashboard setting.

Gemini quota exhaustion — gemini-2.0-flash hit the free tier daily limit immediately (turns out it was deprecated in February 2026). Switching to gemini-2.5-flash fixed it and improved quality.

Backboard API discovery — The correct base URL (https://app.backboard.io/api) wasn't obvious from the docs. Found it by reading their open-source benchmark repo.

window on the server — Using window.innerWidth inside a React component for responsive layout crashes Next.js SSR. The fix was simple: use Tailwind's sm: breakpoint classes instead.

Gemini streaming in Next.js — ReadableStream works differently than expected with Next.js route handlers. The key was returning a plain Response with the stream rather than NextResponse.

Prize Categories

Best use of Auth0 for Agents — v4 SDK with proxy.ts middleware for route protection, auth0.getSession() for server component auth checks, and the agent's Auth0 sub ID as the persistent user identifier across Backboard memory.

Best use of Google Gemini — used in four distinct places: (1) structured JSON footprint analysis, (2) streaming chat agent with user-specific context, (3) weekly check-in email content generation, and (4) action plan ranking and descriptions.

Best use of Backboard — per-user persistent assistant with memory: Auto that retains carbon profiles, committed actions, and conversation context across sessions. The agent genuinely remembers returning users.

Best use of GitHub Copilot — used throughout development for TypeScript type inference, Tailwind class suggestions, and boilerplate for the Auth0 v4 migration. Particularly helpful for the Recharts configuration.

What the App Actually Does

Sign in with Auth0 — takes 5 seconds
4-step onboarding — transport, energy, diet, shopping. Animated step transitions, custom sliders with live fill, option cards with context labels
Gemini analysis — ~15 seconds. Returns your CO₂ total, category breakdown, 6 ranked actions, and a personalised agent message
Dashboard — donut chart breakdown, global comparison bar chart (your score vs India/World avg/China/USA), action checklist with CO₂ savings per item
EcoAgent chat — floating chat panel, streaming responses, pre-seeded prompts. Knows your full profile so advice is specific
Share score card — 1200×630 OG image generated on the edge, shareable anywhere

7. Weekly email check-in — Gemini writes a personalised email referencing your specific uncompleted actions and sends it via Resend

Reflections

The most interesting technical insight was how much the "agent" framing changes the architecture compared to a regular web app. A calculator is stateless — render, compute, display. An agent needs:

Identity (Auth0) — who is this person across sessions?
Memory (Backboard) — what have they told me before?
Reasoning (Gemini) — what should I say given everything I know?
Action (Resend) — what can I do proactively on their behalf? Each piece is straightforward. The interesting work is in how they connect.

Earth Day was the right theme for this kind of project. Climate change is one of those problems where individual behaviour genuinely matters at scale — and the gap between knowing you should do something and actually doing it is exactly where a persistent agent can help.

Built over one weekend with Next.js, Auth0, Gemini, Backboard, and too much coffee. Happy Earth Day 🌍

The Climb — Building the Path Forward | WeCoded 2026 Submission

Navin Kumar R — Wed, 25 Mar 2026 16:07:32 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Show us your Art

🔗 Live Demo: https://navin1-11-04.github.io/Climb/
💻 GitHub Repo: https://github.com/Navin1-11-04/Climb.git

Inspiration

“The Climb” is inspired by the idea that progress in technology isn’t sudden — it is layered, built, and carried forward.

We often talk about barriers like the glass ceiling, but I wanted to explore a different perspective:

What if the real story is about the staircase that was quietly built — step by step — by women whose contributions shaped modern computing?

Each step represents pioneers like Ada Lovelace, Grace Hopper, and Katherine Johnson — whose work forms the foundation of the systems we use today.

The central figure doesn’t wait for permission or break through walls.

She climbs — and the path builds itself beneath her.

Concept

A glowing figure ascends a staircase that builds itself in real time.

Each step carries the name of a woman in tech.

The environment transitions from darkness to light, symbolizing progress.

A spark in her hand represents creation and persistence.

A trail of light shows the impact left behind.

The staircase never ends — because the journey is still ongoing.

How it’s Built

Pure HTML5 Canvas
Vanilla JavaScript (no libraries)

Procedural animations including:

particles
aurora waves
nebula effects
shooting stars

Interactive hover tooltips for each pioneer

Fully responsive design

Why this matters

Women hold only about 26% of computing jobs
They are 3× more likely to leave tech by mid-career
The gender gap costs over $1 trillion globally

This piece is both a tribute and a reminder — progress exists, but it is not complete.

My Code

👉 https://github.com/Navin1-11-04/Climb.git

Final Thought

“The staircase is never finished.”

Because someone is always climbing —

and someone is always building the next step.

💡 Drop your craziest, simplest web app idea

Navin Kumar R — Thu, 18 Sep 2025 04:44:15 +0000

Hey folks 👋

I want to make a tiny, playful webapp — something super simple, funny, or surprising that people would instantly want to try and share.

Here’s the twist: instead of me coming up with the idea, I want to hear your wild suggestions.

👉 Drop your craziest, simplest web app idea in the comments.

👉 I’ll pick one (or more) and actually try to build it.

Think of it as a fun mini hackathon powered by your creativity. Let’s see how weird we can get 🚀

Old-School Office, Modern CSS: My Axero Challenge Submission

Navin Kumar R — Fri, 25 Jul 2025 06:35:35 +0000

Frontend Challenge CSS Art Submission

Navin Kumar R

Jul 25 '25

Interactive Retro Office Desk

#frontendchallenge #devchallenge #css

Comments 2

1 min read

Interactive Retro Office Desk

Navin Kumar R — Fri, 25 Jul 2025 06:26:17 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

For this challenge, I wanted to recreate the nostalgic charm of an old-school office setup with a modern twist — a cozy wooden desk, a classic black typewriter, a steaming coffee mug, and a memo fluttering on the wall. All brought to life using just HTML and CSS

The goal: show how far CSS art and animation can go in crafting immersive digital environments!

Demo

Live Demo on GitHub Pages

View Source on GitHub

Journey

This project was a fun exploration of CSS capabilities — from @keyframes and transforms to shadows and gradients. I limited myself to HTML and CSS only to stay true to the challenge theme and push the boundaries of what static frontend code can do.

Things I learned / experimented with:
Crafting realistic textures using CSS gradients

Building animated elements with just ::before, ::after, and keyframes

Layering and depth using shadows and z-index for a more immersive look

How minimal structure and styles can tell a story visually

What I’d add next:

A wall clock with ticking animation
A task list or calendar popup
Office lamp with flickering light

Thanks for checking it out — and huge thanks to Axero + DEV for this fun creative challenge!

Built with ❤️ by @navin_kumar_r