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

在

 

针对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.”
—— 体验更好，具备会话历史和改进的文本框

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

小结对比

功能模块内容简介
项目定位Web UI GUI，用于管理 Claude Code / Cursor CLI 的会话与项目
平台/语言Web（React + Node.js），支持桌面和移动端
主要功能聊天界面、文件浏览/编辑、终端集成、会话管理、Git 支持
模型兼容Claude Sonnet 4、Opus 4.1、GPT-5
主分支工具控制默认关闭工具，需手动开启，提升安全性
贡献活跃度Stars 约 3k，2025 年 8 月仍在更新
社区正面反馈使用流畅、有会话历史、易用界面获得好评

Github：https://github.com/siteboon/claudecodeui
油管：https://youtu.be/AA5EzXebL8U


留言

發佈留言