20d93142d6
Changes: - Add right padding (80px) to content area to prevent ProviderNav from overlapping buttons - Mobile responsive: reset right padding to 0 (navigation displays at bottom) Modified files: - src/pages/AiProvidersPage.module.scss (modified) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
CLI Proxy API Management Center (CPAMC)
A Web management interface based on the official repository with custom modifications
About This Project
This project is a log monitoring and data visualization management interface developed based on the official CLI Proxy API WebUI
Differences from Official Version
This version is consistent with the official version in other functions, with the main difference being the new monitoring center, which enhances log analysis and viewing
Interface Preview
Management interface display
Quick Start
Using This Management Interface
Modify following configuration in your config.yaml:
remote-management:
panel-github-repository: "https://github.com/kongkongyo/CLIProxyAPI-Web-Dashboard"
After configuration, restart the CLI Proxy API service and visit http://<host>:<api_port>/management.html to view the management interface
For detailed configuration instructions, please refer to the official documentation: https://help.router-for.me/cn/management/webui.html
Main Features
Monitoring Center - Core New Feature
This is the only new feature of this management interface compared to the official version, providing comprehensive data visualization and monitoring capabilities
Note: The CLI Proxy API main program currently does not have data persistence functionality. Statistical data will be lost after restarting the program. You need to use related services through the API first to generate data before you can see statistical information in the monitoring center.
KPI Dashboard
Real-time display of core operational metrics, supports filtering by time range:
- Request Count: Total requests, success/failure statistics, success rate percentage
- Token Count: Total tokens, input tokens, output tokens
- Average TPM: Tokens per minute
- Average RPM: Requests per minute
- Average RPD: Daily average requests
All metrics are dynamically calculated and updated in real-time based on the selected time range (today/7 days/14 days/30 days)
Model Usage Distribution
Intuitive pie chart showing the usage distribution of different models:
- Distribution by request count
- Distribution by token count
- Switchable between request percentage and token percentage
Daily Trend Analysis
Detailed time series charts showing daily usage trends:
- Request count trend curve
- Input token trend
- Output token trend
- Thinking token trend (if supported)
- Cache token trend
Hourly Analysis
Two detailed hourly charts to help identify peak periods:
Hourly Model Request Distribution
- Bar chart showing requests for different models in each hour
- Supports switching between recent 6 hours/12 hours/24 hours/all views
Hourly Token Usage
- Stacked bar chart showing token usage composition
- Distinguishes between input tokens, output tokens, thinking tokens, cache tokens
Channel Statistics
Detailed table showing usage of each channel (API Key/model):
- Filter by all channels/specific channel
- Filter by all models/specific model
- Filter by all status/success only/failure only
- Display channel name, request count, success rate
- Click to expand and view detailed statistics of each model under that channel
- Display recent request status (mini status bar of recent 10 requests)
- Most recent request time
Failure Source Analysis
Help locate problematic channels and models:
- Statistics of failure counts by channel
- Display most recent failure time
- List of main failed models
- Click to expand and view all failed request details under that channel
Request Logs - Advanced Feature
Powerful request log table, supports smooth browsing of massive data
Multi-dimensional Filtering
- Filter by API Key
- Filter by provider type (OpenAI/Gemini/Claude, etc.)
- Filter by model name
- Filter by source channel
- Filter by request status (all/success/failure)
Independent Time Range
- Supports today/7 days/14 days/30 days/custom date range
- Independent control from main page time range
Virtual Scrolling
- Supports smooth browsing of 100,000+ logs
- Display current visible range statistics
- Performance optimized, only renders visible rows
Smart Information Display
- Automatically match API Key to provider name (based on configuration)
- Complete channel information (provider name + masked key)
- Request type/model name/request status
- Status visualization of recent 10 requests (green dot=success, red dot=failure)
- Success rate percentage
- Total requests/input tokens/output tokens/total tokens
- Request time (complete timestamp)
Auto Refresh
- Supports manual refresh / 5s / 10s / 15s / 30s / 60s auto refresh
- Countdown display for next refresh time
- Independent data loading, does not block main page
One-click Disable Model
- Supports directly disabling a specific model of a channel in logs
- Only effective for channel types that support this operation
- Shows prompt and manual operation guide when not supported
Official Version Features
The following features are consistent with the official version, providing a better user experience through an improved interface
Dashboard
- Real-time connection status monitoring
- Server version and build information at a glance
- Quick overview of usage data
- Available model statistics
API Key Management
- Add, edit, delete API keys
- Manage proxy service authentication
AI Provider Configuration
- Gemini: API key management, model exclusion, model prefix
- Claude: API key and configuration, custom model list
- Codex: Complete configuration management (API key, Base URL, proxy)
- Vertex: Model mapping configuration
- OpenAI Compatible: Multi-key management, model alias import, connectivity testing
- Ampcode: Upstream integration and model mapping
Authentication File Management
- Upload, download, delete JSON authentication files
- Supports multiple providers (Qwen, Gemini, Claude, etc.)
- Search, filter, paginated browsing
- View models supported by each credential
OAuth Login
- One-click start OAuth authorization flow
- Supports Codex, Anthropic, Gemini CLI, Qwen, iFlow, etc.
- Automatically save authentication files
- Supports remote browser callback submission
Quota Management
- Antigravity quota query
- Codex quota query (5 hours, weekly limit, code review)
- Gemini CLI quota query
- One-click refresh all quotas
Usage Statistics
- Request/Token trend charts
- Detailed statistics by model and API
- RPM/TPM real-time rates
- Cache and reasoning token breakdown
- Cost estimation (supports custom prices)
Configuration Management
- Online editing of
config.yaml - YAML syntax highlighting
- Search and navigation
- Save and reload configuration
Log Viewing
- Real-time log stream
- Search and filtering
- Auto refresh
- Download error logs
- Mask management traffic
Center Information
- Connection status check
- Version update check
- Available model list display
- Quick link entry
Connection Instructions
API Address Format
The following formats are all supported, and the system will automatically recognize them
localhost:8317
http://192.168.1.10:8317
https://example.com:8317
Management Key
The management key is the key for verifying management operations and is different from the API key used by clients
Remote Management
When accessing from a non-local browser, you need to enable remote management on the server (allow-remote-management: true)
Interface Features
Theme Switching
- Light mode
- Dark mode
- Follow system
Language Support
- Simplified Chinese
- English
Responsive Design
- Full functionality on desktop
- Mobile-adapted experience
- Collapsible sidebar
FAQ
Q: How to use this custom UI?
A: Add the following configuration to your CLI Proxy API configuration file
remote-management:
panel-github-repository: "https://github.com/kongkongyo/CLIProxyAPI-Web-Dashboard"
Q: Cannot connect to the server?
A: Please check the following
- Is the API address correct?
- Is the management key correct?
- Is the server started?
- Is remote access enabled?
Q: Log page not displaying?
A: You need to enable the "Log to file" function in "Basic Settings"
Q: Some functions show "not supported"?
A: The server version may be too old. Upgrade to the latest version of CLI Proxy API
Q: OpenAI provider test failed?
A: Tests are executed in the browser and may be subject to CORS restrictions. Failure does not necessarily mean it won't work on the server side
Q: What is the difference between this version and the official version?
A: There are two main differences:
- Interface Style: Completely new visual design with more refined UI details
- Monitoring Center: This is the only newly added feature module, providing powerful data visualization and monitoring capabilities, including KPI dashboard, model usage distribution, trend analysis, hourly charts, channel statistics, failure analysis, and advanced request logs
All other features remain consistent with the official version
Related Links
- Official Main Program: https://github.com/router-for-me/CLIProxyAPI
- Official WebUI: https://github.com/router-for-me/Cli-Proxy-API-Management-Center
- This Repository: https://github.com/kongkongyo/CLIProxyAPI-Web-Dashboard
License
MIT License