mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-11 08:57:38 +00:00
8afb46af2e
* feat: new plugin system
* Potential fix for code scanning alert no. 312: Uncontrolled data used in path expression
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
* Update manifest.json
* feat(plugins): add SVG icon support with authenticated inline rendering
* fix: coderabbit changes and new plugin name & repo
* fix: design changes to plugins settings tab
* fix(plugins): prevent git arg injection, add repo URL detection
* fix: lint errors and deleting plugin error on windows
* fix: coderabbit nitpick comments
* fix(plugins): harden path traversal and respect enabled state
Use realpathSync to canonicalize paths before the plugin asset
boundary check, preventing symlink-based traversal bypasses that
could escape the plugin directory.
PluginTabContent now guards on plugin.enabled before mounting the
plugin module, and re-mounts when the enabled state changes so
toggling a plugin takes effect without a page reload.
PluginIcon safely handles a missing iconFile prop and skips
processing non-OK fetch responses instead of attempting to parse
error bodies as SVG.
Register 'plugins' as a known main tab so the settings router
preserves the tab on navigation.
* fix(plugins): support concurrent plugin updates
Replace single updatingPlugin string state with a Set to allow
multiple plugins to update simultaneously. Also disable the update
button and show a descriptive tooltip when a plugin has no git
remote configured.
* fix(plugins): async shutdown and asset/RPC fixes
Await stopPluginServer/stopAllPlugins in signal handlers and route
handlers so process exit and state transitions wait for clean plugin
shutdown instead of racing ahead.
Validate asset paths are regular files before streaming to prevent
directory traversal returning unexpected content; add a stream error
handler to avoid unhandled crashes on read failures.
Fix RPC proxy body detection to use the content-length header instead
of Object.keys, so falsy but valid JSON payloads (null, false, 0, {})
are forwarded correctly to plugin servers.
Track in-flight start operations via a startingPlugins map to prevent
duplicate concurrent plugin starts.
* refactor(git-panel): simplify setCommitMessage with plain function
* fix(plugins): harden input validation and scan reliability
- Validate plugin names against [a-zA-Z0-9_-] allowlist in
manifest and asset routes to prevent path traversal via URL
- Strip embedded credentials (user:pass@) from git remote URLs
before exposing them to the client
- Skip .tmp-* directories during scan to avoid partial installs
from in-progress updates appearing as broken plugins
- Deduplicate plugins sharing the same manifest name to prevent
ambiguous state
- Guard RPC proxy error handler against writing to an already-sent
response, preventing uncaught exceptions on aborted requests
* fix(git-panel): reset changes view on project switch
* refactor: move plugin content to /view folder
* fix: resolve type error in MobileNav and PluginTabContent components
---------
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
Co-authored-by: Haileyesus <something@gmail.com>
221 lines
10 KiB
Markdown
221 lines
10 KiB
Markdown
<div align="center">
|
||
<img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
|
||
<h1>Cloud CLI (aka Claude Code UI)</h1>
|
||
<p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
|
||
</div>
|
||
|
||
<p align="center">
|
||
<a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
|
||
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
|
||
<br><br>
|
||
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||
</p>
|
||
|
||
<div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
|
||
|
||
---
|
||
|
||
## Screenshots
|
||
|
||
<div align="center">
|
||
|
||
<table>
|
||
<tr>
|
||
<td align="center">
|
||
<h3>Desktop View</h3>
|
||
<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
|
||
<br>
|
||
<em>Main interface showing project overview and chat</em>
|
||
</td>
|
||
<td align="center">
|
||
<h3>Mobile Experience</h3>
|
||
<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
|
||
<br>
|
||
<em>Responsive mobile design with touch navigation</em>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td align="center" colspan="2">
|
||
<h3>CLI Selection</h3>
|
||
<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
|
||
<br>
|
||
<em>Select between Claude Code, Cursor CLI and Codex</em>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
## Features
|
||
|
||
- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Agents from mobile
|
||
- **Interactive Chat Interface** - Built-in chat interface for seamless communication with the Agents
|
||
- **Integrated Shell Terminal** - Direct access to the Agents CLI through built-in shell functionality
|
||
- **File Explorer** - Interactive file tree with syntax highlighting and live editing
|
||
- **Git Explorer** - View, stage and commit your changes. You can also switch branches
|
||
- **Session Management** - Resume conversations, manage multiple sessions, and track history
|
||
- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
|
||
- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](shared/modelConstants.js) for the full list of supported models)
|
||
|
||
|
||
## Quick Start
|
||
|
||
### CloudCLI Cloud (Recommended)
|
||
|
||
The fastest way to get started — no local setup required. Get a fully managed, containerized development environment accessible from the web, mobile app, API, or your favorite IDE.
|
||
|
||
**[Get started with CloudCLI Cloud](https://cloudcli.ai)**
|
||
|
||
|
||
### Self-Hosted (Open source)
|
||
|
||
Try CloudCLI UI instantly with **npx** (requires **Node.js** v22+):
|
||
|
||
```
|
||
npx @siteboon/claude-code-ui
|
||
```
|
||
|
||
Or install **globally** for regular use:
|
||
|
||
```
|
||
npm install -g @siteboon/claude-code-ui
|
||
cloudcli
|
||
```
|
||
|
||
Open `http://localhost:3001` — all your existing sessions are discovered automatically.
|
||
|
||
Visit the **[documentation →](https://cloudcli.ai/docs)** for more full configuration options, PM2, remote server setup and more
|
||
|
||
|
||
---
|
||
|
||
## Which option is right for you?
|
||
|
||
CloudCLI UI is the open source UI layer that powers CloudCLI Cloud. You can self-host it on your own machine, or use CloudCLI Cloud which builds on top of it with a full managed cloud environment, team features, and deeper integrations.
|
||
|
||
| | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
|
||
|---|---|---|
|
||
| **Best for** | Developers who want a full UI for local agent sessions on their own machine | Teams and developers who want agents running in the cloud, accessible from anywhere |
|
||
| **How you access it** | Browser via `[yourip]:port` | Browser, any IDE, REST API, n8n |
|
||
| **Setup** | `npx @siteboon/claude-code-ui` | No setup required |
|
||
| **Machine needs to stay on** | Yes | No |
|
||
| **Mobile access** | Any browser on your network | Any device, native app coming |
|
||
| **Sessions available** | All sessions auto-discovered from `~/.claude` | All sessions within your cloud environment |
|
||
| **Agents supported** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
|
||
| **File explorer and Git** | Yes, built into the UI | Yes, built into the UI |
|
||
| **MCP configuration** | Managed via UI, synced with your local `~/.claude` config | Managed via UI |
|
||
| **IDE access** | Your local IDE | Any IDE connected to your cloud environment |
|
||
| **REST API** | Yes | Yes |
|
||
| **n8n node** | No | Yes |
|
||
| **Team sharing** | No | Yes |
|
||
| **Platform cost** | Free, open source | Starts at $7/month |
|
||
|
||
> Both options use your own AI subscriptions (Claude, Cursor, etc.) — CloudCLI provides the environment, not the AI.
|
||
|
||
---
|
||
|
||
## Security & Tools Configuration
|
||
|
||
**🔒 Important Notice**: All Claude Code tools are **disabled by default**. This prevents potentially harmful operations from running automatically.
|
||
|
||
### Enabling Tools
|
||
|
||
To use Claude Code's full functionality, you'll need to manually enable tools:
|
||
|
||
1. **Open Tools Settings** - Click the gear icon in the sidebar
|
||
3. **Enable Selectively** - Turn on only the tools you need
|
||
4. **Apply Settings** - Your preferences are saved locally
|
||
|
||
<div align="center">
|
||
|
||
|
||
*Tools Settings interface - enable only what you need*
|
||
|
||
</div>
|
||
|
||
**Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.
|
||
|
||
---
|
||
## FAQ
|
||
|
||
<details>
|
||
<summary>How is this different from Claude Code Remote Control?</summary>
|
||
|
||
Claude Code Remote Control lets you send messages to a session already running in your local terminal. Your machine has to stay on, your terminal has to stay open, and sessions time out after roughly 10 minutes without a network connection.
|
||
|
||
CloudCLI UI and CloudCLI Cloud extend Claude Code rather than sit alongside it — your MCP servers, permissions, settings, and sessions are the exact same ones Claude Code uses natively. Nothing is duplicated or managed separately.
|
||
|
||
Here's what that means in practice:
|
||
|
||
- **All your sessions, not just one** — CloudCLI UI auto-discovers every session from your `~/.claude` folder. Remote Control only exposes the single active session to make it available in the Claude mobile app.
|
||
- **Your settings are your settings** — MCP servers, tool permissions, and project config you change in CloudCLI UI are written directly to your Claude Code config and take effect immediately, and vice versa.
|
||
- **Works with more agents** — Claude Code, Cursor CLI, Codex, and Gemini CLI, not just Claude Code.
|
||
- **Full UI, not just a chat window** — file explorer, Git integration, MCP management, and a shell terminal are all built in.
|
||
- **CloudCLI Cloud runs in the cloud** — close your laptop, the agent keeps running. No terminal to babysit, no machine to keep awake.
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Do I need to pay for an AI subscription separately?</summary>
|
||
|
||
Yes. CloudCLI provides the environment, not the AI. You bring your own Claude, Cursor, Codex, or Gemini subscription. CloudCLI Cloud starts at $7/month for the hosted environment on top of that.
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Can I use CloudCLI UI on my phone?</summary>
|
||
|
||
Yes. For self-hosted, run the server on your machine and open `[yourip]:port` in any browser on your network. For CloudCLI Cloud, open it from any device — no VPN, no port forwarding, no setup. A native app is also in the works.
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Will changes I make in the UI affect my local Claude Code setup?</summary>
|
||
|
||
Yes, for self-hosted. CloudCLI UI reads from and writes to the same `~/.claude` config that Claude Code uses natively. MCP servers you add via the UI show up in Claude Code immediately and vice versa.
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
## Community & Support
|
||
|
||
- **[Documentation](https://cloudcli.ai/docs)** — installation, configuration, features, and troubleshooting
|
||
- **[Discord](https://discord.gg/buxwujPNRE)** — get help and connect with other users
|
||
- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — bug reports and feature requests
|
||
- **[Contributing Guide](CONTRIBUTING.md)** — how to contribute to the project
|
||
|
||
## License
|
||
|
||
GNU General Public License v3.0 - see [LICENSE](LICENSE) file for details.
|
||
|
||
This project is open source and free to use, modify, and distribute under the GPL v3 license.
|
||
|
||
## Acknowledgments
|
||
|
||
### Built With
|
||
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
|
||
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
|
||
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
|
||
- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
|
||
- **[React](https://react.dev/)** - User interface library
|
||
- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
|
||
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
|
||
- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
|
||
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
|
||
|
||
|
||
### Sponsors
|
||
- [Siteboon - AI powered website builder](https://siteboon.ai)
|
||
---
|
||
|
||
<div align="center">
|
||
<strong>Made with care for the Claude Code, Cursor and Codex community.</strong>
|
||
</div>
|