24c7d00c23
- Change lang='fr' to lang='en' (open-source project default) - Change title from 'Marlbot Chat' to 'PinchChat' - Change favicon emoji from 🤖 to 🦞 (project mascot) - Add meta description, theme-color, and Open Graph tags
🦞 PinchChat
A sleek, dark-themed webchat UI for OpenClaw — monitor sessions, stream responses, and inspect tool calls in real-time.
🖼️ Screenshot coming soon — contributions welcome!
✨ Features
- 🌑 Dark neon theme — easy on the eyes, built with Tailwind CSS v4
- 📊 Token progress bars — track token usage per session in real-time
- 🔧 Tool call badges — expandable panels with syntax-highlighted JSON
- 📋 Session sidebar — browse active sessions with live activity indicators
- 📝 Markdown rendering — full GFM support with code highlighting
- 📎 File upload — attach files to your messages
- ⚡ Streaming responses — watch the AI think in real-time
🚀 Quick Start
Prerequisites
- Node.js 18+
- OpenClaw gateway running and accessible
Installation
git clone https://github.com/MarlBurroW/pinchchat.git
cd pinchchat
npm install
cp .env.example .env
Edit .env with your gateway details:
VITE_GATEWAY_WS_URL=ws://localhost:18789
VITE_GATEWAY_TOKEN=your-gateway-token-here
Start the dev server:
npm run dev
Production
npm run build
npx vite preview
Or serve the dist/ folder with nginx, Caddy, or any static file server.
⚙️ Configuration
| Variable | Description | Default |
|---|---|---|
VITE_GATEWAY_WS_URL |
WebSocket URL of the OpenClaw gateway | ws://<hostname>:18789 |
VITE_GATEWAY_TOKEN |
Authentication token for the gateway | (required) |
🛠 Tech Stack
- React 19
- Vite 7
- Tailwind CSS v4
- Radix UI primitives
- highlight.js via rehype-highlight
- Lucide React icons
- react-markdown with GFM
📄 License
MIT © Nicolas Varrot
🤝 Contributing
Contributions are welcome! See CONTRIBUTING.md for guidelines.
🔗 Links
- OpenClaw — the AI agent platform PinchChat connects to