基於 Web 的 Claude CLI 介面

项目 claude-code-webui 是由用户 sugyan 在 GitHub 上维护的一个开源工具。它的主要功能是:

项目简介

claude-code-webui 是一个 基于 Web 的用户界面,用于替代纯命令行环境,使得与 Claude Code CLI 的交互更加直观和现代化

  • 核心目的:提供一个聊天式的开发体验,取代传统的终端操作,让用户可以在浏览器中输入代码、查看结果,并支持多端访问(包括移动端)

为什么使用它?

特性命令行 (CLI)Web 界面
访问设备通常局限于桌面任意支持浏览器的设备(手机、平板均可)
信息呈现纯文本输出富格式展示,界面友好
项目切换需手动切换目录可视化点击操作选择项目

如表所示,这种方式带来更直观、便捷的 coding 体验

快速上手指南

  • 安装方式(推荐)
    使用 npm 全局安装,并通过启动命令打开浏览器界面:npm install -g claude-code-webui claude-code-webui默认地址为 http://localhost:8080
  • 二进制版本
    支持 macOS ARM64 等平台,下载对应版本即可运行,方法类似:curl -LO ... # 获取二进制 chmod +x claude-code-webui-macos-arm64 ./claude-code-webui-macos-arm64
  • 开发模式
    支持 Deno 或 Node.js 环境:# 后端 cd backend && deno task dev # 或者 npm run dev # 前端(新终端) cd frontend && npm run dev然后打开 http://localhost:3000 来访问

安全考虑

  • 仅在本地运行,默认绑定 localhost,不推荐直接在公网暴露
  • 没有内置身份验证功能,需谨慎网络设置,防止未经授权访问

适用人群

如果你已经在使用 Claude CLI 工具,claude-code-webui 可以让操作体验飞跃升级:

  • 更好的 UI/UX:消息格式丰富且界面简洁。
  • 适配移动端:方便离开桌面的临时操作。
  • 本地安全:所有输入输出都发生在本地,除 Claude CLI 的 API 外,不会有额外的数据外传。

总结

claude-code-webui 是一个让与 Claude Code 进行交互更直观、更友好、更现代的轻量级 Web 前端。它易安装、多平台支持、UI 体验上佳,非常适合希望摆脱命令行、使用图形界面的开发者。

Github:https://github.com/sugyan/claude-code-webui

油管:https://youtu.be/QOgHTExu-_A