zylos-ai Web Console (C4 Built-in Channel)
Default communication channel - works without any external service.
Purpose
Allows users to communicate with Claude even without Telegram/Lark/Discord. This is the baseline, always-available interface.
Quick Start
# Install dependencies
cd ~/zylos/.claude/skills/web-console
npm install
# Start server (default port 3456)
node scripts/server.js
# Or with PM2
pm2 start scripts/server.js --name web-console
Access
Local only: http://127.0.0.1:3456
Server binds to 127.0.0.1 by default for security.
Architecture
Browser ──► Web Console Server ──► C4 Bridge ──► Claude
│
▼
SQLite (c4.db)
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
/api/status |
GET | Get Claude's current status |
/api/conversations/recent |
GET | Get recent conversation history |
/api/upload |
POST | Upload one attachment for the next message |
/api/send |
POST | Send message to Claude |
/api/media/:messageId |
GET | Download/render an outbound media message |
/api/poll?since_id=N |
GET | Poll for new messages |
/api/health |
GET | Server health check |
Files
~/zylos/.claude/skills/web-console/
├── SKILL.md
├── package.json
├── scripts/
│ ├── server.js # Express API server
│ └── send.js # CLI message sender
└── public/
├── index.html # Chat UI
├── styles.css # Styling
└── app.js # Frontend logic
Environment Variables
| Variable | Default | Description |
|---|---|---|
WEB_CONSOLE_PORT |
3456 | Server port |
ZYLOS_WEB_PASSWORD |
(empty) | Set to enable password protection (also reads WEB_CONSOLE_PASSWORD as fallback) |
WEB_CONSOLE_BIND |
127.0.0.1 | Bind address |
ZYLOS_DIR |
~/zylos | Data directory |
WEB_CONSOLE_MAX_UPLOAD_MB |
20 | Max size per uploaded attachment |
Authentication
By default, no password is required (suitable for local access).
To enable password protection (recommended when exposing externally):
- Set
ZYLOS_WEB_PASSWORDin~/zylos/.env - Restart the web-console service
Features
- Real-time status indicator (busy/idle/offline)
- Message polling every 2 seconds
- Auto-resizing input
- Browser file/image upload via attach button, drag/drop, and paste
- Inline rendering for image replies sent as
[MEDIA:image]/absolute/path - Download chips for file replies sent as
[MEDIA:file]/absolute/path - Mobile-friendly responsive design
- Dark theme
Attachments
Browser uploads are stored under ~/zylos/web-console/media/ and delivered to the agent as text annotations:
[attachment:image /Users/howard/zylos/web-console/media/wc-...png name="screenshot.png" 142KB]
[attachment:file /Users/howard/zylos/web-console/media/wc-...pdf name="report.pdf" 1.2MB]
Agent replies can include a single media row using the same C4 convention as other channels:
node ~/zylos/.claude/skills/comm-bridge/scripts/c4-send.js web-console console "[MEDIA:image]/absolute/path/to/image.png"
node ~/zylos/.claude/skills/comm-bridge/scripts/c4-send.js web-console console "[MEDIA:file]/absolute/path/to/report.pdf"
The browser only requests media by C4 message id. The server rechecks the row is an outbound web-console console message, resolves the target with realpath, and serves only paths under ZYLOS_DIR or /tmp.