Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

EcoAssist: Embedding Sustainability into AI-Assisted Frontend Development

André Barrocas, Nuno Jardim Nunes, Valentina Nisi, Nikolas Martelaro

Abstract

Frontend code, replicated across millions of page views, consumes significant energy and contributes directly to digital emissions. Yet current AI coding assistants, such as GitHub Copilot and Amazon CodeWhisperer, emphasize developer speed and convenience, with energy impact not yet a primary focus. At the same time, existing energy-focused guidelines and metrics have seen limited adoption among practitioners, leaving a gap between research and everyday coding practice. To address this gap, we introduce EcoAssist, an energy-aware assistant integrated into an IDE that analyzes AI-generated frontend code, estimates its energy footprint, and proposes targeted optimizations. We evaluated EcoAssist through benchmarks of 500 websites and a controlled study with 20 developers. Results show that EcoAssist reduced per-website energy by 13-16% on average, increased developers' awareness of energy use, and maintained developer productivity. This work demonstrates how energy considerations can be embedded directly into AI-assisted coding workflows, supporting developers as they engage with energy implications through actionable feedback.

EcoAssist: Embedding Sustainability into AI-Assisted Frontend Development

Abstract

Frontend code, replicated across millions of page views, consumes significant energy and contributes directly to digital emissions. Yet current AI coding assistants, such as GitHub Copilot and Amazon CodeWhisperer, emphasize developer speed and convenience, with energy impact not yet a primary focus. At the same time, existing energy-focused guidelines and metrics have seen limited adoption among practitioners, leaving a gap between research and everyday coding practice. To address this gap, we introduce EcoAssist, an energy-aware assistant integrated into an IDE that analyzes AI-generated frontend code, estimates its energy footprint, and proposes targeted optimizations. We evaluated EcoAssist through benchmarks of 500 websites and a controlled study with 20 developers. Results show that EcoAssist reduced per-website energy by 13-16% on average, increased developers' awareness of energy use, and maintained developer productivity. This work demonstrates how energy considerations can be embedded directly into AI-assisted coding workflows, supporting developers as they engage with energy implications through actionable feedback.

Paper Structure

This paper contains 26 sections, 10 figures.

Table of Contents

  1. Introduction
  2. Related Work
  3. Evaluating Web Sustainability
  4. Energy-Aware User Behavior
  5. Energy Efficiency in Development Tools
  6. Energy Efficiency of LLM-Generated Code
  7. EcoAssist
  8. Design Goals
  9. Extending Sustainable Web Development into AI-Assisted Coding
  10. Integrating Energy Awareness into Developer Workflows
  11. System Overview
  12. Offline Training Pipeline
  13. Online Runtime Optimizer
  14. User Interaction
  15. Evaluation
  16. ...and 11 more sections

Figures (10)

  • Figure 1: Workflow shows offline training pipeline (left) generating fine-tuning dataset, which trains model (center) deployed in runtime optimizer (right)
  • Figure 2: EcoAssist’s inline optimization view, showing detected energy-intensive patterns (left) and optimized alternatives (right). Shown transformations include AVIF conversion, lazy-loading, simplified styles, and unused font/script removal, all applied through the accept/reject interface.
  • Figure 3: EcoAssist’s diff view highlighting optimizations such as CSS minification, SVG optimization, and removal of redundant logging and scripts, all presented through the accept/reject interface.
  • Figure 4: EcoAssist compares energy use before and after optimization and lets developers preview the optimized page directly in the workflow.
  • Figure 5: Energy savings with EcoAssist model on Kaggle vs. GPT webpages, shown in joules (left) and percentage (right).
  • ...and 5 more figures