EcoAssist: Embedding Sustainability into AI-Assisted Frontend Development

Paper Title

EcoAssist: Embedding Sustainability into AI-Assisted Frontend Development

Publication Info

• Topic area: Energy-efficient AI-assisted frontend development
• Keywords: AI coding assistants, energy efficiency, frontend development, sustainability, IDE integration, web optimization, energy-aware tools, developer workflows, green software, sustainable computing

Background and Problem

• Problem / challenge: Current AI coding assistants prioritize speed and convenience over energy efficiency, leading to energy-intensive frontend code. Existing sustainability tools and guidelines are rarely integrated into everyday development workflows.
• Significance: The ICT sector contributes 2.1–3.9% of global greenhouse gas emissions, comparable to the aviation industry. Embedding energy awareness into coding workflows can reduce digital emissions and promote sustainable development practices.
• Motivation and related work: Prior work has developed sustainability guidelines (e.g., W3C Web Sustainability Guidelines), energy measurement tools (e.g., CO2.js), and optimization frameworks (e.g., GreenHub, PowerAPI). However, these tools are often external to development workflows and lack integration with AI-assisted coding environments. AI assistants like GitHub Copilot generate code without considering energy efficiency, leaving developers unaware of energy-intensive patterns.

Solution

• Proposed approach: EcoAssist, an energy-aware coding assistant integrated into an IDE, analyzes AI-generated frontend code, estimates its energy footprint, and suggests optimizations to reduce energy consumption.
• Novelty:
  1. Embedding energy analysis directly into AI-assisted coding workflows.
  2. Fine-tuning a language model (GPT-4o-mini) to recognize and optimize energy-intensive frontend code patterns.
  3. Providing actionable, inline feedback and energy-saving recommendations within the IDE.
• Procedure and key techniques:
  • Offline training pipeline: Collected energy profiling data from 500 websites, applied optimizations, and fine-tuned GPT-4o-mini on before-and-after code pairs.
  • Online runtime optimizer: Integrated into the IDE to analyze code, propose optimizations, and display energy savings in real-time.
  • User interaction: Developers can review and selectively apply optimizations using a side-by-side diff view, with energy savings reported in joules and percentages.

Results

• Concrete findings:
  • Reduced per-page energy consumption by 13.4% on average (95% CI [10.2, 16.6]) across 500 test webpages.
  • Optimizations led to 8–10% reductions in network transfer and 7% reductions in code size.
  • User study participants achieved an average energy savings of 15.9% per task, with functionality preserved in 75% of cases.
• Advantage over baselines:
  • EcoAssist outperformed existing AI coding assistants by embedding energy feedback directly into the coding process and providing actionable optimizations.
  • 93% of webpages showed reduced energy use, with 70% achieving savings above 10%.
• Experiments / evaluation:
  • System benchmark: Tested on 500 webpages (250 GPT-generated, 250 real-world) using Powermetrics and Playwright for energy profiling.
  • User study: Conducted with 20 developers, capturing usability (SUS = 87.5), workload (low NASA-TLX scores), and energy awareness (4.35/5 average score).
• Limitations and future work:
  • Limited to frontend pages; future work could extend to complex web applications and mobile frontends.
  • Energy measurements conducted in controlled settings; cross-platform validation needed.
  • Model may miss inefficiency patterns outside its training distribution; broader datasets and proactive energy-aware code generation could improve performance.
  • Long-term adoption and integration into real-world workflows require further study.

Summary

EcoAssist is an energy-aware coding assistant that integrates sustainability into AI-assisted frontend development workflows. By analyzing and optimizing AI-generated code, it reduces energy consumption by 13–16% on average while maintaining functionality and usability. Evaluations demonstrate high usability, low cognitive load, and increased developer awareness of energy efficiency. Future work includes expanding to more complex applications, validating cross-platform energy savings, and exploring proactive energy-aware code generation. EcoAssist represents a step toward embedding sustainability into everyday coding practices.