代码改变世界

Claude Code UI 一个为 Claude Code 和 Cursor CLI 设计的桌面端和移动端用户界面 - 详解

2025-11-30 15:54  tlnshuju  阅读(6)  评论(0)    收藏  举报

一个为 Claude Code 和 Cursor CLI 设计的桌面端和移动端用户界面。您可以在本地或远程使用它，从任何地方（移动端或桌面端）查看并修改 Claude Code 或 Cursor 中的活动项目和会话。这为您提供了一个可在任何地方使用的完整界面。支持的模型包括 Claude Sonnet 4、Opus 4.1 和 GPT-5

立即体验 aicoding.sh 快捷尝试 Claude Code ，无需复杂操作！

截图

在这里插入图片描述

功能特性

  • 响应式设计 - 在桌面、平板和移动设备上无缝工作，让您也可以在移动端使用 Claude Code
  • 交互式聊天界面 - 内置聊天界面，可与 Claude Code 或 Cursor 无缝通信
  • 集成 Shell 终端 - 通过内置 shell 功能直接访问 Claude Code 或 Cursor CLI
  • 文件资源管理器 - 具有语法高亮和实时编辑功能的交互式文件树
  • Git 资源管理器 - 查看、暂存和提交您的更改。您还可以切换分支
  • 会话管理 - 恢复对话、管理多个会话并跟踪历史记录
  • TaskMaster AI 集成（可选） - 具有 AI 驱动的任务规划、PRD 解析和工作流自动化的高级项目管理
  • 模型兼容性 - 适用于 Claude Sonnet 4、Opus 4.1 和 GPT-5

快速开始

前置要求

一键运行（推荐）

无需安装，直接运行：

npx @siteboon/claude-code-ui

您的默认浏览器将自动打开 Claude Code UI 界面。

本地开发安装

  1. 克隆仓库：
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
  1. 安装依赖：
npm install
  1. 配置环境：
cp .env.example .env
# 根据您的首选设置编辑 .env
  1. 启动应用：
# 开发模式（带热重载）
npm run dev

应用将在您在 .env 中指定的端口启动

  1. 打开浏览器：
    • 开发环境：http://localhost:3001

安全与工具配置

重要提示：所有 Claude Code 工具默认都是禁用的。这可以防止潜在的有害操作自动运行。

启用工具

要使用 Claude Code 的完整功能，您需要手动启用工具：

  1. 打开工具设置 - 点击侧边栏中的齿轮图标
  2. 选择性启用 - 仅打开您需要的工具
  3. 应用设置 - 您的偏好设置将本地保存

![工具设置模态框][IMAGE_PLACEHOLDER_TOOLS_MODAL]
工具设置界面 - 仅启用您需要的功能

推荐方法：从启用基本工具开始，根据需要添加更多工具。您随时可以调整这些设置。

TaskMaster AI 集成 （可选）

Claude Code UI 支持 TaskMaster AI（又名 claude-task-master）集成，用于高级项目管理和 AI 驱动的任务规划。

它提供：

  • 从 PRD（产品需求文档）生成 AI 驱动的任务
  • 智能任务分解和依赖关系管理
  • 可视化任务板和进度跟踪

设置和文档：访问 TaskMaster AI GitHub 仓库 获取安装说明、配置指南和使用示例。
安装后，您应该能够从设置中启用它

使用指南

核心功能

项目管理

UI 会自动从 ~/.claude/projects/ 发现 Claude Code 项目并提供：

  • 可视化项目浏览器 - 包含元数据和会话计数的所有可用项目
  • 项目操作 - 重命名、删除和组织项目
  • 智能导航 - 快速访问最近的项目和会话
  • MCP 支持 - 通过 UI 添加您自己的 MCP 服务器
聊天界面
  • 使用响应式聊天或 Claude Code/Cursor CLI - 您可以使用改编的聊天界面，也可以使用 shell 按钮连接到您选择的 CLI
  • 实时通信 - 通过 WebSocket 连接从 Claude 流式传输响应
  • 会话管理 - 恢复之前的对话或开始新的会话
  • 消息历史 - 包含时间戳和元数据的完整对话历史
  • 多格式支持 - 文本、代码块和文件引用
文件资源管理器和编辑器
  • 交互式文件树 - 使用展开/折叠导航浏览项目结构
  • 实时文件编辑 - 直接在界面中读取、修改和保存文件
  • 语法高亮 - 支持多种编程语言
  • 文件操作 - 创建、重命名、删除文件和目录
Git 资源管理器
TaskMaster AI 集成 （可选）
  • 可视化任务板 - 用于管理开发任务的看板式界面
  • PRD 解析器 - 创建产品需求文档并将其解析为结构化任务
  • 进度跟踪 - 实时状态更新和完成跟踪
会话管理
  • 会话持久化 - 所有对话自动保存
  • 会话组织 - 按项目和时间戳分组会话
  • 会话操作 - 重命名、删除和导出对话历史
  • 跨设备同步 - 从任何设备访问会话

移动应用

  • 响应式设计 - 针对所有屏幕尺寸优化
  • 触摸友好界面 - 滑动手势和触摸导航
  • 移动端导航 - 底部标签栏方便拇指导航
  • 自适应布局 - 可折叠侧边栏和智能内容优先级
  • 添加快捷方式到主屏幕 - 将快捷方式添加到主屏幕，应用将像 PWA 一样运行

架构

系统概览

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端          │    │   后端          │    │  Claude CLI     │
│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  集成           │
└─────────────────┘    └─────────────────┘    └─────────────────┘

后端（Node.js + Express）

  • Express 服务器 - 带静态文件服务的 RESTful API
  • WebSocket 服务器 - 用于聊天和项目刷新的通信
  • CLI 集成（Claude Code / Cursor） - 进程生成和管理
  • 会话管理 - JSONL 解析和对话持久化
  • 文件系统 API - 为项目公开文件浏览器

前端（React + Vite）

  • React 18 - 具有钩子的现代组件架构
  • CodeMirror - 具有语法高亮的高级代码编辑器

贡献

我们欢迎贡献！请遵循以下指南：

开始
  1. Fork 仓库
  2. 克隆您的 fork：git clone <your-fork-url>
  3. 安装依赖：npm install
  4. 创建功能分支：git checkout -b feature/amazing-feature
开发流程
  1. 进行更改，遵循现有代码风格
  2. 彻底测试 - 确保所有功能正常工作
  3. 运行质量检查：npm run lint && npm run format
  4. 提交，使用描述性消息遵循 Conventional Commits
  5. 推送到您的分支：git push origin feature/amazing-feature
  6. 提交 Pull Request，包含：
    • 清晰的更改描述
    • UI 更改的截图
    • 测试结果（如适用）
可以贡献什么
  • Bug 修复 - 帮助我们提高稳定性
  • 新功能 - 增强功能（首先在 issues 中讨论）
  • 文档 - 改进指南和 API 文档
  • UI/UX 改进 - 更好的用户体验
  • 性能优化 - 让它更快

故障排除

常见问题和解决方案

“未找到 Claude 项目”

问题：UI 显示没有项目或项目列表为空
解决方案：

  • 确保 Claude CLI 已正确安装
  • 在至少一个项目目录中运行 claude 命令以初始化
  • 验证 ~/.claude/projects/ 目录存在且具有适当的权限
    d
文件资源管理器问题

问题：文件未加载、权限错误、空目录
解决方案：

  • 检查项目目录权限（在终端中运行 ls -la）
  • 验证项目路径存在且可访问
  • 查看服务器控制台日志以获取详细的错误消息
  • 确保您没有尝试访问项目范围之外的系统目录

许可证

GNU 通用公共许可证 v3.0 - 详见 LICENSE 文件。

本项目是开源的，可在 GPL v3 许可证下自由使用、修改和分发。

致谢

构建工具

支持与社区

保持更新

  • Star 本仓库以表示支持
  • Watch 以获取更新和新版本
  • Follow 项目以获取公告

赞助商

为 Claude Code 社区用心打造。