d7bdf3b9d7
Split the single 713kB JS bundle into separate chunks: - react-vendor: React core (~192kB) - markdown: react-markdown + remark/rehype + highlight.js (~476kB) - icons: lucide-react (~6kB) - ui: Radix UI components - index: app code (~37kB) Improves caching (vendor chunks change less often) and eliminates the Vite chunk size warning.
🦞 ClawChat
A sleek, dark-themed webchat UI for OpenClaw — monitor sessions, stream responses, and inspect tool calls in real-time.
✨ 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/clawchat.git
cd clawchat
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
🔗 Links
- OpenClaw — the AI agent platform ClawChat connects to