7.7 KiB
7.7 KiB
📊 OpenAI Costs API Integration - Implementation Summary
Hvad blev implementeret
Jeg har integreret OpenAI's Costs API endpoint i Tilbudgivern for at tracke AI-omkostninger direkte fra OpenAI og vise dem i "🤖 AI Budget" fanen.
Komponenter
1. Backend Service (/backend/src/services/openaiService.js)
Nye metoder:
// Hent omkostningsdata fra OpenAI API
fetchOpenAICosts(daysBack = 30)
// Hent detaljeret omkostningsfordeling med gruppering
getDetailedCostBreakdown(options = {})
Features:
- Caching af data (5 min cache)
- Fallback til database hvis API fails
- Support for gruppering efter line_item og project_id
- Pagination support
2. Backend Routes (/backend/src/routes/quotes.js)
Tre nye API endpoints:
| Endpoint | Metode | Formål |
|---|---|---|
/api/quotes/openai/costs |
GET | Hent total omkostninger sidste N dage |
/api/quotes/openai/costs/breakdown |
GET | Detaljeret fordeling med gruppering |
/api/quotes/openai/budget/status |
GET | Budgetstatus + advarsler |
3. Frontend Updates (/frontend/src/App.js)
Nye states:
const [openaiCosts, setOpenaiCosts] = useState(null);
const [budgetStatus, setBudgetStatus] = useState(null);
Opdateret loadOpenaiUsage() - Kalder nu alle tre endpoints parallel
UI Components:
- Budget Status Card (med farvet progress bar)
- Budget Details (månedligt budget, brugt, tilbage, daglig rate)
- Token Limit Status (tokens brugt vs limit)
- Cost Breakdown (fordelt på line items og projekter)
4. Styling (/frontend/src/App.css)
Nye CSS klasser:
.budget-status- Budget status card med color warnings.budget-progress-bar- Progress bar med dynamic farver.budget-details- Budget oversigt.token-limit-details- Token limit oversigt.costs-breakdown- Cost fordeling
Color Scheme:
- 🟢 Green (#28a745) - OK (0-60%)
- 🟡 Yellow (#ffc107) - Notice (60-80%)
- 🟠 Orange (#ff9800) - Warning (80-95%)
- 🔴 Red (#dc3545) - Critical (95%+)
5. Configuration
.env fil update:
OPENAI_API_KEY=sk-proj-... # Existing
OPENAI_ADMIN_KEY=sk-org-... # NEW - for Costs API
User Flow
- Autentificering → User logger in
- AI Budget Tab → Bruger klikker på "🤖 AI Budget"
- Data Load → System kalder alle tre endpoints parallel
- Visning:
- Token stats fra database (altid tilgængelig)
- Budget status fra OpenAI API (hvis OPENAI_ADMIN_KEY sat)
- Cost breakdown fra OpenAI API (hvis OPENAI_ADMIN_KEY sat)
- Advarsler → Hvis budget > 80%, vises warning
Data Flow
┌─────────────────────────────────────────────┐
│ Frontend (App.js) │
│ - Click "🤖 AI Budget" │
│ - Call loadOpenaiUsage() │
└────────────────┬────────────────────────────┘
│
┌────────────┼────────────┐
│ │ │
▼ ▼ ▼
┌────────┐ ┌─────────┐ ┌──────────┐
│/stats │ │/costs │ │/budget │
│(DB) │ │(OpenAI) │ │/status │
│ │ │ │ │(OpenAI) │
└────────┘ └─────────┘ └──────────┘
│ │ │
└────────────┼────────────┘
│
┌────────────▼────────────┐
│ React State │
│ - openaiUsage │
│ - openaiCosts │
│ - budgetStatus │
└────────────┬────────────┘
│
▼
┌─────────────────────────┐
│ Render UI Components: │
│ - Stats Cards │
│ - Budget Status │
│ - Progress Bars │
│ - Cost Breakdown │
└─────────────────────────┘
OpenAI API Integration
Query til OpenAI Costs API:
GET https://api.openai.com/v1/organization/costs?start_time=1730419200&limit=1 \
-H "Authorization: Bearer $OPENAI_ADMIN_KEY" \
-H "Content-Type: application/json"
Response struktur:
{
"object": "page",
"data": [
{
"object": "bucket",
"start_time": 1730419200,
"end_time": 1730505600,
"results": [
{
"object": "organization.costs.result",
"amount": { "value": 0.06, "currency": "usd" },
"line_item": "Language models",
"project_id": "proj_abc"
}
]
}
],
"has_more": false,
"next_page": null
}
Files Modified
| File | Ændringer |
|---|---|
/backend/src/services/openaiService.js |
+2 nye metoder, +fetchOpenAICosts(), +getDetailedCostBreakdown() |
/backend/src/routes/quotes.js |
+3 nye endpoints for costs, budget status |
/frontend/src/App.js |
+2 states, updated loadOpenaiUsage(), +UI components |
/frontend/src/App.css |
+Budget styling, progress bars, color warnings |
/backend/.env |
+OPENAI_ADMIN_KEY config |
/docs/OPENAI_COSTS_API.md |
NEW - Full documentation |
/test_openai_costs_api.sh |
NEW - Test script |
Setup Checklist
- Backend service implementeret
- API endpoints tilføjet
- Frontend states tilføjet
- UI komponenter implementeret
- CSS styling tilføjet
- .env configuration
- Error handling
- Documentation
- OPENAI_ADMIN_KEY konfigurering (kræves fra bruger)
- Backend restart
Next Steps
For at få det fuldt ud til at virke:
-
Få OPENAI_ADMIN_KEY:
- Gå til https://platform.openai.com/account/org-settings/api-keys
- Opret ny "secret key"
- Sørg for "Admin" eller "Organization Owner" rolle
-
Sæt i .env:
OPENAI_ADMIN_KEY=sk-org-xxxxx -
Restart backend:
npm start -
Test:
./test_openai_costs_api.sh -
Se resultat:
- Åbn AI Budget tab
- Hvis alt virker, vises budget status + cost breakdown
- Hvis OPENAI_ADMIN_KEY ikke er sat, vises kun database stats
Fejlhåndtering
Hvis OpenAI API fails:
- Frontend fallback til database stats
- Bruger ser "OpenAI Costs API utilgængelig"
- System logger fejlen til server logs
Hvis OPENAI_ADMIN_KEY mangler:
- Endpoints returnerer
success: false - Frontend viser kun token stats fra database
- Ingen omkostningsdata fra OpenAI vises
Performance
- Caching: 5 minutter (for at spare API calls)
- Parallel requests: Alle tre endpoints kaldes samtidigt
- Timeout: 10 sekunder pr request
- Database: Bruges som fallback + primary source for token stats
Security
- OPENAI_ADMIN_KEY er aldrig exposed til frontend
- Kun server-side API calls
- Key er i .env (ikke i kode)
- API requests autentificeres via Authorization header
Test Resultat
Du kan nu:
✅ Se OpenAI costs direkte fra OpenAI's API ✅ Monitore budget forbrug i real-time ✅ Se advarsler når budget > 80% ✅ Analysere costs fordelt på line items og projekter ✅ Estimere dage til budget opbrugt
Med denne integration kan du nu datadrevet administrere ditt OpenAI budget og tage bedre beslutninger om model valg og API usage!