LandingPage

EcoApi — Cleaner Code, Lower Costs

Inspiration

One day at a hackathon, we had an AI sponsor give us tokens, and some person asked, "I got my API key revoked." The answer was "You have 200 concurrent requests, that's why we revoked it."

Additionally, while finding a spot to work on this very project, we ran into a traveling environmental exhibit and there, a professor in environmental science told us that there were talks about a data center being built in Champaign and about local concerns that it will drive electricity bills up.

Vibecoded apps are ruining your keys and the environment — save both using EcoApi to cut on costs and cut on emissions.

What It Does

EcoApi is a developer tool that makes the hidden costs of API calls visible and frames the solution in a sustainable way.

This tool comes in a three-part system:

Cloud API

A REST API built on Cloudflare Workers that ingests parsed API call data from your codebase and returns:

Cost analytics — Monthly spend risk, per-provider and per-file breakdowns
Endpoint-level diagnostics — Cacheable endpoints, rate-limit hotspots, N+1 patterns
Optimization suggestions — Actionable fixes with estimated savings
Graph data — Dependency visualization for API call flows
Sustainability stats — Electricity (kWh), water (L), and CO₂ (g) footprint estimated from call volume, with AI vs non-AI breakdown

Interactive Dashboard

A React SPA deployed on Cloudflare Pages that visualizes:

Project overview and scan summaries
Endpoint analysis with filtering by provider, status, and method
D3.js network graph (cluster by provider, file, or cost)
Optimization suggestions with severity and estimated savings
Cost and sustainability charts via Recharts

VSCode IDE Extension

A VSCode extension that runs EcoApi analysis directly inside your editor — no remote API required:

Scans your workspace for API call patterns (TypeScript, JavaScript, Python, Go, Java, Ruby)
Shows results in a persistent sidebar panel
Detects cost, N+1 patterns, missing caching, and unbatched calls
AI chat (OpenAI) to explain issues and suggest fixes
"Open Dashboard" button launches the full dashboard in the browser, backed by local scan data

How We Built It

API: Cloudflare Workers + Hono for the REST layer, Cloudflare D1 (SQLite) for persistence, Cloudflare KV for rate limiting, and Cloudflare AI (Llama 3.1 8B) for the chat endpoint.
Dashboard: React 18, React Router v7, Vite, TanStack Query v5, Tailwind CSS v4, D3.js for graphs, and Radix UI for accessible components.
Extension: TypeScript extension backend, React webview UI (Vite + esbuild), and an embedded HTTP server that serves the dashboard and a local API so the extension works without a remote backend.

The analysis engine is a pure, synchronous service that processes API call arrays, detects providers via URL/keyword heuristics, applies pricing and sustainability constants, and generates suggestions for caching, batching, and N+1 fixes.

Challenges We Ran Into

Compatibility issues with different OS's. Fine tuning the parser and the detector to catch every single endpoint and vulnerability hidden in the code.