feat: update configuration for OpenAI and Anthropic endpoints

- Created a new .env.example file with default environment variables for PORT, OPENAI_UPSTREAM_URL, ANTHROPIC_UPSTREAM_URL, and DATABASE_URL.
- Updated .npmignore to exclude all .env files except .env.example.
- Revised CONTRIBUTING.md to simplify the contribution process and provide clearer setup instructions.
- Enhanced cost.ts with detailed type definitions and improved cost calculation logic.
- Updated proxy.ts to include new environment variables and improved logging functionality.
- Modified README.md to reflect new configuration instructions and usage examples.
- Removed unnecessary dashboard files and streamlined the project structure.
This commit is contained in:
Praveen Thirumurugan
2025-12-23 12:37:40 +05:30
parent e5231cac8c
commit 18d4c93216
17 changed files with 1968 additions and 2653 deletions
-5
View File
@@ -1,5 +0,0 @@
# PostgreSQL connection string (same as proxy server)
DATABASE_URL=postgresql://user:password@localhost:5432/database
# Database table name (default: llm_proxy)
DATABASE_TABLE=llm_proxy
-195
View File
@@ -1,195 +0,0 @@
# OpenProxy Metrics Dashboard
A lightweight Next.js dashboard for visualizing OpenProxy LLM request metrics in real-time.
## Features
- **Real-time Metrics Overview**: Total requests, tokens, costs, and response times
- **Model Breakdown**: Usage statistics grouped by LLM model
- **Hourly Trends**: Visual charts showing request patterns over time
- **Recent Requests**: Detailed table of recent API calls
- **Auto-refresh**: Automatic updates every 30 seconds
- **Time Range Selection**: View metrics for the last hour, 6 hours, 24 hours, or 7 days
## Prerequisites
- Node.js 18 or higher
- PostgreSQL database (same as the proxy server)
- OpenProxy proxy server running
## Installation
1. Navigate to the dashboard directory:
```bash
cd dashboard
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file (copy from `.env.example`):
```bash
cp .env.example .env
```
4. Configure your `.env` file:
```env
DATABASE_URL=postgresql://user:password@localhost:5432/database
DATABASE_TABLE=llm_proxy
```
## Running the Dashboard
### Development Mode
```bash
npm run dev
```
The dashboard will be available at `http://localhost:3008`
### Production Mode
1. Build the application:
```bash
npm run build
```
2. Start the production server:
```bash
npm start
```
## Dashboard Sections
### 1. Overview Cards
Displays key metrics at a glance:
- Total requests processed
- Total tokens consumed
- Total cost incurred
- Average response time
- Number of unique models used
- Number of unique client IPs
### 2. Hourly Trends
Two charts showing:
- Requests count and average response time over time
- Token usage and costs over time
### 3. Model Breakdown
Table showing per-model statistics:
- Request count
- Total tokens used
- Total cost
- Average response time
### 4. Recent Requests
Detailed table of recent API calls showing:
- Timestamp
- Model used
- Token breakdown (prompt + completion = total)
- Cost
- Response time
- HTTP status code
- Client IP address
- Whether the request was streamed
## Configuration
### Port
The dashboard runs on port 3008 by default. To change this, modify the `dev` and `start` scripts in `package.json`:
```json
"dev": "next dev -p YOUR_PORT",
"start": "next start -p YOUR_PORT"
```
### Database Connection
Ensure the `DATABASE_URL` in your `.env` file matches the PostgreSQL connection string used by the proxy server.
### Time Ranges
Available time ranges:
- Last Hour (1 hour)
- Last 6 Hours
- Last 24 Hours (default)
- Last 7 Days (168 hours)
## Troubleshooting
### "Failed to fetch metrics" Error
- Verify that the `DATABASE_URL` in `.env` is correct
- Ensure PostgreSQL is running and accessible
- Check that the `llm_proxy` table exists in your database
- Verify network connectivity to the database
### Empty Dashboard
- Ensure the proxy server is running and processing requests
- Verify that requests are being logged to the database
- Check that the `DATABASE_TABLE` name matches your configuration
### Port Conflicts
If port 3008 is already in use, change the port in `package.json` scripts.
## Technology Stack
- **Framework**: Next.js 14 (React 18)
- **Charts**: Recharts
- **Database**: PostgreSQL (via `pg` driver)
- **Language**: TypeScript
- **Styling**: Inline CSS (no external dependencies)
## Architecture
```
dashboard/
├── app/
│ ├── api/
│ │ └── metrics/
│ │ └── route.ts # API endpoint for fetching metrics
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main dashboard page
├── components/
│ ├── MetricsOverview.tsx # Overview cards component
│ ├── ModelBreakdown.tsx # Model statistics table
│ ├── RecentRequests.tsx # Recent requests table
│ └── TrendsChart.tsx # Hourly trends charts
├── package.json
├── tsconfig.json
├── next.config.js
└── README.md
```
## API Endpoints
### GET `/api/metrics`
Query parameters:
- `hours` (optional): Number of hours to look back (default: 24)
- `limit` (optional): Maximum number of recent requests to return (default: 100)
Response:
```json
{
"success": true,
"data": {
"summary": {
"totalRequests": 1234,
"totalTokens": 567890,
"totalCost": 12.34,
"avgResponseTime": 450.5,
"uniqueModels": 3,
"uniqueClients": 15
},
"recentRequests": [...],
"modelBreakdown": [...],
"hourlyTrends": [...]
},
"timeRange": "24 hours"
}
```
## License
Same as OpenProxy parent project.
+5 -9
View File
@@ -5,11 +5,7 @@ const pool = new Pool({
connectionString: process.env.DATABASE_URL,
});
const TABLE_NAME = process.env.DATABASE_TABLE || 'llm_proxy';
// Validate table name against whitelist to prevent SQL injection
const ALLOWED_TABLES = ['llm_proxy', 'llm_proxy_dev', 'llm_proxy_test'];
const validatedTableName = ALLOWED_TABLES.includes(TABLE_NAME) ? TABLE_NAME : 'llm_proxy';
const TABLE_NAME = 'llm_proxy';
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
@@ -35,7 +31,7 @@ export async function GET(request: NextRequest) {
AVG(response_time) as avg_response_time,
COUNT(DISTINCT model) as unique_models,
COUNT(DISTINCT client_ip) as unique_clients
FROM ${validatedTableName}
FROM ${TABLE_NAME}
WHERE timestamp >= NOW() - INTERVAL '1 hour' * $1
`;
const summaryResult = await client.query(summaryQuery, [hours]);
@@ -55,7 +51,7 @@ export async function GET(request: NextRequest) {
response_status,
client_ip,
stream
FROM ${validatedTableName}
FROM ${TABLE_NAME}
WHERE timestamp >= NOW() - INTERVAL '1 hour' * $1
ORDER BY timestamp DESC
LIMIT $2
@@ -71,7 +67,7 @@ export async function GET(request: NextRequest) {
SUM(total_tokens) as total_tokens,
SUM(total_cost) as total_cost,
AVG(response_time) as avg_response_time
FROM ${validatedTableName}
FROM ${TABLE_NAME}
WHERE timestamp >= NOW() - INTERVAL '1 hour' * $1
GROUP BY model
ORDER BY request_count DESC
@@ -87,7 +83,7 @@ export async function GET(request: NextRequest) {
SUM(total_tokens) as tokens,
SUM(total_cost) as cost,
AVG(response_time) as avg_response_time
FROM ${validatedTableName}
FROM ${TABLE_NAME}
WHERE timestamp >= NOW() - INTERVAL '1 hour' * $1
GROUP BY hour
ORDER BY hour ASC
+4
View File
@@ -1,3 +1,7 @@
const path = require('path');
require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
-1033
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -10,6 +10,7 @@
"lint": "next lint"
},
"dependencies": {
"dotenv": "^17.2.3",
"next": "^14.2.35",
"react": "^18.3.0",
"react-dom": "^18.3.0",