Login
siteboon/claudecodeuiPlease refer to the latest official releases for information GitHub Homepage

Claude Code的桌面和移动端可视化界面，支持跨平台AI编程助手管理

GPL-3.0JavaScript 1.7ksiteboonclaudecodeui Last Updated: 2025-07-15

Claude Code UI 项目详细介绍

项目概述

Claude Code UI 是一个开源的Web和移动端友好的用户界面，专为Anthropic官方的Claude Code CLI设计。该项目允许用户在本地或远程查看所有Claude Code会话和项目，并以与CLI相同的方式进行管理。这为用户提供了一个在任何地方都能工作的完整界面。

项目特色

🎨 响应式设计

  • 跨平台兼容：无缝支持桌面、平板和移动设备
  • 自适应布局：可折叠侧边栏和智能内容优先级
  • 触摸友好：滑动手势和触摸导航
  • 移动导航：底部标签栏，方便拇指操作

💬 交互式聊天界面

  • 内置聊天：与Claude Code无缝通信的内置聊天界面
  • 实时通信：通过WebSocket连接流式传输Claude的响应
  • 会话管理：恢复之前的对话或开始新的会话
  • 消息历史：完整的对话历史，包含时间戳和元数据
  • 多格式支持：文本、代码块和文件引用

🖥️ 集成终端功能

  • 直接CLI访问：通过内置shell功能直接访问Claude Code CLI
  • 进程管理：Claude CLI集成的进程生成和管理
  • 命令执行：支持所有Claude Code CLI命令

📁 文件资源管理器

  • 交互式文件树：带有语法高亮和实时编辑的交互式文件树
  • 实时文件编辑：直接在界面中读取、修改和保存文件
  • 语法高亮：支持多种编程语言
  • 文件操作：创建、重命名、删除文件和目录

💾 会话持久化

  • 自动保存：所有对话自动保存
  • 会话组织：按项目和时间戳分组会话
  • 会话操作：重命名、删除和导出对话历史
  • 跨设备同步：从任何设备访问会话

技术架构

系统架构图

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Claude CLI │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
└─────────────────┘ └─────────────────┘ └─────────────────┘

后端技术栈

  • Express服务器：提供RESTful API和静态文件服务
  • WebSocket服务器：用于聊天和项目刷新的通信
  • Claude CLI集成：进程生成和管理
  • 会话管理：JSONL解析和对话持久化
  • 文件系统API：为项目提供文件浏览器

前端技术栈

  • React 18：现代组件架构，使用Hooks
  • CodeMirror：高级代码编辑器，带有语法高亮
  • Vite：快速构建工具和开发服务器
  • Tailwind CSS：实用优先的CSS框架

安装与配置

系统要求

  • Node.js v16或更高版本
  • Claude Code CLI已安装并配置

安装步骤

  1. 克隆仓库：
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
  1. 安装依赖：
npm install
  1. 配置环境：
cp .env.example .env
# 根据需要编辑.env文件
  1. 启动应用：
# 开发模式（带热重载）
npm run dev
  1. 打开浏览器：
  • 开发环境：http://localhost:3001

安全设置

🔒 重要安全提醒

所有Claude Code工具默认禁用。这防止潜在有害操作自动运行。

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

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

推荐方法：从启用基本工具开始，根据需要逐步添加更多功能。

主要功能

项目管理

  • 自动发现项目：UI自动从~/.claude/projects/发现Claude Code项目
  • 可视化项目浏览器：显示所有可用项目及其元数据和会话数
  • 项目操作：重命名、删除和组织项目
  • 智能导航：快速访问最近的项目和会话

文件管理

  • 项目结构浏览：具有展开/折叠导航功能
  • 实时编辑：直接在界面中修改文件
  • 文件操作：完整的文件和目录管理功能

会话管理

  • 持久化存储：所有会话自动保存
  • 历史记录：完整的对话历史追踪
  • 多会话支持：同时管理多个项目会话

故障排除

常见问题1：UI显示无项目或空项目列表

解决方案：

  • 确保Claude CLI已正确安装
  • 在至少一个项目目录中运行claude命令进行初始化
  • 验证~/.claude/projects/目录存在且有适当权限

常见问题2：文件未加载、权限错误、空目录

解决方案：

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

Star History Chart