厉害！Claude Code Ul 可视化工具来了！！ --知识铺
关注公众号，AI 技术干货及时送达_↓_
大家好，我是R哥。
之前分享了一个 Claude Code 的可视化工具 Claudia：
但是感觉 Claudia 并不是很好用，虽然功能很多，但安装非常麻烦，而且用起来非常卡，不久就被我弃用了。
最近我又发现了一款更好用的 Claude Code 的可视化工具：Claude Code Ul，也是第三方出品的，这款工具安装超简单，界面清爽，交互体验更好。
开源地址：https://github.com/siteboon/claudecodeui
这是一个适用于 Claude Code 和 Cursor CLI 的桌面和移动端界面，你可以本地或远程使用，查看当前项目和会话，并从任何地方对它们进行修改。
也就是说，有了它，无论你在哪里，不论是电脑/平板/手机，都能使用 Claude Code 和 Cursor CLI 进行远程干活。
相关介绍和安装教程参考：
更多 AI 编程教程，可关注我的公众号「AI技术宅」阅读。
主要特性
1、响应式设计
在桌面、平板和手机端都能无缝使用，因此你也可以在移动端使用 Claude Code。
2、交互式聊天界面
内置聊天界面，可以与 Claude Code 或 Cursor 流畅沟通。
3、集成 Shell 终端
内置终端功能，可直接访问 Claude Code 或 Cursor CLI。
4、文件管理器
交互式文件树，支持语法高亮和实时编辑。
5、Git 管理器
可以查看、暂存并提交修改，还能切换分支。
6、会话管理
支持恢复对话、管理多个会话以及跟踪历史记录。
7、模型兼容性
支持 Claude Sonnet 4、Opus 4.1 和 GPT-5。
安装运行
Claude Code UI 的安装和运行超简单，只需要提前安装好 Node.js v20+，以及 Claude Code CLI / Cursor CLI，然后再执行下在的安装步骤。
1、克隆仓库
2、安装依赖
cd claudecodeui
npm install
3、配置环境
cp .env.example .env
在 .env 环境文件中可以自行修改端口等配置，不修改也可以使用默认的即可。
4、启动应用
npm run dev
然后在浏览器打开页面：
http://localhost:5173/
首次进入，需要配置一个用户名和密码，点击创建账户就完事了。
功能预览
首页
页面布局介绍：
-
左侧展示的是项目和会话列表；
-
上面是聊天/Shell/文件/源码控制等功能项；
-
中间是 AI 助理选择（Claude/Cursor）；
-
下面是模式选择及命令行输入框；
会话管理
点击项目任意会话，可恢复到当前会话：
另外，还能新建、删除会话，修改会话名称等。
工具设置
点击左下角的工具设置进入设置页面，可以设置允许的工具及管理 MCP 等：
暗黑模式
在设置中还可以切换暗黑模式：
Shell
在页面顶部点击 Shell 选项可进入终端模式：
image-20250826104955373
也就是说，即支持 Claude Code 可视化使用，也支持原始终端命令使用。
文件
在页面顶部点击 Files 选项可进入文件模式：
点击文件，可以预览编辑、保存、下载文件。
源码控制
在页面顶部点击 Source Control 选项可进入源码控制模式：
在源码控制这里可以进行源码提交，查看历史提交信息等。
总结
总结一下这次体验新工具 Claude Code UI 的感受，两个字：真香！
相较于我之前使用的 Claudia，那种功能一堆但跑不动的体验实在让人提不起劲，安装繁琐、运行卡顿，搞得我直接弃坑。
而 Claude Code UI 简直就是快、准、狠，体验感拉满，几条命令就搞定，界面清爽、响应迅速，移动端和桌面端切换无缝，完全打破了我对 Claude Code 可视化工具的偏见。
只需要加个内网映射，弄个域名，哪怕你不在工位上，在地铁上，在吃饭，也能在手机上轻松控制 Claude Code 和 Cursor CLI，终于可以实现葛优躺着干活的梦想。
话又说回来，有了这玩意，是不是加班写代码、改 bug 也更轻松了？
千万别让领导知道了。。。
未完待续，接下来会继续分享下 AI 编程的心得体验、高级使用技巧，公众号持续分享 AI 实战干货，关注「AI技术宅」公众号和我一起学 AI。
版权声明： 本文系公众号 “AI技术宅” 原创，转载、引用本文内容请注明出处，抄袭、洗稿一律投诉侵权，后果自负，并保留追究其法律责任的权利。
< END >
推荐阅读：
超越 Claude Code！SuperClaude 横空出世！
更多 ↓↓↓ 关注公众号 ✔ 标星⭐ 哦
- 原文作者：知识铺
- 原文链接：https://index.zshipu.com/ai002/post/20251029/%E5%8E%89%E5%AE%B3Claude-Code-Ul-%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7%E6%9D%A5%E4%BA%86/
- 版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。
- 免责声明：本页面内容均来源于站内编辑发布，部分信息来源互联网，并不意味着本站赞同其观点或者证实其内容的真实性，如涉及版权等问题，请立即联系客服进行更改或删除，保证您的合法权益。转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com
