Claude 代码用户界面：随时随地管理 AI 编程项目

July 17, 2025

实用开源项目

Open Source Developer Tools AI Coding Claude Code UI Web UI

借助 Claude Code UI 迈向更高级的 AI 编码：强大开源解决方案

对于使用 Anthropic Claude Code 的开发者而言，管理 AI 辅助编码会话和项目，如今可以像使用您喜爱的 Web 应用一样轻松便捷。隆重推出 Claude Code UI——一个免费的开源浏览器图形用户界面 (GUI)，将 Claude Code 的强大功能触手可及，支持桌面和移动设备访问。

这项创新项目托管在 GitHub 上，它将命令行界面 (CLI) 的体验，转化为一个响应迅速且直观的 Web 环境。无论您是远程工作，还是偏爱视觉化操作方式，Claude Code UI 都能让您以前所未有的便捷性管理活跃的 Claude Code 会话和项目。

重新定义您工作流程的关键特性：

响应式设计：体验流畅的界面，完美适配桌面、平板电脑和智能手机，确保在任何设备上都能保持高生产力。
交互式聊天：通过内置聊天界面与 Claude Code 进行直接沟通和代码辅助。
集成终端：直接在 UI 中访问 Claude Code CLI，进行命令执行和项目交互。
文件浏览器与实时编辑：通过交互式文件树导航项目结构，支持语法高亮，并可在浏览器内直接编辑文件。
Git 集成：在 UI 中查看、暂存和提交代码更改，并无缝切换分支。
会话管理：恢复过往对话，管理多个项目会话，并可靠地追踪您的交互历史记录。

开始使用 Claude Code UI：

设置 Claude Code UI 非常简单，您需要安装并配置 Node.js (v20 或更高版本) 和 Claude Code CLI。

克隆仓库：

git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui

安装依赖项：
```
npm install
```

配置环境变量：

cp .env.example .env
# 根据您的具体设置编辑 .env 文件

启动应用程序：
- 用于开发 (支持热重载)：
```
npm run dev
```

根据您的配置，应用程序通常会在 http://localhost:3001 运行。

安全与工具配置：

Claude Code UI 默认禁用潜在的有害工具，优先保障安全性。用户可以通过专门的设置界面选择性地启用所需工具，从而确保 AI 辅助编码过程中的可控与安全环境。

功能深度解析：

该 UI 提供强大的项目管理功能，可自动发现 ~/.claude/projects/ 中的项目，提供可视化浏览器，并支持重命名和删除等操作。聊天界面通过 WebSockets 支持实时通信，并保留完整的消息历史记录以实现持久的会话管理。文件浏览器允许在浏览器内执行文件操作，包括创建、重命名和删除，同时Git 浏览器则支持版本控制任务。

Claude Code UI 采用 React、Vite 和 CodeMirror 构建，后端利用 Node.js 和 Express，充分展现了高效的开发实践。它采用 GNU 通用公共许可证 v3.0 (GNU General Public License v3.0) 授权，是一款可供社区自由访问和修改的工具。

对于任何希望充分发挥 AI 辅助编码潜力的开发者来说，Claude Code UI 都是必备工具，它提供了灵活且强大的界面，随时随地为您效力。

原创文章: 查看原文