Skip to content

CuzTeam/CPAPro

Repository files navigation

CPAPro

CPAPro, a modern CLIProxyAPI panel.

Live Demo · 中文文档 · CLIProxyAPI · Releases

Release License React TypeScript Vite


CPAPro is a single-file Web UI (React + TypeScript) for operating and troubleshooting CLI Proxy API through its Management API: configuration, credentials, quotas, logs, and system diagnostics.

Live Demo: https://cpap-ui.cuz-lab.tech/management.html
Main Project: https://github.com/router-for-me/CLIProxyAPI
Minimum Required Version: ≥ 7.1.0 (recommended latest)

Since version 6.0.19, the Web UI ships with the main program; access it via /management.html on the API port once the service is running.

What this is (and isn’t)

  • This repository is the Web UI only. It talks to the CLI Proxy API Management API (/v0/management) to read/update config, upload credentials, and view logs.
  • It is not a proxy and does not forward traffic.

Quick start

Option A: Use the Web UI bundled in CLI Proxy API (recommended)

  1. Start your CLI Proxy API service.
  2. Open: http://<host>:<api_port>/management.html
  3. Enter your management key and connect.

The address is auto-detected from the current page URL; manual override is supported.

Option B: Run the dev server

bun install --frozen-lockfile
bun run dev

Open http://localhost:5173, then connect to your CLI Proxy API backend instance.

Option C: Build a single HTML file

bun install --frozen-lockfile
bun run build
  • Output: dist/management.html (all assets are inlined).
  • The release workflow publishes management.html.
  • To preview locally: bun run preview

Tip: opening dist/management.html via file:// may be blocked by browser CORS; serving it (preview/static server) is more reliable.

Connecting to the server

API address

You can enter any of the following; the UI will normalize it:

  • localhost:8317
  • http://192.168.1.10:8317
  • https://example.com:8317
  • http://example.com:8317/v0/management (also accepted; the suffix is removed internally)

Management key (not the same as API keys)

The management key is sent with every request as:

  • Authorization: Bearer <MANAGEMENT_KEY> (default)

This is different from the proxy api-keys you manage inside the UI (those are for client requests to the proxy endpoints).

Remote management

If you connect from a non-localhost browser, the server must allow remote management (e.g. allow-remote-management: true).
Check the CLI Proxy API server documentation/config comments for the full authentication rules, server-side limits, and edge cases.

What you can manage (mapped to the UI pages)

  • Dashboard: connection status, server version/build date, quick counts, model availability snapshot.
  • Config Panel: visual editor for common config.yaml fields, basic settings, proxy api-keys, and source editing with YAML highlighting/search plus a save diff preview.
  • AI Providers:
    • Gemini/Codex/Claude/Vertex key entries (base URL, headers, proxy, model aliases, excluded models, prefix).
    • OpenAI-compatible providers (multiple API keys, custom headers, model alias import via /v1/models, optional browser-side "chat/completions" test).
    • Ampcode integration (upstream URL/key, force mappings, model mapping table).
  • Auth Files: upload/download/delete JSON credentials, filter/search/pagination, runtime-only indicators, view supported models per credential (when the server supports it), manage OAuth excluded models (supports * wildcards), configure OAuth model alias mappings.
  • OAuth: start OAuth/device flows for Codex, Anthropic/Claude, Antigravity, Gemini CLI, Kimi, and xAI/Grok; poll status; submit callback URLs or xAI/Grok displayed codes; import Vertex JSON credentials and iFlow cookies.
  • Quota Management: manage quota limits and usage for Claude, Antigravity, Codex, Gemini CLI, and other providers.
  • Logs: tail logs with incremental polling, auto-refresh, search, hide management traffic, clear logs; download request error log files.
  • System: quick links, update check, request logging toggle, local login data cleanup, and fetch /v1/models (grouped view). Requires at least one proxy API key to query models.

Tech Stack

  • React 19 + TypeScript 6.0
  • Vite 8 (single-file build)
  • Zustand (state management)
  • Axios (HTTP client)
  • react-router-dom v7 (HashRouter)
  • Motion (animations)
  • CodeMirror 6 (YAML editor)
  • SCSS Modules (styling)
  • i18next (internationalization)

Internationalization

Currently supports four languages:

  • English (en)
  • Simplified Chinese (zh-CN)
  • Traditional Chinese (zh-TW)
  • Russian (ru)

The UI language is automatically detected from browser settings and can be manually switched from the login page or header language menu.

Browser Compatibility

  • Build target: ES2020
  • Supports modern browsers (Chrome, Firefox, Safari, Edge)
  • Responsive layout for mobile and tablet access

Build & release notes

  • Vite produces a single HTML output (dist/management.html) with all assets inlined (via vite-plugin-singlefile).
  • Tagging vX.Y.Z triggers .github/workflows/release.yml to publish dist/management.html.
  • The UI version shown on the System page is injected at build time (env VERSION, git tag, or package.json fallback).

Security notes

  • The management key is stored in browser localStorage using a lightweight obfuscation format (enc::v1::...) to avoid plaintext storage; treat it as sensitive.
  • Use a dedicated browser profile/device for management. Be cautious when enabling remote management and evaluate its exposure surface.

Troubleshooting

  • Can’t connect / 401: confirm the API address and management key; remote access may require enabling remote management in the server config.
  • Repeated auth failures: the server may temporarily block remote IPs.
  • Logs page missing: enable “Logging to file” in Basic Settings; the navigation item is shown only when file logging is enabled.
  • Some features show “unsupported”: the backend may be too old or the endpoint is disabled/absent (common for model lists per auth file, excluded models, logs).
  • OpenAI provider test fails: the test runs in the browser and depends on network/CORS of the provider endpoint; a failure here does not always mean the server cannot reach it.

Development

bun run dev        # Vite dev server
bun run build      # tsc + Vite build
bun run preview    # serve dist locally
bun run lint       # ESLint (fails on warnings)
bun run format     # Prettier
bun run type-check # tsc --noEmit

Contributing

Issues and PRs are welcome. Please include:

  • Reproduction steps (server version + UI version)
  • Screenshots for UI changes
  • Verification notes (bun run lint, bun run type-check, bun run build)

Thanks

License

AGPL-3.0

About

CPAPro, a modern CLIProxyAPI panel.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages