feat: xterm.js + node-pty architecture for Claude CLI web terminal
Complete rewrite from tmux + JSONL parsing to a clean PTY-based approach. The proxy spawns Claude CLI in a pseudo-terminal via node-pty and relays terminal I/O as binary WebSocket frames to the simple-chat backend, which forwards them to the browser where xterm.js renders a full terminal. - node-pty PTY manager with 50KB replay buffer per session - Binary frame protocol with chatId multiplexing - WebSocket client with auto-reconnection and heartbeat - Directory listing and session listing for the web UI - README with setup instructions Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
118
README.md
Normal file
118
README.md
Normal file
@ -0,0 +1,118 @@
|
||||
# Claude CLI Proxy
|
||||
|
||||
Локальное приложение, которое позволяет управлять [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) через веб-браузер. Терминал Claude Code отображается прямо в браузере с помощью xterm.js — полноценный терминал с цветами, автокомплитом и интерактивным UI.
|
||||
|
||||
Работает в связке с [simple-chat](https://git.vigdorov.ru/vigdorov/simple-chat) — веб-приложением для чатов с AI.
|
||||
|
||||
## Как это работает
|
||||
|
||||
```
|
||||
Браузер (xterm.js) ←──WebSocket──→ simple-chat (backend) ←──WebSocket──→ claude-cli-proxy (local)
|
||||
│
|
||||
node-pty
|
||||
│
|
||||
Claude Code CLI
|
||||
```
|
||||
|
||||
1. **claude-cli-proxy** запускается на вашем компьютере рядом с Claude Code CLI
|
||||
2. Прокси подключается к бэкенду simple-chat через WebSocket
|
||||
3. При создании чата в веб-интерфейсе, прокси запускает Claude CLI в псевдо-терминале (PTY)
|
||||
4. Ввод/вывод терминала транслируется через WebSocket в браузер
|
||||
5. Браузер отображает полноценный терминал через xterm.js
|
||||
|
||||
## Требования
|
||||
|
||||
- **Node.js** 18+ (рекомендуется 20+)
|
||||
- **Claude Code CLI** установлен и доступен в PATH (`claude` команда)
|
||||
- Работающий инстанс **simple-chat** (бэкенд + фронтенд)
|
||||
|
||||
## Установка
|
||||
|
||||
### 1. Настройте simple-chat
|
||||
|
||||
Прокси работает только вместе с simple-chat. Убедитесь что simple-chat бэкенд запущен.
|
||||
|
||||
### 2. Создайте устройство в simple-chat
|
||||
|
||||
Откройте simple-chat в браузере, перейдите в **Настройки → Устройство** и создайте новое устройство. Скопируйте **токен** — он понадобится для подключения прокси.
|
||||
|
||||
### 3. Установите зависимости
|
||||
|
||||
```bash
|
||||
git clone https://git.vigdorov.ru/vigdorov/claude-cli-proxy.git
|
||||
cd claude-cli-proxy
|
||||
npm install
|
||||
```
|
||||
|
||||
### 4. Создайте файл `.env`
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Отредактируйте `.env`:
|
||||
|
||||
```env
|
||||
# Токен устройства из настроек simple-chat
|
||||
PROXY_TOKEN=ваш_токен_из_шага_2
|
||||
|
||||
# URL бэкенда simple-chat
|
||||
# Для локальной разработки:
|
||||
SERVER_URL=ws://localhost:3000/ws/agent-proxy
|
||||
# Для продакшена:
|
||||
# SERVER_URL=wss://ai-chat.vigdorov.ru/ws/agent-proxy
|
||||
```
|
||||
|
||||
### 5. Запустите
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
В консоли должно появиться:
|
||||
```
|
||||
[proxy] Starting claude-cli-proxy (xterm mode)...
|
||||
[proxy] Running. Press Ctrl+C to stop.
|
||||
[WS] Connected to server
|
||||
[proxy] Connected to server, waiting for sync...
|
||||
```
|
||||
|
||||
## Использование
|
||||
|
||||
1. Откройте simple-chat в браузере
|
||||
2. В сайдбаре нажмите **Claude Agent**
|
||||
3. Нажмите **+** чтобы создать новый чат
|
||||
4. Выберите рабочую директорию (проект)
|
||||
5. Терминал Claude Code откроется прямо в браузере
|
||||
|
||||
### Мобильные устройства
|
||||
|
||||
На мобиле и планшете внизу экрана отображаются кнопки управления:
|
||||
|
||||
- **Горячие клавиши:** Esc, Tab, ↑, ↓, y, n, Enter, Ctrl+C, Ctrl+O, ⇧Tab
|
||||
- **Быстрые команды:** /compact, /clear, /model, /help
|
||||
|
||||
На десктопе кнопки скрыты — для показа нажмите иконку клавиатуры в правом нижнем углу.
|
||||
|
||||
## Конфигурация
|
||||
|
||||
| Переменная | Описание | По умолчанию |
|
||||
|-----------|----------|--------------|
|
||||
| `PROXY_TOKEN` | Токен устройства из настроек simple-chat | — (обязательно) |
|
||||
| `SERVER_URL` | WebSocket URL бэкенда | `wss://ai-chat.vigdorov.ru/ws/agent-proxy` |
|
||||
|
||||
Файл `.env` можно также разместить в `~/.claude-proxy/.env` — он будет загружен первым.
|
||||
|
||||
## Безопасность
|
||||
|
||||
- Прокси подключается к бэкенду **исходящим** соединением (не открывает порты)
|
||||
- Аутентификация по токену устройства
|
||||
- Терминальные данные передаются через бинарные WebSocket-фреймы
|
||||
- При использовании через интернет рекомендуется WSS (TLS)
|
||||
|
||||
## Технологии
|
||||
|
||||
- **Node.js + TypeScript** — runtime
|
||||
- **node-pty** — псевдо-терминал для запуска Claude CLI
|
||||
- **ws** — WebSocket клиент
|
||||
- **xterm.js** — терминал в браузере (на стороне simple-chat)
|
||||
Reference in New Issue
Block a user