See where your cloud money goes. Get AI-powered recommendations to save.
A dark-themed, professional cloud cost intelligence dashboard covering AWS, GCP, and Azure. Visualize spending trends, drill into individual services, chat with an AI cost advisor, and get actionable savings recommendations sorted by impact.
- Hero metric cards with animated counting-up numbers:
- Total Monthly Spend ($47,523)
- Month-over-Month Change (+8.3%)
- Projected Annual Cost
- Potential Savings Identified
- Cost breakdown donut chart by service (EC2, S3, Lambda, RDS, etc.)
- 12-month cost trend line chart with multi-provider overlay
- Provider comparison bar chart (AWS vs. GCP vs. Azure)
- Top 5 cost drivers table with inline sparkline charts
- Chat interface powered by Google Gemini 2.5 Flash
- Pre-loaded with full context of the cloud environment (spend by service, idle resources, trends)
- Ask questions like:
- "Why did my AWS bill spike last month?"
- "How can I reduce S3 costs?"
- "Compare my EC2 vs. Lambda spending"
- AI responds with specific, actionable recommendations and estimated savings
- Suggested questions for quick start
| Service | What You See |
|---|---|
| EC2 | Instance inventory, CPU/memory utilization bars, idle instance detection, right-sizing recommendations |
| S3 | Bucket overview, storage class distribution, total size, lifecycle policy suggestions |
| Lambda | Function performance metrics, invocation counts, avg duration, memory optimization flags |
| RDS | Database inventory, engine types, Multi-AZ status, idle detection |
- AI-generated recommendations sorted by potential monthly savings (highest first)
- Each recommendation includes:
- Title and detailed description
- Estimated monthly savings amount
- Effort level badge: Easy / Medium / Hard
- "Implement" button with confirmation modal
- Dynamic total potential savings counter at the top
- Dark sidebar with expandable Services section
- Total savings summary in the sidebar
- Top navigation bar with search and notifications
+-------------------------------------------------------------------+
| CloudPilot UI |
| |
| +----------+ +-----------------------------------------------+ |
| | | | | |
| | Sidebar | | Dashboard / Chat / Services / Recs | |
| | (Nav) | | | |
| | | | +----------+ +-----------+ +----------+ | |
| | - Dash | | | Metric | | Donut | | Trend | | |
| | - EC2 | | | Cards | | Chart | | Chart | | |
| | - S3 | | +----------+ +-----------+ +----------+ | |
| | - Lambda | | +----------+ +-----------+ | |
| | - RDS | | | Provider | | Top Cost | | |
| | - Chat | | | Bar Chart| | Drivers | | |
| | - Recs | | +----------+ +-----------+ | |
| +----------+ +-----------------------------------------------+ |
+-------------------------------------------------------------------+
| |
v v
/api/costs /api/chat
(Mock Data) (Gemini AI)
The dashboard uses realistic mock data since real cloud credentials aren't available for demo:
Total Monthly Spend: $47,523.40
AWS: $32,150.20 (EC2 $15,230 | RDS $5,800 | S3 $4,520 | Lambda $3,200)
GCP: $10,230.50 (Compute $5,100 | Storage $2,300 | BigQuery $1,830)
Azure: $5,142.70 (VMs $2,500 | Blob $1,200 | Functions $943)
Key Issues Detected:
- 3 EC2 instances under 15% CPU utilization
- Lambda memory over-provisioned on 3 functions
- RDS dev/staging running 24/7 unnecessarily
- 22 unattached EBS volumes ($880/month waste)
Potential Savings: ~$12,450/month
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Server Components) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 (dark theme, AWS Console aesthetic) |
| LLM | Google Gemini 2.5 Flash (AI cost advisor) |
| Charts | Recharts (line, bar, pie, sparkline) |
| Animations | Framer Motion (counting-up numbers, transitions) |
| Icons | Lucide React |
| Data | Realistic mock data (no cloud credentials needed) |
- Node.js 18 or later
- A Google Gemini API key (free tier works -- only needed for the AI chat feature)
git clone https://github.com/Samarth0211/CloudPilot.git
cd CloudPilot
npm installCreate a .env.local file in the project root:
GOOGLE_API_KEY=your_gemini_api_key_hereThe API key is only required for the AI Cost Advisor chat. The dashboard and all charts work without it.
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm startCloudPilot/
src/
app/
page.tsx # Cost overview dashboard
layout.tsx # Root layout (sidebar + top nav)
chat/page.tsx # AI cost advisor chat
recommendations/page.tsx # Savings recommendations
services/[service]/page.tsx # Service deep-dive (EC2, S3, Lambda, RDS)
api/
chat/route.ts # Gemini AI chat endpoint
costs/route.ts # Mock cost data API
components/
Sidebar.tsx # Dark sidebar navigation
TopNav.tsx # Top navigation bar
MetricCard.tsx # Animated metric card
AnimatedCounter.tsx # Count-up number animation
TopCostDrivers.tsx # Cost drivers table with sparklines
charts/
CostTrendChart.tsx # 12-month line chart
ServiceBreakdownChart.tsx # Donut chart
ProviderBarChart.tsx # Provider comparison bar chart
SparkLine.tsx # Inline sparkline for tables
lib/
mock-data.ts # Comprehensive mock cloud cost data
utils.ts # Utility functions (cn, formatCurrency)
.env.local # Environment variables (not committed)
package.json
| Endpoint | Method | Description |
|---|---|---|
/api/costs |
GET | Returns comprehensive mock cloud cost data |
/api/chat |
POST | AI cost advisor -- sends chat messages to Gemini with cloud context |
Deployed on Vercel. To deploy your own instance:
- Fork this repo
- Import it into Vercel
- Add
GOOGLE_API_KEYas an environment variable in Vercel project settings - Deploy
Samarth Bhamare -- AI/ML Engineer
MIT