GitHub - itsmylife44/cliproxyapi-dashboard: Web management dashboard for CLIProxyAPI — config sync, OAuth providers, monitoring, and more · GitHub
Skip to content

About

Web management dashboard for CLIProxyAPI — config sync, OAuth providers, monitoring, and more

Topics

Resources

Contributing

Security policy

Stars

283 stars

Watchers

0 watching

Forks

Latest commit

 

History

684 Commits

Folders and files

Repository files navigation

CLIProxyAPI Dashboard

CLIProxyAPI Dashboard

Use Claude Code, Gemini CLI, and Codex as OpenAI-compatible APIs — managed through a modern web dashboard.

Release Build Docker License: MIT Discord Next.js 16 React 19 TypeScript

English | 简体中文


Discord

We have a Discord server — installation help, release announcements, and community chat.
discord.gg/7SrXxNueGA


What is this?

CLIProxyAPI wraps OAuth-based CLI tools (Claude Code, Codex, Antigravity, Kimi, xAI, Devin and more; Gemini CLI, GitHub Copilot, Kiro and Cursor through CLIProxyAPI plugins) into OpenAI-compatible APIs. This dashboard gives you a web UI to manage everything — providers, API keys, configs, logs, and updates — without touching YAML files.

Quick Start

Local use (macOS/Windows/Linux): Only Docker Desktop required.

git clone https://github.com/itsmylife44/cliproxyapi-dashboard.git
cd cliproxyapi-dashboard
./setup-local.sh          # macOS/Linux
# .\setup-local.ps1       # Windows

The local setup scripts start Docker Compose with a local dashboard build (--build) so your current source changes are used.

Open http://localhost:3000 → create admin account → done.

Server deployment: See the full Installation Guide. Already running CLIProxyAPI? sudo ./install.sh --dashboard-only installs the dashboard and its database while reusing your existing CLIProxyAPI. This mode also includes usage collection and backup scheduling helper services, as described in the installation guide.

Features

  • Visual Configuration — Manage CLIProxyAPI settings through structured forms, no YAML editing
  • Multi-Provider OAuth — Connect Claude Code, Codex, xAI (Grok), Antigravity, Kimi, Kimi.ai, Devin, and Meta AI accounts; Gemini CLI, GitHub Copilot, Kiro, and Cursor appear once their CLIProxyAPI plugin is enabled
  • CLIProxyAPI Plugins — Install, enable, configure, and remove plugins from the CLIProxyAPI plugin store (Settings), with a warning when the persistent plugins volume is missing
  • Custom Providers — Add any OpenAI-compatible endpoint (OpenRouter, Ollama, etc.) with model mappings; admins can mark a provider as Shared so all team members see and use it
  • Perplexity Pro Sidecar — Optional OpenAI-compatible wrapper for a Perplexity Pro subscription, enabled during setup
  • API Key Management — Create, revoke, and track API keys with per-user ownership
  • User Management — Admins create, edit, and delete users and grant admin rights
  • Real-time Monitoring — Live log streaming, container health, and service management
  • Quota Tracking — Rate limits and usage per provider (Claude, Codex incl. per-model and code review limits, Kimi, GitHub Copilot, Antigravity and Gemini per model)
  • Telegram Quota Alerts — Automatic notifications when OAuth quota drops below threshold (configurable providers, check interval, and cooldown)
  • Usage Analytics — Request counts, provider breakdown, model stats, error rates, estimated cost per model and provider
  • Oh-My-Open-Agent Variant Toggle — Choose between oh-my-openagent (11 agents + 9 categories) and oh-my-opencode-slim (7 agents, lower tokens, fallback chains) with per-agent model/skills configuration
  • Config Sync — Auto-sync OpenCode configs via the opencode-cliproxyapi-sync plugin (includes slim config)
  • Config Sharing — Share model configs with others via share codes (XXXX-XXXX)
  • One-Click Updates — Update both Dashboard (GHCR) and CLIProxyAPI (Docker Hub) from the admin panel
  • Container Management — Start, stop, restart containers directly from the UI
  • Backup & Restore — Create, schedule, upload, preview, and restore dashboard backups (Settings → Backup)
  • Light/Dark Theme & Languages — Theme toggle; UI in English, German, Spanish, and Simplified Chinese
  • Automatic TLS — Let's Encrypt certificates via Caddy, auto-renewed

Feature availability depends on the deployment mode. In dashboard-only mode, restarting or updating the CLIProxyAPI container requires separately providing compatible Docker access and container naming; see the Installation Guide. Version switching also requires writable version-pinning configuration; see the Environment Variables reference. Updating Dashboard from the web UI requires a deploy webhook service and DEPLOY_SECRET; see Webhook / Deploy configuration.

Local Providers (Ollama / LM Studio / llama.cpp)

Custom providers pointing at localhost or private networks are blocked by default to prevent SSRF from hosted installations. To enable them on self-hosted deployments:

  1. Set ALLOW_LOCAL_PROVIDER_URLS=true in infrastructure/.env.
  2. Restart the dashboard container (docker compose up -d dashboard).
  3. Create a custom provider with the local base URL (e.g. http://host.docker.internal:11434/v1 for Ollama from within Docker, or http://localhost:11434/v1 when running the dashboard outside a container). The API key field is optional — leave it empty if the provider doesn't require one.

Cloud instance-metadata addresses (169.254.169.254, 100.100.100.200) stay blocked regardless of this setting.

Telegram Quota Alerts

Get notified on Telegram when your OAuth provider quota is running low.

Setup (Quota → Telegram Alerts, admins only):

  1. Create a Telegram bot via @BotFather and copy the bot token
  2. Get your chat ID (send a message to the bot, then check https://api.telegram.org/bot<TOKEN>/getUpdates)
  3. In the dashboard, open the Quota page, scroll to Telegram Alerts, and enter:
    • Bot token
    • Chat ID
    • Quota threshold (e.g. 20% remaining)
    • Check interval and cooldown (minutes)
    • Which providers to monitor (Claude, Antigravity, Gemini CLI, Gemini, Codex, Copilot, Kimi)
  4. Enable alerts — the scheduler checks every 5 minutes with a 1-hour cooldown between notifications by default

Use the Send Test button to verify your configuration before enabling, and Check Now to run a check immediately.

Oh-My-Open-Agent Integration

The dashboard supports two OpenCode orchestration variants. Toggle between them in the Using with OpenCode section:

Variant Agents Description
Oh-My-Open-Agent 11 agents + 9 categories Full-featured orchestration with sisyphus, hephaestus, atlas, prometheus, oracle, and more
Oh-My-OpenCode Slim 7 agents Lightweight: orchestrator, oracle, council, designer, explorer, librarian, fixer. Lower token usage with dedicated fallback chains

Generated configs target oh-my-openagent 5.1.33 and oh-my-opencode-slim 3.0.4 and are checked against their upstream schemas.

How it works:

  1. Select your variant in the dashboard -- the plugin in opencode.json switches automatically
  2. Assign models to agents (auto-assigned by tier, or manually override)
  3. Toggle skills (per agent in Slim: simplify, codemap; disabled skills and hooks in Oh-My-Open-Agent)
  4. Config syncs automatically via the sync plugin

First-time setup (run once per variant):

bunx oh-my-openagent@latest install                  # Normal variant
bunx oh-my-opencode-slim@latest install --no-tui     # Slim variant

Each variant has its own config file (oh-my-openagent.json / oh-my-opencode-slim.jsonc) -- they don't conflict.

Screenshots

Setup Wizard
Setup Wizard — guided initial configuration

Provider Configuration
Provider Configuration — manage API keys and OAuth accounts

Quota Management
Quota Management — track rate limits with Telegram alerts

Settings
Settings — config sync, system info, and updates

Architecture

Seven Docker containers plus the optional Perplexity sidecar, on two networks (frontend, and backend with no internet access):

Architecture

Service Role
Caddy Reverse proxy, automatic TLS, HTTP/3
Dashboard Next.js web app, JWT auth, Docker management via socket proxy
CLIProxyAPI AI proxy server, OAuth callbacks, management API
Perplexity Sidecar Optional (perplexity profile): OpenAI-compatible wrapper for Perplexity Pro subscription
Docker Socket Proxy Restricted Docker API access (containers, images, networks only)
PostgreSQL Database on isolated internal network
Usage Collector Cron container that triggers usage collection every 5 minutes
Backup Scheduler Cron container that runs due scheduled backups (checks every 5 minutes)

Project Structure

Project Structure

Tech Stack

Component Technology
Framework Next.js 16 (App Router)
UI React 19
Styling Tailwind CSS v4
Database PostgreSQL 16 + Prisma 7
Auth JWT (jose) + bcrypt
Container Mgmt Docker CLI via socket proxy

Development

cd dashboard
./dev-local.sh              # Start dev environment
./dev-local.sh --reset      # Reset database
./dev-local.sh --down       # Stop containers

Or manually:

cd dashboard
npm install
cp .env.development .env.local  # Edit with your DB credentials
npx prisma migrate dev
npm run dev

Dashboard at http://localhost:3000.

UI-Only Mode (no database)

To browse the dashboard UI without PostgreSQL or login:

cd dashboard
SKIP_AUTH=1 npm run dev

Opens all routes as a fake admin user — useful for testing themes, layouts, and components.

Documentation

Guide Description
Installation Server deployment, local setup, manual installation
Configuration Environment variables, config.yaml, config sync
Environment Variables Full environment variable reference
Usage Collection Usage tracking service, troubleshooting, manual collection
Troubleshooting Common issues and solutions
Security Best practices for production
Backup & Restore Automated and manual backups
Service Management Systemd and Docker Compose commands
Runbook Health check, deployment, database, updates, monitoring

Contributing

  1. Fork → feature branch → PR
  2. Use Conventional Commits (feat:, fix:, chore:)
  3. Test locally before submitting

Release-Please auto-generates releases from commit messages. See the Contributing Guide for setup, scripts, code style, and the PR checklist.

Contributors

Thanks to these wonderful people (emoji key):

itsmylife44
itsmylife44

💻 📖 🚧 🚇
Rizki Hidayat
Rizki Hidayat

💻
Đặng Quốc Phong
Đặng Quốc Phong

💻
smart-tinker
smart-tinker

💻 🐛
islee
islee

💻
deftdawg
deftdawg

💻 🐛
dslife2025
dslife2025

💻

Adding a Language

The dashboard supports multi-language UI. Currently, we offer English (en), German (de), Spanish (es), and Simplified Chinese (zh-CN). We welcome community contributions for additional languages!

How to contribute a new language

  1. Copy the English template:

    cp dashboard/messages/en.json dashboard/messages/{locale}.json

    Replace {locale} with the language code (e.g., fr for French, es for Spanish, ja for Japanese).

  2. Translate all strings:

    • Open the new file in your editor
    • Translate every value (keep all keys and the structure unchanged)
    • Example:
      {
        "common": {
          "loading": "Wird geladen...",
          "cancel": "Abbrechen"
        }
      }
  3. Register the new locale:

    • Edit dashboard/src/i18n/config.ts
    • Add your locale to the supportedLocales array:
      export const supportedLocales = ["en", "de", "es", "zh-CN", "fr"] as const;
    • Add the display name to localeNames:
      export const localeNames: Record<Locale, string> = {
        en: "English",
        de: "Deutsch",
        es: "Español",
        "zh-CN": "简体中文",
        fr: "Français",  // Add this
      };
  4. Test locally:

    • Run npm run dev in dashboard/
    • Log in to the dashboard
    • Open the User Panel (top right)
    • Select your language from the Language dropdown
    • Verify all UI strings display correctly in your language
  5. Submit a PR:

    • Title: feat(i18n): add {language} translation
    • Include both files: messages/{locale}.json, and changes to src/i18n/config.ts
    • PR description: Link to any external translation resources or notes

Translation Quality Guidelines

  • Keep translations concise and match the tone of the English version
  • Use formal/business-appropriate language
  • Test that UI elements don't overflow or break with your translations
  • Plurals and gender (where applicable) should follow target language conventions
  • Date/time formatting handled by next-intl — no need to change
  • Currency codes are kept in English (e.g., USD, EUR)

Supported locales

Code Language Status
en English ✓ Complete
de German ✓ Complete
es Spanish Nearly complete
zh-CN Simplified Chinese Nearly complete

Add more by following the steps above!

Support

  • Discord — Community chat, installation help, announcements
  • CLIProxyAPI — Core proxy documentation
  • Issues — Bug reports and feature requests

Star History

Star History Chart

License

MIT


Built with ❤️ using Next.js, React, and Tailwind CSS

About

Web management dashboard for CLIProxyAPI — config sync, OAuth providers, monitoring, and more

Topics

Resources

Contributing

Security policy

Stars

283 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages