Claude Code UI

2025-07-18AI工作效率 / 编程/开发2 次浏览

综合介绍

Claude Code UI 是一个为 Anthropic 公司出品的 claude code 命令行工具（CLI）设计的免费开源图形化用户界面。这个项目的主要目标是提供一个可以在桌面浏览器和移动设备上运行的网页界面，帮助开发者更方便地管理 claude code 的项目和会话。传统的命令行工具对于不熟悉的用户来说有一定的使用门槛，而且不方便在移动设备上操作。Claude Code UI 通过提供一个可视化的界面解决了这些问题，让用户可以随时随地通过浏览器访问和控制他们的AI编程项目。它的核心功能包括项目管理、实时聊天窗口、文件浏览器、代码编辑器、Git版本控制和集成终端，几乎将所有 claude code 的核心功能都搬到了浏览器里，并且优化了移动设备上的使用体验。

功能列表

响应式设计: 界面能自动适应电脑、平板和手机屏幕，方便在移动设备上使用。
互动聊天界面: 内置一个聊天窗口，可以和 Claude AI 实时沟通。
集成终端: 提供一个内置的命令行终端，可以直接在网页里执行 claude code 的命令。
文件浏览器: 以树状目录展示项目文件，支持语法高亮，可以直接在线编辑代码。
Git版本控制: 提供了查看、暂存和提交代码更改的功能，还支持切换不同的代码分支。
会话管理: 能够自动保存和恢复聊天会话，方便用户追踪和管理多个项目的历史记录。
项目自动发现: 能自动从 ~/.claude/projects/ 目录中找到并加载所有 claude code 项目。
安全设置: 默认禁用所有 claude code 工具，需要用户在设置中手动开启，以防止潜在的风险。

使用帮助

Claude Code UI 提供了一个图形化界面，让你在浏览器中就能轻松使用 Anthropic 的 claude code 命令行工具。以下是详细的安装和使用流程，帮助你快速上手。

前期准备

在开始安装之前，请确保你的电脑上已经安装了以下两个软件：

Node.js: 需要 v20 或更高的版本。你可以在命令行中输入 node -v 来检查当前版本。
Claude Code CLI: 你需要先安装并配置好 Anthropic 官方的 claude code 命令行工具。

安装流程

按照以下步骤来安装和启动 Claude Code UI：

克隆代码仓库首先，打开你的终端（命令行工具），进入一个你希望存放项目的文件夹，然后运行以下 git 命令来下载项目文件：
```
git clone https://github.com/siteboon/claudecodeui.git
```
进入项目目录下载完成后，使用 cd 命令进入项目文件夹：
```
cd claudecodeui
```
安装依赖在项目文件夹内，运行 npm install 命令。这个命令会自动下载并安装项目运行所需要的所有软件包。
```
npm install
```
配置环境项目提供了一个环境配置文件模板。你需要复制一份并根据自己的需求进行修改。
```
cp .env.example .env
```
复制完成后，你可以用文本编辑器打开 .env 文件。在文件中，你可以设置应用运行的端口等参数，默认端口是 3001。
启动应用一切准备就绪后，运行以下命令来启动应用：
```
npm run dev
```
这个命令会以开发模式启动应用，该模式支持热重载（hot reload），也就是说当你修改代码后，网页会自动刷新，方便调试。
访问应用启动成功后，终端会显示应用正在运行的地址。打开你的浏览器，访问以下网址：http://localhost:3001 (如果你在 .env 文件中修改了端口，请使用你设置的端口)。

核心功能操作指南

1. 项目管理

应用启动后，它会自动扫描你电脑上的 ~/.claude/projects/ 目录，并将找到的所有 claude code 项目显示在主界面的项目浏览器中。你可以：

查看项目: 所有项目会以列表形式展示，包含项目的元数据和会话数量。
操作项目: 你可以对项目进行重命名或删除等操作。
快速导航: 界面会提供对最近项目和会话的快捷访问入口。

2. 安全设置：启用工具

出于安全考虑，所有 claude code 的工具（例如文件读写、执行命令等）在默认情况下是禁用的。你需要手动启用它们：

在界面侧边栏找到并点击齿轮图标，打开“工具设置”窗口。
根据你的需要，选择性地开启你信任的工具。
点击“应用”保存设置。建议仅开启当前任务所必需的工具。

3. 聊天界面

这是与 Claude AI 互动的主要窗口。

实时沟通: 你可以直接在输入框中输入问题，AI 的回复会以流式的方式实时显示在聊天记录中。
会话管理: 每个项目下的聊天记录都会被保存。你可以随时暂停一个会话，并在之后返回继续。
多格式支持: 聊天窗口支持显示纯文本、代码块和文件引用。

4. 文件浏览和编辑

在界面的左侧，有一个文件浏览器，功能类似于 VS Code 的资源管理器。

浏览文件: 以树状结构展示整个项目的文件和文件夹，你可以方便地展开或折叠目录。
在线编辑: 点击任何一个文件，都可以在右侧的代码编辑器中打开它。编辑器支持多种编程语言的语法高亮。
文件操作: 你可以直接在界面上创建新文件、重命名或删除文件和文件夹。

5. Git 版本控制

应用集成了 Git 的基本功能，方便你管理代码版本。

在 Git 管理面板，你可以看到当前项目中所有被修改过的文件。
你可以选择要提交的文件（stage），输入提交信息（commit message），然后点击提交。
你还可以在不同的代码分支之间进行切换。

6. 移动设备使用

Claude Code UI 的界面是响应式的，在手机浏览器上也有很好的体验。

你可以将应用的快捷方式添加到手机主屏幕，它会像一个原生App一样运行（PWA模式）。
底部配有导航栏，方便单手操作。
侧边栏和内容区域会根据屏幕大小自动调整布局。

应用场景

远程和移动开发开发者可以在离开主力开发机时，通过平板或手机浏览器连接到家中的 claude code 服务。这样可以随时随地查看项目进度、与AI讨论代码，甚至进行一些简单的代码修改和提交，极大地提升了开发的灵活性。
简化AI编程入门对于刚接触 claude code 的新手来说，复杂的命令行操作可能会让人望而却步。Claude Code UI 提供了一个直观的图形化界面，将项目、文件、聊天和Git等功能集成在一起，降低了上手难度，让用户可以更专注于代码和逻辑本身。
项目管理和代码审查用户可以通过项目浏览器快速切换和管理多个AI编程项目。在代码审查（Code Review）场景下，可以直接在网页上浏览文件的修改，结合与AI的对话历史，更方便地理解代码的演变过程。
快速原型开发在进行快速原型开发时，开发者需要频繁地与AI进行沟通、生成代码、修改并测试。通过集成的聊天、编码和终端环境，Claude Code UI 将整个工作流整合到一个窗口内，避免了在不同应用之间来回切换的麻烦，提升了开发效率。

QA

问：这个项目是免费的吗？答：是的，Claude Code UI 是一个基于 GPL-3.0 许可的开源项目，你可以免费使用、修改和分发。
问：为什么启动后看不到我的 claude code 项目？答：请检查以下几点：首先，确认你已经正确安装了 claude code 命令行工具；其次，确保你至少在一个项目目录中运行过 claude 命令来初始化项目；最后，检查 ~/.claude/projects/ 目录是否存在并且拥有正确的读写权限。
问：我可以在公网服务器上部署它吗？答：可以，但你需要注意安全问题。由于该工具可以操作服务器上的文件和执行命令，请务必确保你的服务器有足够的安全措施，例如设置防火墙、使用HTTPS加密，并为应用本身添加身份验证层。默认配置下，任何能访问该端口的人都可以进行操作。
问：它和 claude code 官方工具有什么关系？答：Claude Code UI 是一个第三方的社区项目，它本身不创造AI能力，而是为 Anthropic 官方的 claude code 命令行工具提供了一个图形化的操作界面。它通过在后端调用和解析 claude code 的输出来实现各项功能。