LanYun Coding UI - A web-based UI for Claude Code CLI
npm install lanyuncodinguiClaude Code CLI 的现代化 Web 界面


为 Claude Code(Anthropic 官方的 AI 辅助编程 CLI)提供的现代化 Web 界面。它让您可以通过直观的图形界面管理项目、查看会话历史、编辑文件,以及与 Claude 进行交互,无论您身在何处。
> 🙏 致敬:本项目基于 claudecodeui 改造而来。我们站在巨人的肩膀上,在原项目的优秀基础上进行了移动端适配、UI 优化和功能增强。感谢原作者的开源贡献!
桌面视图![]() 主界面展示项目概览和聊天功能 | 移动端体验![]() 响应式移动设计,支持触摸导航 |
无需安装,直接运行:
``bash`
npx lanyuncodingui
您的默认浏览器将自动打开 LanYun Coding UI 界面。
如果您想在任何地方使用,可以全局安装:
`bash`
npm install -g lanyuncodingui
lanyuncodingui
> 💡 提示:如果尚未安装 Claude Code CLI,我们会自动为您安装。
- Node.js v18 或更高版本
- Claude Code CLI - 将自动检测并安装
- 现代浏览器 - Chrome、Firefox、Safari、Edge 等
> 🪟 Windows 用户:暂时不支持windows系统,敬请期待
1. 启动应用 - 运行 lanyuncodingui 后,浏览器会自动打开
2. 配置工具 - 点击侧边栏的齿轮图标,选择您需要的工具
3. 开始对话 - 在聊天界面输入您的需求,Claude 会协助您编程
> 💡 建议:从基本工具开始,根据需要逐步启用更多功能
#### 项目管理
UI 自动从 ~/.claude/projects/ 发现 Claude Code 项目并提供:
- 可视化项目浏览器 - 所有可用项目及其元数据和会话计数
- 项目操作 - 重命名、删除和组织项目
- 智能导航 - 快速访问最近的项目和会话
#### 聊天界面
- 使用响应式聊天或 Claude Code CLI - 您可以使用适配的聊天界面,或使用 shell 按钮连接到 Claude Code CLI。
- 实时通信 - 通过 WebSocket 连接流式传输 Claude 的响应
- 会话管理 - 恢复之前的对话或开始新的会话
- 消息历史 - 完整的对话历史,包括时间戳和元数据
- 多格式支持 - 文本、代码块和文件引用
#### 文件浏览器和编辑器
- 交互式文件树 - 使用展开/折叠导航浏览项目结构
- 实时文件编辑 - 直接在界面中读取、修改和保存文件
- 语法高亮 - 支持多种编程语言
- 文件操作 - 创建、重命名、删除文件和目录
#### Git 浏览器
#### 会话管理
- 会话持久化 - 所有对话自动保存
- 会话组织 - 按项目和时间戳分组会话
- 会话操作 - 重命名、删除和导出对话历史
- 跨设备同步 - 从任何设备访问会话
``
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Web 前端 │ │ Node.js 后端 │ │ Claude Code │
│ React + Vite │◄──►│ Express + WS │◄──►│ CLI │
│ Tailwind CSS │ │ SQLite DB │ │ (子进程) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
↑ ↑ ↑
└────────────────────────┴──────────────────────┘
WebSocket 实时通信
#### 前端
- React 18 - 现代化的组件化开发
- Vite - 极速的开发服务器和构建工具
- Tailwind CSS - 实用优先的 CSS 框架
- CodeMirror 6 - 强大的代码编辑器
- WebSocket - 实时双向通信
#### 后端
- Express.js - 轻量级 Web 服务框架
- WebSocket (ws) - 原生 WebSocket 支持
- SQLite - 轻量级数据库存储
- Child Process - Claude CLI 进程管理
- Chokidar - 文件系统监控
我们欢迎所有形式的贡献!无论是提交 Bug 报告、功能建议还是代码贡献。
`bash克隆仓库
git clone https://github.com/LanyunAI-org/lanyuncodingUI.git
cd ccui
$3
- 代码通过所有测试
- 遵循项目的代码规范
- 更新相关文档
📦 发布流程
维护者发布新版本的步骤:
`bash
1. 提交所有更改
git add .
git commit -m "您的提交信息"2. 更新版本号
npm version patch # 或 minor/major3. 发布到 npm
npm publish4. 推送代码和标签
git push origin main --tags
``- Claude Code - Anthropic 的官方 AI 编程助手
- claudecodeui - 本项目的基础,感谢原作者的开源精神
- 所有贡献者和用户的支持与反馈
---
如果这个项目对您有帮助,请给我们一个 ⭐️
Made with ❤️ by LanYun Team