Skip to content

itsmylife44/cliproxyapi-dashboard

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


Discord

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


What is this?

CLIProxyAPIPlus wraps OAuth-based CLI tools (Claude Code, Gemini CLI, Codex, GitHub Copilot, Kiro, Antigravity, Kimi, Qwen) 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.

Features

  • Visual Configuration — Manage CLIProxyAPIPlus settings through structured forms, no YAML editing
  • Multi-Provider OAuth — Connect Claude, Gemini, Codex, Copilot, Kiro, Antigravity, iFlow, Kimi, and Qwen accounts
  • Custom Providers — Add any OpenAI-compatible endpoint (OpenRouter, Ollama, etc.) with model mappings
  • API Key Management — Create, revoke, and track API keys with per-user ownership
  • Real-time Monitoring — Live log streaming, container health, and service management
  • Quota Tracking — Rate limits and usage per provider (Claude, Codex, Kimi, Antigravity)
  • Telegram Quota Alerts — Automatic notifications when OAuth quota drops below threshold (configurable per-provider, 1-hour cooldown)
  • Usage Analytics — Request counts, provider breakdown, model stats, error rates
  • Oh-My-Open-Agent Variant Toggle — Choose between oh-my-openagent (9 agents + categories) and oh-my-opencode-slim (6 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 CLIProxyAPIPlus (Docker Hub) from the admin panel
  • Container Management — Start, stop, restart containers directly from the UI
  • Automatic TLS — Let's Encrypt certificates via Caddy, auto-renewed

Telegram Quota Alerts

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

Setup (Admin → Settings → Telegram Alerts):

  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, go to Admin → Settings → Telegram and enter:
    • Bot token
    • Chat ID
    • Quota threshold (e.g. 20% remaining)
    • Which providers to monitor (Claude, Codex, Kimi, Antigravity)
  4. Enable alerts — the scheduler checks every 5 minutes with a 1-hour cooldown between notifications

Use the Test Message button to verify your configuration before enabling.

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 9 agents + 8 categories Full-featured orchestration with sisyphus, atlas, prometheus, oracle, and more
Oh-My-OpenCode Slim 6 agents Lightweight: orchestrator, oracle, designer, explorer, librarian, fixer. Lower token usage with dedicated fallback chains

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 (simplify, cartography, agent-browser)
  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     # Slim variant

Each variant has its own config file (oh-my-openagent.json / oh-my-opencode-slim.json) -- 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

Six Docker containers, two isolated networks:

Architecture

Service Role
Caddy Reverse proxy, automatic TLS, HTTP/3
Dashboard Next.js web app, JWT auth, Docker management via socket proxy
CLIProxyAPIPlus AI proxy server, OAuth callbacks, management API
Perplexity Sidecar OpenAI-compatible wrapper for Perplexity Pro subscription
Docker Socket Proxy Restricted Docker API access (containers/images only)
PostgreSQL Database on isolated internal network

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.example .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
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

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.

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) and German (de). 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 unchanged)
    • Example:
      {
        "common": {
          "loading": "Wird geladen...",  // Keep this structure
          "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", "fr"] as const;
    • Add the display name to localeNames:
      export const localeNames: Record<Locale, string> = {
        en: "English",
        de: "Deutsch",
        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 the three 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

Add more by following the steps above!

Support

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

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors