Cc Switch Web Ui

CC交换机Web UI

用于管理的现代基于web的用户界面 cc开关cli此应用程序提供了一个直观的GUI来管理AI提供商、MCP服务器、提示、技能和配置 Claude Code、Codex、Gemini和Kilo Code/OpenCode CLI应用程序。

GitHub简短描述： CC Switch和Kilo Code CLI的现代Web UI：管理AI提供商、MCP服务器和高级配置（Claude、Gemini、Codex、OpenCode）。

📋 目录

• 先决条件
• 特性
• 安装
• 用法
• 配置
• API 参考
• 发展
• 项目结构
• 贡献
• 许可证

🔧 先决条件

安装cc开关cli（必需）

此web UI是 cc-switch-cli 工具。你 必须 先安装它。

Linux（x64）

# Download
curl -LO https://github.com/saladday/cc-switch-cli/releases/latest/download/cc-switch-cli-linux-x64-musl.tar.gz

# Extract
tar -xzf cc-switch-cli-linux-x64-musl.tar.gz

# Add execute permission
chmod +x cc-switch

# Move to PATH
sudo mv cc-switch /usr/local/bin/

Linux（ARM64）

对于Raspberry Pi或ARM服务器：

# Download
curl -LO https://github.com/saladday/cc-switch-cli/releases/latest/download/cc-switch-cli-linux-arm64-musl.tar.gz

# Extract
tar -xzf cc-switch-cli-linux-arm64-musl.tar.gz

# Add execute permission
chmod +x cc-switch

# Move to PATH
sudo mv cc-switch /usr/local/bin/

验证安装

cc-switch --help

系统要求

• Node.js：v18.0.0或更高版本
• npm：v9.0.0或更高版本
• sqlite3：用于直接数据库操作
• cc开关cli：最新版本（见上面的安装）

✨ 特性

Kilo Code/OpenCode集成（新增！）

• 🛠️ 高级配置管理：完全支持编辑 opencode.json, opencode.jsonc，以及 kilocode.json.
• 🤖 多模型提供商支持：创建和管理自定义提供程序，每个提供程序支持多个模型（例如DeepSeek、Gemini 2.5等）。
• 🔄 智能配置合并：自动检测和合并来自多个文件的配置。， opencode.json > kilocode.json).
• ⚡ TUI设置：配置CLI TUI选项，如 scroll_acceleration 直接从UI。
• 📁 动态路径分辨率：自动在标准用户目录中查找配置文件(~/.config/kilo/, ~/.config/opencode/).

供应商管理

• 📋 列出所有已配置的AI提供程序
• 🔄 立即在提供商之间切换
• ➕ 添加新的自定义提供程序
• ✏️ 编辑现有提供程序配置
• 📋 重复的提供者
• 🗑️ 删除提供者
• ⚡ 运行速度测试以检查提供程序延迟

MCP服务器管理

• 📋 列出所有MCP（模型上下文协议）服务器
• ➕ 使用自定义命令和环境变量添加新的MCP服务器
• ✏️ 编辑MCP服务器配置
• 🔄 为每个应用程序启用/禁用服务器
• 🗑️ 删除MCP服务器
• 🔁 同步MCP服务器配置

提示管理

• 📋 列出所有已保存的提示
• ➕ 使用自定义内容创建新提示
• ✏️ 编辑现有提示
• 🔄 激活/停用提示
• 🗑️ 删除提示

技能管理

• 📋 列出已安装的技能
• 🔍 搜索可用技能
• 📦 从存储库安装新技能
• 🗑️ 卸载技能
• 🔄 启用/禁用每个应用程序的技能
• 📚 管理技能库（添加/删除）

环境变量

• 📋 查看所有环境变量
• 🔍 查看可变来源和位置
• 📊 了解配置层次结构

配置管理

• 📤 将配置导出到文件
• 📥 从文件导入配置
• 💾 创建配置备份
• 🔙 从备份还原
• 📂 查看配置路径

附加功能

• 👤 具有密码保护的身份验证
• 📊 带有状态概述的仪表板
• 📝 活动日志
• 🎨 具有深色主题的现代响应式UI
• 🔒 使用承载令牌身份验证的安全API

🚀 安装

克隆存储库

git clone https://github.com/yourusername/cc-switch-web-ui.git
cd cc-switch-web-ui

安装依赖项

npm install

配置环境

cp .env.example .env

编辑 .env 使用您的首选设置文件：

# Server Configuration
PORT=3010
HOST=0.0.0.0
NODE_ENV=production

# Authentication (REQUIRED for production)
ADMIN_PASSWORD=your_secure_password_here

# CORS (set to your frontend URL in production)
CORS_ORIGIN=*

🎮 用法

启动开发服务器

npm run dev

应用程序将从以下时间开始 http://localhost:3010 （或您配置的端口）

生产建设

npm run build
npm start

访问应用程序

1. 打开浏览器并导航到 http://localhost:3010
2. 使用您在中设置的密码登录 ADMIN_PASSWORD
3. 开始管理您的AI提供商配置！

⚙️ 配置

环境变量

📚 API 参考

认证

所有API端点（除 /api/health 和 /api/auth/login)需要承载令牌身份验证。

# Login
POST /api/auth/login
Body: { "password": "your_password" }
Response: { "success": true, "token": "..." }

# Use token in subsequent requests
Authorization: Bearer 

核心终点

🛠️ 发展

项目结构

cc-switch-web-ui/
├── src/
│   ├── main.tsx               # Frontend entry point
│   ├── App.tsx                # Main app component
│   ├── server/                # Backend server code
│   │   ├── index.ts           # Server entry point
│   │   ├── routes/            # API route handlers
│   │   │   ├── auth.ts        # Authentication routes
│   │   │   ├── config.ts      # Configuration management
│   │   │   ├── custom-tools.ts # Custom tools routes
│   │   │   ├── env.ts         # Environment variables
│   │   │   ├── logs.ts        # Activity logs
│   │   │   ├── mcp.ts         # MCP server management
│   │   │   ├── profiles.ts    # Profile management
│   │   │   ├── prompts.ts     # Prompts management
│   │   │   ├── providers.ts   # Provider management
│   │   │   ├── settings.ts    # Settings routes
│   │   │   └── skills.ts      # Skills management
│   │   ├── services/
│   │   │   ├── ccswitch-adapter.ts  # CLI wrapper service
│   │   │   ├── config-storage.ts    # Configuration storage
│   │   │   └── kilocode-service.ts  # Kilo/OpenCode Service (New!)
│   │   │   └── custom-cli-engine.ts # Custom CLI execution
│   │   ├── middleware/
│   │   │   └── auth.ts        # Authentication middleware
│   │   └── types/
│   │       ├── index.ts       # Type definitions
│   │       └── db.ts          # Database types
│   ├── components/            # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Header.tsx
│   │   ├── Layout.tsx
│   │   ├── Modal.tsx
│   │   ├── ProtectedRoute.tsx
│   │   ├── ProviderCard.tsx
│   │   ├── Sidebar.tsx
│   │   └── StatusBadge.tsx
│   ├── pages/                 # Page components
│   │   ├── Config.tsx
│   │   ├── CustomTools.tsx
│   │   ├── Dashboard.tsx
│   │   ├── EnvVars.tsx
│   │   ├── Login.tsx
│   │   ├── Logs.tsx
│   │   ├── McpServers.tsx
│   │   ├── Profiles.tsx
│   │   ├── Prompts.tsx
│   │   ├── Providers.tsx
│   │   ├── Settings.tsx
│   │   └── Skills.tsx
│   ├── services/
│   │   └── api.ts             # API client
│   ├── hooks/                 # Custom React hooks
│   │   ├── useApi.ts
│   │   └── useAuth.ts
│   ├── contexts/
│   │   └── AppContext.tsx     # Global state
│   └── types/
│       └── index.ts           # Type definitions
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json              # Frontend TypeScript config
└── tsconfig.server.json       # Server TypeScript config

可用脚本

npm run dev      # Start development server (single command)
npm run build    # Build for production (client + server)
npm start        # Start production server
npm run lint     # Run ESLint
npm run typecheck # Run TypeScript type checking

技术栈

服务器：

• Express.js-Web框架
• TypeScript-类型安全
• 头盔-安全头
• CORS-跨源支持
• Vite中间件-使用HMR开发服务器

前端：

• React 18-用户界面库
• TypeScript-类型安全
• Vite-构建工具
• 顺风CSS-造型
• React路由器-路由
• Axios-HTTP客户端
• Lucide React-图标

🤝 贡献

欢迎投稿！请随时提交拉取请求。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/AmazingFeature)
3. 提交您的更改(git commit -m 'Add some AmazingFeature')
4. 推到分支(git push origin feature/AmazingFeature)
5. 打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

• cc开关cli -此web UI包装的底层CLI工具
• 项目的所有贡献者和用户

📞 支持

如果您遇到任何问题或有疑问，请 打开一个问题 在GitHub上。

______________________________________________________________________

注： 此项目是以下内容的web UI包装器 cc开关cli。在使用此web界面之前，请确保先安装CLI工具。