OpenClaw Starter Kit
An enhanced workspace for OpenClaw with a custom webchat UI, persistent session memory, and development skills.
What You Get
- mychat2 — Custom webchat UI replacing the default OpenClaw control panel
- Multiple chat sessions with sidebar navigation
- Telegram group topics as sessions (bidirectional)
- Persistent message history (survives gateway restarts)
- Auto-save & auto-refresh when context gets full (no more lost work)
- Voice input (Whisper), audio playback, file attachments
- Session memory — each session saves its own state to files
- Skills — Reusable AI agent capabilities
project-dev— Structured dev workflow: brainstorm → plan → implement → reviewsession-memory— Persistent memory across compactions and restartsui-ux-pro-max— Design system generator (67 styles, 96 palettes)brand-studio— Brand identity creationbrowser-qa— Automated browser testing with evidencename-forge— Product/company name generation + validation- And more (see
skills/directory)
- chat-db — Local SQLite server for message persistence
- Scripts — Gateway patching, coding agent tracker, session checkpoints
Prerequisites
- OpenClaw installed and running (
npm install -g openclaw) - Node.js 20+
- At least one AI provider API key (Anthropic, OpenAI, etc.) configured in OpenClaw
Quick Start
# 1. Clone into your OpenClaw workspace
cd ~/.openclaw/workspace
git clone https://github.com/mlamla123/openclaw-starter-kit.git .
# 2. Run setup
bash setup.sh
# 3. Open mychat2
open http://127.0.0.1:18789/mychat2.htm
That's it. You should see the enhanced webchat UI.
Manual Installation
If you prefer to install step by step:
Step 1: Copy files to workspace
cd ~/.openclaw/workspace
# Skills are auto-loaded from workspace/skills/ — they're already in place after clone
Step 2: Patch the gateway
bash scripts/patch-gateway.sh
⚠️ Your OpenClaw agent may warn about security risks. See Gateway Patching — Security below for a full explanation.
Step 3: Start chat-db (message persistence)
cd chat-db
npm install
node server.js &
To run chat-db as a persistent service (macOS):
cp scripts/com.openclaw.chat-db.plist ~/Library/LaunchAgents/
# Edit the plist to match your paths, then:
launchctl load ~/Library/LaunchAgents/com.openclaw.chat-db.plist
Step 4: Open mychat2
Navigate to http://127.0.0.1:18789/mychat2.htm
API Keys
| Key | What it does | Required? |
|---|---|---|
| Chat model key (Anthropic/OpenAI/etc.) | Powers AI conversations | ✅ Yes — at least one |
OPENAI_API_KEY | Voice-to-text (Whisper) for mic button | Optional |
ANTHROPIC_API_KEY | Claude Code for background coding | Optional |
ELEVENLABS_API_KEY | Text-to-speech voice output | Optional |
Configure keys in ~/.openclaw/openclaw.json under env, or set as environment variables.
Gateway Patching — Security
What does the patch do?
The patch-gateway.sh script makes small modifications to the OpenClaw gateway so it can serve mychat2. Here's exactly what it changes and why:
| Change | What | Why | Risk |
|---|---|---|---|
Add .htm extension | Adds .htm to the static file whitelist | Gateway only serves known extensions; .htm isn't included by default | None — just adds a file type |
| Content-Type mapping | Maps .htm → text/html | So the browser renders it as HTML | None |
unsafe-inline in CSP | Adds 'unsafe-inline' to script-src | mychat2 is a single-file app with inline <script> — strict CSP blocks it | Low — see below |
connect-src localhost | Allows connections to localhost:18787 | mychat2 needs to reach chat-db for message persistence | None — localhost only |
| Copy mychat2.htm | Copies the file into gateway's static directory | So it's served at /mychat2.htm | None |
Why your agent warns you
OpenClaw agents flag sed edits to system files as potentially dangerous — and that's a good instinct! The patch modifies gateway-cli-*.js (a core gateway file). Your agent is being cautious.
To proceed: Tell your agent it's safe to run, or run bash scripts/patch-gateway.sh manually in a terminal (outside the agent).
About unsafe-inline
This is the only change with any real security implication. Here's why it's fine for this use case:
- ✅ The gateway runs on localhost only (127.0.0.1:18789) — not exposed to the internet
- ✅ No untrusted third-party content is loaded
- ✅ The CSP change only affects YOUR local gateway
- ✅ An XSS attack would require local machine access — at which point the attacker already has full control
Why we need it: mychat2 is a single HTML file with inline JavaScript for simplicity. The proper alternative would be splitting JS into a separate file with CSP nonces, but that adds complexity for a local-only tool.
If you're uncomfortable: You can skip the patch entirely and use the default OpenClaw control UI — you'll just miss the enhanced features.
How to undo
# Reinstall OpenClaw to restore original gateway files
npm install -g openclaw
# Remove auto-patcher if installed
launchctl unload ~/Library/LaunchAgents/com.openclaw.patch-gateway.plist 2>/dev/null
rm -f ~/Library/LaunchAgents/com.openclaw.patch-gateway.plist
Auto-patching after updates
When you update OpenClaw (npm update -g openclaw), gateway files get overwritten. The setup script installs a launchd watcher that re-applies the patch automatically. If something breaks, just run:
bash scripts/patch-gateway.sh
Telegram Topics Integration
If you use Telegram with OpenClaw, your group forum topics automatically appear as separate sessions in mychat2.
Setup: Configure Telegram in your OpenClaw config as normal. Forum topics sync to mychat2 after the first message in each topic.
- Topic 1 is always named "General"
- Other topics show as "Topic <id>" — rename them in the sidebar
- Messages are bidirectional: type in mychat2 → sends to Telegram topic
- Each topic gets its own session memory (
memory/sessions/tg-topic-<id>/)
Included Skills
| Skill | Description |
|---|---|
session-memory | Persistent memory across context compactions and restarts |
project-dev | Structured dev: brainstorm → plan → implement (Claude Code) → review |
ui-ux-pro-max | Design system generator (colors, fonts, layouts, 13 framework stacks) |
brand-studio | Full brand identity creation (strategy, naming, logos, style guides) |
browser-qa | Automated browser QA testing with screenshot evidence |
name-forge | Product/company naming with domain, trademark, and social checks |
cloudflare | Manage Workers, KV, DNS, Tunnels, R2 via API |
voice-agent | OpenAI Realtime speech-to-speech voice interface |
Skills are loaded automatically by OpenClaw from the skills/ directory.
Project Structure
├── mychat2.htm # Enhanced webchat UI
├── setup.sh # One-command installer
├── chat-db/
│ ├── server.js # SQLite message persistence server
│ └── package.json
├── skills/ # AI agent skills (auto-loaded by OpenClaw)
│ ├── session-memory/
│ ├── project-dev/
│ ├── ui-ux-pro-max/
│ ├── brand-studio/
│ ├── browser-qa/
│ ├── name-forge/
│ └── ...
├── scripts/
│ ├── patch-gateway.sh # Gateway patcher (serves mychat2)
│ ├── coding-agent-tracker.py
│ └── com.openclaw.chat-db.plist
└── README.md
Troubleshooting
mychat2 shows a blank page:
- Run
bash scripts/patch-gateway.shand refresh - Check gateway is running:
openclaw gateway status
Messages disappear on restart:
- Make sure chat-db is running:
curl http://localhost:18787/api/sessions - If empty, start it:
cd chat-db && node server.js &
Agent warns about security when patching:
- Expected — see Gateway Patching — Security
- Run the patch script manually in a terminal, or tell your agent to allow it
Telegram topics not showing:
- Telegram bot must be configured in OpenClaw
- Send a message in the topic first (sessions create on first message)
- Refresh mychat2
License
MIT
No comments yet.