{"_id":"@aogg/claude-code-ui","name":"@aogg/claude-code-ui","dist-tags":{"latest":"1.23.2"},"versions":{"1.23.2":{"name":"@aogg/claude-code-ui","version":"1.23.2","description":"A web-based UI for Claude Code CLI","type":"module","main":"server/index.js","bin":{"claude-code-ui":"server/cli.js","cloudcli":"server/cli.js"},"homepage":"https://github.com/aogg/claudecodeui","repository":{"type":"git","url":"git+https://github.com/aogg/claudecodeui.git"},"bugs":{"url":"https://github.com/aogg/claudecodeui/issues"},"scripts":{"dev":"concurrently --kill-others \"npm run server\" \"npm run client\"","server":"node server/index.js","client":"vite --host","build":"vite build","preview":"vite preview","typecheck":"tsc --noEmit -p tsconfig.json","lint":"eslint src/","lint:fix":"eslint src/ --fix","start":"npm run build && npm run server","release":"./release.sh","prepublishOnly":"npm run build","postinstall":"node scripts/fix-node-pty.js","prepare":"husky"},"keywords":["claude code","ai","anthropic","ui","mobile"],"author":{"name":"CloudCLI UI Contributors"},"license":"GPL-3.0","dependencies":{"@anthropic-ai/claude-agent-sdk":"^0.2.59","@codemirror/lang-css":"^6.3.1","@codemirror/lang-html":"^6.4.9","@codemirror/lang-javascript":"^6.2.4","@codemirror/lang-json":"^6.0.1","@codemirror/lang-markdown":"^6.3.3","@codemirror/lang-python":"^6.2.1","@codemirror/merge":"^6.11.1","@codemirror/theme-one-dark":"^6.1.2","@iarna/toml":"^2.2.5","@octokit/rest":"^22.0.0","@openai/codex-sdk":"^0.101.0","@replit/codemirror-minimap":"^0.5.2","@tailwindcss/typography":"^0.5.16","@uiw/react-codemirror":"^4.23.13","@xterm/addon-clipboard":"^0.1.0","@xterm/addon-fit":"^0.10.0","@xterm/addon-web-links":"^0.11.0","@xterm/addon-webgl":"^0.18.0","@xterm/xterm":"^5.5.0","bcrypt":"^6.0.0","better-sqlite3":"^12.6.2","chokidar":"^4.0.3","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cors":"^2.8.5","cross-spawn":"^7.0.3","express":"^4.18.2","fuse.js":"^7.0.0","gray-matter":"^4.0.3","i18next":"^25.7.4","i18next-browser-languagedetector":"^8.2.0","jsonwebtoken":"^9.0.2","jszip":"^3.10.1","katex":"^0.16.25","lucide-react":"^0.515.0","mime-types":"^3.0.1","multer":"^2.0.1","node-fetch":"^2.7.0","node-pty":"^1.1.0-beta34","react":"^18.2.0","react-dom":"^18.2.0","react-dropzone":"^14.2.3","react-error-boundary":"^4.1.2","react-i18next":"^16.5.3","react-markdown":"^10.1.0","react-router-dom":"^6.8.1","react-syntax-highlighter":"^15.6.1","rehype-katex":"^7.0.1","rehype-raw":"^7.0.0","remark-gfm":"^4.0.0","remark-math":"^6.0.0","sqlite":"^5.1.1","sqlite3":"^5.1.7","tailwind-merge":"^3.3.1","ws":"^8.14.2"},"devDependencies":{"@commitlint/cli":"^20.4.3","@commitlint/config-conventional":"^20.4.3","@eslint/js":"^9.39.3","@release-it/conventional-changelog":"^10.0.5","@types/node":"^22.19.7","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@vitejs/plugin-react":"^4.6.0","auto-changelog":"^2.5.0","autoprefixer":"^10.4.16","concurrently":"^8.2.2","eslint":"^9.39.3","eslint-plugin-import-x":"^4.16.1","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2","eslint-plugin-tailwindcss":"^3.18.2","eslint-plugin-unused-imports":"^4.4.1","globals":"^17.4.0","husky":"^9.1.7","lint-staged":"^16.3.2","node-gyp":"^10.0.0","postcss":"^8.4.32","release-it":"^19.0.5","sharp":"^0.34.2","tailwindcss":"^3.4.0","typescript":"^5.9.3","typescript-eslint":"^8.56.1","vite":"^7.0.4"},"lint-staged":{"src/**/*.{ts,tsx,js,jsx}":"eslint"},"gitHead":"b1ed98794becca31f7326bb9ab606e9834954200","_id":"@aogg/claude-code-ui@1.23.2","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-RJVxH6ZsTE+hr9/oFO2K5vOyFKSGSiWHr85ciyGYEasaz6Nxal7kymdZLLvmihvJipB3I9Q41WDTIQcismo0SA==","shasum":"50bd98adc1ff6712d1cd18de10ecd3d28c2dc184","tarball":"https://registry.npmjs.org/@aogg/claude-code-ui/-/claude-code-ui-1.23.2.tgz","fileCount":146,"unpackedSize":6544441,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAS0QGmSkKCXRAD5WdlUNikq6yNj2/gShyQ6BDf5mqxLAiEA7ItL8Vlj/FDaZDUfpuI2awrp3zDxNjPyi4pb470WeO8="}]},"_npmUser":{"name":"aogg","email":"2016teemo@gmail.com"},"directories":{},"maintainers":[{"name":"aogg","email":"2016teemo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/claude-code-ui_1.23.2_1773023131407_0.9725005643011462"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-09T02:25:31.332Z","1.23.2":"2026-03-09T02:25:31.732Z","modified":"2026-03-09T02:25:31.959Z"},"maintainers":[{"name":"aogg","email":"2016teemo@gmail.com"}],"description":"A web-based UI for Claude Code CLI","homepage":"https://github.com/aogg/claudecodeui","keywords":["claude code","ai","anthropic","ui","mobile"],"repository":{"type":"git","url":"git+https://github.com/aogg/claudecodeui.git"},"author":{"name":"CloudCLI UI Contributors"},"bugs":{"url":"https://github.com/aogg/claudecodeui/issues"},"license":"GPL-3.0","readme":"
\n \"Claude\n

Cloud CLI (又名 Claude Code UI)

\n
\n\n\n[Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。\n\n
English · 한국어 · 日本語
\n\n## 截图\n\n
\n\n\n\n\n\n\n\n\n\n
\n

桌面视图

\n\"Desktop\n
\n显示项目概览和聊天界面的主界面\n		\n

移动端体验

\n\"Mobile\n
\n具有触摸导航的响应式移动设计\n
\n

CLI 选择

\n\"CLI\n
\n在 Claude Code、Cursor CLI 和 Codex 之间选择\n
\n\n\n\n
\n\n## 功能特性\n\n- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex\n- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信\n- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex\n- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑\n- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支\n- **会话管理** - 恢复对话、管理多个会话并跟踪历史记录\n- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理\n- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2\n\n\n## 快速开始\n\n### 前置要求\n\n- [Node.js](https://nodejs.org/) v22 或更高版本\n- 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或\n- 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或\n- 已安装并配置 [Codex](https://developers.openai.com/codex)\n\n### 一键操作(推荐)\n\n无需安装,直接运行:\n\n```bash\nnpx @siteboon/claude-code-ui\n```\n\n服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。\n\n**重启**: 停止服务器后只需再次运行相同的 `npx` 命令\n\n### 全局安装(供常规使用)\n\n为了频繁使用,一次性全局安装:\n\n```bash\nnpm install -g @siteboon/claude-code-ui\n```\n\n然后使用简单命令启动:\n\n```bash\nclaude-code-ui\n```\n\n\n**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。\n\n**更新**:\n```bash\ncloudcli update\n```\n\n### CLI 使用方法\n\n全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令:\n\n| 命令 / 选项 | 简写 | 描述 |\n|------------------|-------|-------------|\n| `cloudcli` 或 `claude-code-ui` | | 启动服务器(默认) |\n| `cloudcli start` | | 显式启动服务器 |\n| `cloudcli status` | | 显示配置和数据位置 |\n| `cloudcli update` | | 更新到最新版本 |\n| `cloudcli help` | | 显示帮助信息 |\n| `cloudcli version` | | 显示版本信息 |\n| `--port ` | `-p` | 设置服务器端口(默认: 3001) |\n| `--database-path ` | | 设置自定义数据库位置 |\n\n**示例:**\n```bash\ncloudcli # 使用默认设置启动\ncloudcli -p 8080 # 在自定义端口启动\ncloudcli status # 显示当前配置\n```\n\n### 作为后台服务运行(推荐用于生产环境)\n\n在生产环境中,使用 PM2(Process Manager 2)将 Claude Code UI 作为后台服务运行:\n\n#### 安装 PM2\n\n```bash\nnpm install -g pm2\n```\n\n#### 作为后台服务启动\n\n```bash\n# 在后台启动服务器\npm2 start claude-code-ui --name \"claude-code-ui\"\n\n# 或使用更短的别名\npm2 start cloudcli --name \"claude-code-ui\"\n\n# 在自定义端口启动\npm2 start cloudcli --name \"claude-code-ui\" -- --port 8080\n```\n\n\n#### 系统启动时自动启动\n\n要使 Claude Code UI 在系统启动时自动启动:\n\n```bash\n# 为您的平台生成启动脚本\npm2 startup\n\n# 保存当前进程列表\npm2 save\n```\n\n\n### 本地开发安装\n\n1. **克隆仓库:**\n```bash\ngit clone https://github.com/siteboon/claudecodeui.git\ncd claudecodeui\n```\n\n2. **安装依赖:**\n```bash\nnpm install\n```\n\n3. **配置环境:**\n```bash\ncp .env.example .env\n# 使用您喜欢的设置编辑 .env\n```\n\n4. **启动应用程序:**\n```bash\n# 开发模式(支持热重载)\nnpm run dev\n\n```\n应用程序将在您在 .env 中指定的端口启动\n\n5. **打开浏览器:**\n - 开发环境: `http://localhost:3001`\n\n## 安全与工具配置\n\n**🔒 重要提示**: 所有 Claude Code 工具**默认禁用**。这可以防止潜在的有害操作自动运行。\n\n### 启用工具\n\n要使用 Claude Code 的完整功能,您需要手动启用工具:\n\n1. **打开工具设置** - 点击侧边栏中的齿轮图标\n3. **选择性启用** - 仅打开您需要的工具\n4. **应用设置** - 您的偏好设置将保存在本地\n\n
\n\n![工具设置模态框](public/screenshots/tools-modal.png)\n*工具设置界面 - 仅启用您需要的内容*\n\n
\n\n**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。\n\n## TaskMaster AI 集成 *(可选)*\n\nClaude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。\n\n它提供\n- 从 PRD(产品需求文档)生成 AI 驱动的任务\n- 智能任务分解和依赖管理\n- 可视化任务板和进度跟踪\n\n**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。\n安装后,您应该能够从设置中启用它\n\n\n## 使用指南\n\n### 核心功能\n\n#### 项目管理\n当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中\n- **项目操作** - 重命名、删除和组织项目\n- **智能导航** - 快速访问最近的项目和会话\n- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器\n\n#### 聊天界面\n- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI\n- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应\n- **会话管理** - 恢复之前的对话或启动新会话\n- **消息历史** - 带有时间戳和元数据的完整对话历史\n- **多格式支持** - 文本、代码块和文件引用\n\n#### 文件浏览器与编辑器\n- **交互式文件树** - 使用展开/折叠导航浏览项目结构\n- **实时文件编辑** - 直接在界面中读取、修改和保存文件\n- **语法高亮** - 支持多种编程语言\n- **文件操作** - 创建、重命名、删除文件和目录\n\n#### Git 浏览器\n\n\n#### TaskMaster AI 集成 *(可选)*\n- **可视化任务板** - 用于管理开发任务的看板风格界面\n- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务\n- **进度跟踪** - 实时状态更新和完成跟踪\n\n#### 会话管理\n- **会话持久化** - 所有对话自动保存\n- **会话组织** - 按项目和 timestamp 分组会话\n- **会话操作** - 重命名、删除和导出对话历史\n- **跨设备同步** - 从任何设备访问会话\n\n### 移动应用\n- **响应式设计** - 针对所有屏幕尺寸进行优化\n- **触摸友好界面** - 滑动手势和触摸导航\n- **移动导航** - 底部选项卡栏,方便拇指导航\n- **自适应布局** - 可折叠侧边栏和智能内容优先级\n- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行\n\n## 架构\n\n### 系统概览\n\n```\n┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐\n│ Frontend │ │ Backend │ │ Agent │\n│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │\n│ │ │ │ │ │\n└─────────────────┘ └─────────────────┘ └─────────────────┘\n```\n\n### 后端 (Node.js + Express)\n- **Express 服务器** - 具有静态文件服务的 RESTful API\n- **WebSocket 服务器** - 用于聊天和项目刷新的通信\n- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理\n- **文件系统 API** - 为项目公开文件浏览器\n\n### 前端 (React + Vite)\n- **React 18** - 带有 hooks 的现代组件架构\n- **CodeMirror** - 具有语法高亮的高级代码编辑器\n\n\n\n\n### 贡献\n\n我们欢迎贡献！有关提交规范、开发流程和发布流程的详细信息,请参阅 [Contributing Guide](CONTRIBUTING.md)。\n\n## 故障排除\n\n### 常见问题与解决方案\n\n\n#### \"未找到 Claude 项目\"\n**问题**: UI 显示没有项目或项目列表为空\n**解决方案**:\n- 确保已正确安装 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)\n- 至少在一个项目目录中运行 `claude` 命令以进行初始化\n- 验证 `~/.claude/projects/` 目录存在并具有适当的权限\n\n#### 文件浏览器问题\n**问题**: 文件无法加载、权限错误、空目录\n**解决方案**:\n- 检查项目目录权限(在终端中使用 `ls -la`)\n- 验证项目路径存在且可访问\n- 查看服务器控制台日志以获取详细错误消息\n- 确保您未尝试访问项目范围之外的系统目录\n\n\n## 许可证\n\nGNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。\n\n本项目是开源的,在 GPL v3 许可下可自由使用、修改和分发。\n\n## 致谢\n\n### 构建工具\n- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic 的官方 CLI\n- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor 的官方 CLI\n- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex\n- **[React](https://react.dev/)** - 用户界面库\n- **[Vite](https://vitejs.dev/)** - 快速构建工具和开发服务器\n- **[Tailwind CSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架\n- **[CodeMirror](https://codemirror.net/)** - 高级代码编辑器\n- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(可选)* - AI 驱动的项目管理和任务规划\n\n## 支持与社区\n\n### 保持更新\n- **Star** 此仓库以表示支持\n- **Watch** 以获取更新和新版本\n- **Follow** 项目以获取公告\n\n### 赞助商\n- [Siteboon - AI powered website builder](https://siteboon.ai)\n---\n\n
\n 为 Claude Code、Cursor 和 Codex 社区精心打造。\n
","readmeFilename":"README.zh-CN.md","_rev":"1-024f8bc2c883e5fbaacb575a09be0149"}