OpenClaw Studio

OpenClaw Studio — visual management UI for your OpenClaw gateway. Install with a single command.

OpenClaw Studio is a self-hosted web dashboard and studio-style IDE for managing your OpenClaw gateway — described by the community as 'the Visual Studio Code for your AI agent.' Built by @grp06, it fills the critical gap between OpenClaw's powerful but opaque command-line operation and the need for visual management, especially on VPS and remote deployments where SSH-only access is a pain point. The dashboard connects to your OpenClaw gateway over WebSocket and provides real-time chat with tool streaming (see messages, reasoning traces, tool calls, and file edits as they happen), a workspace browser and code editor for inspecting and editing agent files without SSH, a cron and long-running job panel showing which scheduled jobs ran and what they did, sub-agent windows for monitoring background agents separately, and a memory editor for MEMORY.md, SOUL.md, and daily files from the browser. It runs as a Node/React app that you host alongside your gateway. The architecture uses two connections: Browser→Studio (HTTP + SSE for API routes and streaming) and Studio→Gateway (a server-owned WebSocket connection). This means 'ws://localhost:18789' refers to the gateway on the Studio host, not the user's device. Installation is a single command (npx openclaw-studio@latest) with support for three deployment scenarios: Gateway and Studio on the same machine, Gateway in the cloud with Studio local, or both in the cloud with remote access via Tailscale or SSH tunnel. With ~398 weekly downloads and growing, OpenClaw Studio has resonated strongly with the community — particularly VPS users who need overnight job observability and remote cockpit access. The project stores settings at ~/.openclaw/openclaw-studio/settings.json and uses a local SQLite runtime database. When exposed beyond loopback, STUDIO_ACCESS_TOKEN is required for security. Ideal for anyone running OpenClaw on a VPS or home server who wants visual management without terminal-only workflows.

Tags: ui, dashboard, management

Use Cases

  • Visual management dashboard for VPS-hosted OpenClaw agents
  • Remote cockpit for monitoring overnight cron jobs and long-running agent tasks
  • Workspace file editor for MEMORY.md, SOUL.md, and agent configuration without SSH
  • Real-time debugging of agent tool calls and reasoning traces during development
  • Multi-agent monitoring with separate sub-agent windows
  • Home server management — visual control for OpenClaw on Mac mini, NUC, or Raspberry Pi

Tips

  • Use Tailscale Serve for the easiest secure remote access: tailscale serve --yes --bg --https 443 http://127.0.0.1:3000
  • Run npm run studio:setup from a source checkout to pre-configure gateway URL and token without opening the UI
  • The cron/job panel is invaluable for debugging overnight agent work — check it before reviewing logs
  • Use sub-agent windows to monitor parallel agent work without digging through mixed logs
  • For VPS deployments, bind Studio to localhost and use Tailscale or SSH tunnel for access
  • Check the GitHub repo for deployment guides matching your specific setup (local, cloud, or mixed)
  • Join the OpenClaw Studio Discord for support: discord.gg/EFkFHbZw

Known Issues & Gotchas

  • Studio is a standalone app (npx openclaw-studio), NOT an OpenClaw plugin — don't try 'openclaw plugins install'
  • When Studio and Gateway are on the same machine, keep Upstream URL as ws://localhost:18789 — even on a cloud VM
  • STUDIO_ACCESS_TOKEN is REQUIRED when Studio is accessible beyond loopback — without it, anyone with the URL has full access
  • To access from a browser: use /?access_token=... once from each new browser to set the Studio cookie
  • If running remotely via SSH and terminal says 'Open http://localhost:3000' — that's the remote machine, not your laptop
  • Avoid serving Studio behind a subpath like /studio unless you configure basePath and rebuild
  • Settings are stored at ~/.openclaw/openclaw-studio/settings.json — separate from OpenClaw's config
  • The gateway token for Studio is NOT the same as gateway.auth.mode trusted-proxy — Studio always needs a direct token

Alternatives

  • OpenClaw Control UI (built-in)
  • SSH terminal access
  • OpenClawChat

Community Feedback

openclaw-studio was built to fix that. It is a studio-style web IDE and management dashboard for OpenClaw, designed specifically to be self-hosted next to your existing gateway.

— Reddit r/OpenClawInstall

For those who use OpenClaw, I built a free dashboard for managing OpenClaw agents remotely — no more SSH-ing into machines. Live status for all agents.

— Reddit r/Daytrading

RIP managing OpenClaw agents from the command line. A developer just built OpenClaw Studio — a clean web dashboard that puts your entire agent management in one place.

— Facebook Tech Titans

OpenClaw Studio: Open-Source TypeScript Dashboard for managing your AI agents. Connect your Gateway, manage agents, and ship faster.

— LinkedIn

Frequently Asked Questions

Is OpenClaw Studio an official OpenClaw project?

No. It's a community project built by @grp06. It's not affiliated with the core OpenClaw team, but it's well-received by the community and listed in awesome-openclaw. The developer is active in the OpenClaw Discord.

Do I need to install this as an OpenClaw plugin?

No. OpenClaw Studio is a standalone web application. Run it with 'npx openclaw-studio@latest' — it connects to your gateway via WebSocket, not through the plugin system. Think of it as a separate management tool, not an extension.

How do I secure Studio when hosting it publicly?

Set the STUDIO_ACCESS_TOKEN environment variable. When Studio is accessible beyond loopback, this token is required. Visit /?access_token=YOUR_TOKEN once from each browser to set a cookie. For best security, use Tailscale instead of exposing Studio publicly.

Can I use Studio with multiple OpenClaw gateways?

Each Studio instance connects to one gateway. For multiple gateways, run separate Studio instances on different ports, or switch the upstream URL in Studio settings. There's no built-in multi-gateway view yet.

What's the difference between Studio and the built-in Control UI?

The built-in Control UI provides basic chat and agent management. Studio adds a workspace file browser/editor, cron job panel, sub-agent monitoring windows, memory editor, and real-time tool call streaming. Studio is the full IDE experience.

Why does Studio need Tailscale?

Tailscale is recommended but not required. It provides the easiest way to securely access Studio from outside your local network without exposing ports to the internet. SSH tunnels work too. On a local network, no extra tooling is needed.

Configuration Examples

Local setup (Gateway + Studio on same machine)

npx -y openclaw-studio@latest
cd openclaw-studio
npm run dev

# Open http://localhost:3000
# Set Upstream URL: ws://localhost:18789
# Set Upstream Token: $(openclaw config get gateway.auth.token)

Cloud Gateway + Local Studio (via Tailscale)

# On your cloud VPS (gateway host):
tailscale serve --yes --bg --https 443 http://127.0.0.1:18789

# On your laptop (Studio):
npx -y openclaw-studio@latest
cd openclaw-studio && npm run dev

# In Studio settings:
# Upstream URL: wss://<your-vps>.ts.net
# Upstream Token: your-gateway-token

Both in the cloud (always-on VPS)

# On your VPS:
npx -y openclaw-studio@latest
cd openclaw-studio && npm run dev

# Keep upstream local:
# Upstream URL: ws://localhost:18789

# Expose Studio via Tailscale:
tailscale serve --yes --bg --https 443 http://127.0.0.1:3000

# Access from anywhere:
# https://<your-vps>.ts.net

Installation

npx openclaw-studio