+ 
+
+
+
+[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 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。
+
+ [English](./README.md) | [中文](./README.zh-CN.md)
+
+## 截图
+
+
+ Cloud CLI (aka Claude Code UI)
+
+
+
+
+
+
+
+
+
+## 功能特性
+
+- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex
+- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信
+- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex
+- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑
+- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支
+- **会话管理** - 恢复对话、管理多个会话并跟踪历史记录
+- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理
+- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2
+
+
+## 快速开始
+
+### 前置要求
+
+- [Node.js](https://nodejs.org/) v20 或更高版本
+- 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或
+- 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或
+- 已安装并配置 [Codex](https://developers.openai.com/codex)
+
+### 一键操作(推荐)
+
+无需安装,直接运行:
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。
+
+**重启**: 停止服务器后只需再次运行相同的 `npx` 命令
+
+### 全局安装(供常规使用)
+
+为了频繁使用,一次性全局安装:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+```
+
+然后使用简单命令启动:
+
+```bash
+claude-code-ui
+```
+
+
+**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。
+
+**更新**:
+```bash
+cloudcli update
+```
+
+### CLI 使用方法
+
+全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令:
+
+| 命令 / 选项 | 简写 | 描述 |
+|------------------|-------|-------------|
+| `cloudcli` 或 `claude-code-ui` | | 启动服务器(默认) |
+| `cloudcli start` | | 显式启动服务器 |
+| `cloudcli status` | | 显示配置和数据位置 |
+| `cloudcli update` | | 更新到最新版本 |
+| `cloudcli help` | | 显示帮助信息 |
+| `cloudcli version` | | 显示版本信息 |
+| `--port
+桌面视图+
++显示项目概览和聊天界面的主界面 + |
+
+移动端体验+
++具有触摸导航的响应式移动设计 + |
+
+CLI 选择+
++在 Claude Code、Cursor CLI 和 Codex 之间选择 + |
+|
+
+
+*工具设置界面 - 仅启用您需要的内容*
+
+
+
+**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。
+
+## TaskMaster AI 集成 *(可选)*
+
+Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。
+
+它提供
+- 从 PRD(产品需求文档)生成 AI 驱动的任务
+- 智能任务分解和依赖管理
+- 可视化任务板和进度跟踪
+
+**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。
+安装后,您应该能够从设置中启用它
+
+
+## 使用指南
+
+### 核心功能
+
+#### 项目管理
+当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中
+- **项目操作** - 重命名、删除和组织项目
+- **智能导航** - 快速访问最近的项目和会话
+- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器
+
+#### 聊天界面
+- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
+- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应
+- **会话管理** - 恢复之前的对话或启动新会话
+- **消息历史** - 带有时间戳和元数据的完整对话历史
+- **多格式支持** - 文本、代码块和文件引用
+
+#### 文件浏览器与编辑器
+- **交互式文件树** - 使用展开/折叠导航浏览项目结构
+- **实时文件编辑** - 直接在界面中读取、修改和保存文件
+- **语法高亮** - 支持多种编程语言
+- **文件操作** - 创建、重命名、删除文件和目录
+
+#### Git 浏览器
+
+
+#### TaskMaster AI 集成 *(可选)*
+- **可视化任务板** - 用于管理开发任务的看板风格界面
+- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务
+- **进度跟踪** - 实时状态更新和完成跟踪
+
+#### 会话管理
+- **会话持久化** - 所有对话自动保存
+- **会话组织** - 按项目和 timestamp 分组会话
+- **会话操作** - 重命名、删除和导出对话历史
+- **跨设备同步** - 从任何设备访问会话
+
+### 移动应用
+- **响应式设计** - 针对所有屏幕尺寸进行优化
+- **触摸友好界面** - 滑动手势和触摸导航
+- **移动导航** - 底部选项卡栏,方便拇指导航
+- **自适应布局** - 可折叠侧边栏和智能内容优先级
+- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行
+
+## 架构
+
+### 系统概览
+
+```
+┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
+│ Frontend │ │ Backend │ │ Agent │
+│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
+│ │ │ │ │ │
+└─────────────────┘ └─────────────────┘ └─────────────────┘
+```
+
+### 后端 (Node.js + Express)
+- **Express 服务器** - 具有静态文件服务的 RESTful API
+- **WebSocket 服务器** - 用于聊天和项目刷新的通信
+- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理
+- **文件系统 API** - 为项目公开文件浏览器
+
+### 前端 (React + Vite)
+- **React 18** - 带有 hooks 的现代组件架构
+- **CodeMirror** - 具有语法高亮的高级代码编辑器
+
+
+
+
+### 贡献
+
+我们欢迎贡献!请遵循以下指南:
+
+#### 入门
+1. **Fork** 仓库
+2. **克隆** 您的 fork: `git clone
+ 为 Claude Code、Cursor 和 Codex 社区精心打造。
+
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index dd5ddfb3..109cf7d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,8 @@
"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",
"katex": "^0.16.25",
"lucide-react": "^0.515.0",
@@ -49,6 +51,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
+ "react-i18next": "^16.5.3",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.8.1",
"react-syntax-highlighter": "^15.6.1",
@@ -360,9 +363,9 @@
}
},
"node_modules/@babel/runtime": {
- "version": "7.27.6",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
- "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+ "version": "7.28.6",
+ "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.6.tgz",
+ "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@@ -5793,6 +5796,15 @@
"integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
"license": "CC0-1.0"
},
+ "node_modules/html-parse-stringify": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+ "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+ "license": "MIT",
+ "dependencies": {
+ "void-elements": "3.1.0"
+ }
+ },
"node_modules/html-url-attributes": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -5874,6 +5886,46 @@
"ms": "^2.0.0"
}
},
+ "node_modules/i18next": {
+ "version": "25.7.4",
+ "resolved": "https://registry.npmmirror.com/i18next/-/i18next-25.7.4.tgz",
+ "integrity": "sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://locize.com"
+ },
+ {
+ "type": "individual",
+ "url": "https://locize.com/i18next.html"
+ },
+ {
+ "type": "individual",
+ "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.28.4"
+ },
+ "peerDependencies": {
+ "typescript": "^5"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/i18next-browser-languagedetector": {
+ "version": "8.2.0",
+ "resolved": "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+ "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.23.2"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8152,9 +8204,9 @@
}
},
"node_modules/node-pty": {
- "version": "1.1.0-beta9",
- "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0-beta9.tgz",
- "integrity": "sha512-/Ue38pvXJdgRZ3+me1FgfglLd301GhJN0NStiotdt61tm43N5htUyR/IXOUzOKuNaFmCwIhy6nwb77Ky41LMbw==",
+ "version": "1.1.0",
+ "resolved": "https://registry.npmmirror.com/node-pty/-/node-pty-1.1.0.tgz",
+ "integrity": "sha512-20JqtutY6JPXTUnL0ij1uad7Qe1baT46lyolh2sSENDd4sTzKZ4nmAFkeAARDKwmlLjPx6XKRlwRUxwjOy+lUg==",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -9146,6 +9198,33 @@
"react": ">= 16.8 || 18.0.0"
}
},
+ "node_modules/react-i18next": {
+ "version": "16.5.3",
+ "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",
+ "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.28.4",
+ "html-parse-stringify": "^3.0.1",
+ "use-sync-external-store": "^1.6.0"
+ },
+ "peerDependencies": {
+ "i18next": ">= 25.6.2",
+ "react": ">= 16.8.0",
+ "typescript": "^5"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ },
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -11804,6 +11883,15 @@
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
+ "node_modules/use-sync-external-store": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+ "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11976,6 +12064,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/void-elements": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
+ "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/w3c-keyname": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 786f03da..4cb1f1ae 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,8 @@
"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",
"katex": "^0.16.25",
"lucide-react": "^0.515.0",
@@ -81,6 +83,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
+ "react-i18next": "^16.5.3",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.8.1",
"react-syntax-highlighter": "^15.6.1",
diff --git a/src/App.jsx b/src/App.jsx
index 42e4e67b..8f10ef53 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,6 +36,8 @@ import ProtectedRoute from './components/ProtectedRoute';
import { useVersionCheck } from './hooks/useVersionCheck';
import useLocalStorage from './hooks/useLocalStorage';
import { api, authenticatedFetch } from './utils/api';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n/config.js';
// Main App component with routing
@@ -979,24 +981,26 @@ function AppContent() {
// Root App component with router
function App() {
return (
- Loading...
;
+ return {t('apiKeys.loading')}
;
}
return (
@@ -152,9 +154,9 @@ function ApiKeysSettings() {
{/* New API Key Alert */}
{newlyCreatedKey && (
-
)}
@@ -184,33 +186,33 @@ function ApiKeysSettings() {
);
- },
+ };
+
+// Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
+const markdownComponents = {
+ code: CodeBlock,
blockquote: ({ children }) => (
⚠️ Save Your API Key
+{t('apiKeys.newKey.alertTitle')}
- This is the only time you'll see this key. Store it securely. + {t('apiKeys.newKey.alertMessage')}
@@ -174,7 +176,7 @@ function ApiKeysSettings() {
className="mt-3"
onClick={() => setNewlyCreatedKey(null)}
>
- I've saved it
+ {t('apiKeys.newKey.iveSavedIt')}
API Keys
+{t('apiKeys.title')}
- Generate API keys to access the external API from other applications. + {t('apiKeys.description')}
{showNewKeyForm && (
setNewKeyName(e.target.value)}
className="mb-2"
/>
@@ -218,7 +220,7 @@ function ApiKeysSettings() {
-
+
{apiKeys.length === 0 ? (
-
No API keys created yet.
+{t('apiKeys.empty')}
) : ( apiKeys.map((key) => ({key.key_name}
{key.api_key}
- Created: {new Date(key.created_at).toLocaleDateString()}
- {key.last_used && ` • Last used: ${new Date(key.last_used).toLocaleDateString()}`}
+ {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
+ {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
@@ -239,7 +241,7 @@ function ApiKeysSettings() {
variant={key.is_active ? 'outline' : 'secondary'}
onClick={() => toggleApiKey(key.id, key.is_active)}
>
- {key.is_active ? 'Active' : 'Inactive'}
+ {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
- Add GitHub Personal Access Tokens to clone private repositories via the external API. + {t('apiKeys.github.description')}
{showNewTokenForm && (
setNewTokenName(e.target.value)}
className="mb-2"
@@ -286,7 +288,7 @@ function ApiKeysSettings() {
@@ -314,7 +316,7 @@ function ApiKeysSettings() {
setNewGithubToken(e.target.value)}
className="mb-2 pr-10"
@@ -300,13 +302,13 @@ function ApiKeysSettings() {
-
+
{githubTokens.length === 0 ? (
-
diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 4f27c9ee..3a22238d 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -30,6 +30,7 @@ import CursorLogo from './CursorLogo.jsx';
import CodexLogo from './CodexLogo.jsx';
import NextTaskBanner from './NextTaskBanner.jsx';
import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import { useTranslation } from 'react-i18next';
import ClaudeStatus from './ClaudeStatus';
import TokenUsagePie from './TokenUsagePie';
@@ -337,27 +338,27 @@ function grantClaudeToolPermission(entry) {
}
// Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
-const markdownComponents = {
- code: ({ node, inline, className, children, ...props }) => {
- const [copied, setCopied] = React.useState(false);
- const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
- const looksMultiline = /[\r\n]/.test(raw);
- const inlineDetected = inline || (node && node.type === 'inlineCode');
- const shouldInline = inlineDetected || !looksMultiline; // fallback to inline if single-line
+const CodeBlock = ({ node, inline, className, children, ...props }) => {
+ const { t } = useTranslation('chat');
+ const [copied, setCopied] = React.useState(false);
+ const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
+ const looksMultiline = /[\r\n]/.test(raw);
+ const inlineDetected = inline || (node && node.type === 'inlineCode');
+ const shouldInline = inlineDetected || !looksMultiline; // fallback to inline if single-line
- // Inline code rendering
- if (shouldInline) {
- return (
- No GitHub tokens added yet.
+{t('apiKeys.github.empty')}
) : ( githubTokens.map((token) => ({token.credential_name}
- Added: {new Date(token.created_at).toLocaleDateString()}
+ {t('apiKeys.github.added')} {new Date(token.created_at).toLocaleDateString()}
@@ -333,7 +335,7 @@ function ApiKeysSettings() {
variant={token.is_active ? 'outline' : 'secondary'}
onClick={() => toggleGithubToken(token.id, token.is_active)}
>
- {token.is_active ? 'Active' : 'Inactive'}
+ {token.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
- {children}
-
- );
- }
+ // Inline code rendering
+ if (shouldInline) {
+ return (
+
+ {children}
+
+ );
+ }
// Extract language from className (format: language-xxx)
const match = /language-(\w+)/.exec(className || '');
@@ -412,15 +413,15 @@ const markdownComponents = {
type="button"
onClick={handleCopy}
className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus:opacity-100 active:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
- title={copied ? 'Copied' : 'Copy code'}
- aria-label={copied ? 'Copied' : 'Copy code'}
+ title={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
+ aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
>
{copied ? (
- Copied
+ {t('codeBlock.copied')}
) : (
@@ -428,7 +429,7 @@ const markdownComponents = {
{children} @@ -486,6 +491,7 @@ const markdownComponents = { // Memoized message component to prevent unnecessary re-renders const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }) => { + const { t } = useTranslation('chat'); const isGrouped = prevMessage && prevMessage.type === message.type && ((prevMessage.type === 'assistant') || (prevMessage.type === 'user') || @@ -588,7 +594,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile