针对Claude Code 的免费开源前端界面

claudecodeui ，它允许用户在移动设备和网页上管理 Claude Code 的会话和项目。该项目支持响应式设计，适用于桌面、平板和手机，提供了交互式的聊天界面、集成的 shell 终端、文件资源管理器以及 Git 资源管理器等功能。

siteboon/claudecodeui 是一个非常实用的工具，它主要用于为 Anthropic 的 Claude Code 或者 Cursor CLI 工具提供一个现代化的图形化界面（GUI），让你能更方便地在桌面、平板或手机上管理会话和项目。

项目简介

Claude Code UI 是一个免费开源的 Web UI，能让你在各种设备上（包括桌面和移动端）远程管理 Claude Code 或 Cursor CLI 的会话、项目等内容

• 作者：Siteboon（荷兰团队）
• 编程语言：JavaScript
• 授权协议：GPL-3.0
• 当前状态：约有 3k stars，活跃更新，最近一次更新为 2025 年 8 月 12 日

核心功能（Source 概览）

从 GitHub 的 README 可以看到很多实用功能，以下是其主要特点

1. 响应式设计（Responsive Design）
   支持桌面、平板与移动设备，无论是在浏览器还是 PWA 模式下访问都很友好。
2. 交互式 Chat 界面
   内嵌聊天窗口，方便与 Claude Code 或 Cursor CLI 进行交互。
3. 集成 Shell 终端
   通过 UI 可以直接访问 CLI，执行命令更方便。
4. 文件浏览及编辑器
   支持目录树展示、文件语法高亮、在线编辑与保存。
5. Git 支持
   包括查看、 staging、提交代码及切换分支等操作。
6. 会话和项目管理
   自动发现 ~/.claude/projects/ 下的项目，支持恢复会话、管理历史记录、跨设备同步。
7. 支持多模型
   包括 Claude Sonnet 4、Opus 4.1 和 GPT-5 等。
8. 工具启用控制
   默认所有工具关闭；需在设置中手动开启，防止误执行危险操作
9. 移动设备优化
   包括触控导航、底部标签栏、适配屏幕、自定义主屏幕快捷方式（PWA）

架构概览

Claude Code UI 的架构包含前后端组件，结构如下：

• 前端：使用 React + Vite 构建，界面高效快速，文件编辑功能基于 CodeMirror
• 后端：Node.js + Express 提供 RESTful API 和 WebSocket 支持，用于项目遍历、CLI 调用、会话处理等

整体的系统结构图示如下：

[ 前端 (React/Vite) ] ↔ [ 后端 (Express/WS) ] ↔ [ Claude CLI / Cursor CLI ]

社区反馈

在 Reddit 上，有用户也对这一项目表达了积极的使用体验。这位用户写道：

“It’s been a much better experience using CC with a UI that includes session history and improved text box.”
—— 体验更好，具备会话历史和改进的文本框

这说明对于习惯命令行操作的用户而言，带有界面的替代方案更直观、更便捷。

小结对比

Github：https://github.com/siteboon/claudecodeui

油管：https://youtu.be/AA5EzXebL8U