cc-webui

极简 Claude Code Web UI — 薄包装层，让非技术用户也能轻松使用 Claude Code。

安装

npm install -g @fenton/ccwebui

使用

# 启动（默认端口 3000，自动打开浏览器）
ccwebui

# 指定端口
ccwebui -p 8080

# 查看帮助
ccwebui --help

启动后如果默认端口被占用，会自动递增寻找可用端口。

本地开发

git clone <repo-url> cc-webui
cd cc-webui
npm install

# 启动
npm start

操作说明

1. 在左侧栏输入工作目录路径，点击"新建会话"
2. 在底部输入框发送消息
3. 当 Claude 需要执行命令或编辑文件时，会弹出权限确认对话框
4. 点击历史会话可恢复之前的对话
5. 按 Enter 发送，Shift+Enter 换行

技术栈

• 运行时: Node.js >= 20
• 后端: Node.js 原生 http + WebSocket (ws)
• 前端: 纯 HTML + CSS + Vanilla JS
• SDK: @anthropic-ai/claude-agent-sdk (>= 0.2.0)

依赖

仅 2 个运行时依赖：

• @anthropic-ai/claude-agent-sdk — 官方 Claude Code Agent SDK
• ws — 轻量 WebSocket 库

项目结构

cc-webui/
├── bin/
│   └── ccwebui.js         # CLI 入口
├── server/
│   ├── index.js           # HTTP + WebSocket 服务
│   ├── claude-service.js  # Agent SDK 封装
│   └── ws-handler.js      # WebSocket 消息分发
├── frontend/
│   ├── index.html         # SPA 入口
│   ├── style.css          # 样式
│   └── app.js             # WebSocket 客户端 + UI
└── package.json

许可

MIT