[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74905":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":27,"discoverSource":28},74905,"openclaw-studio","grp06\u002Fopenclaw-studio","grp06","A clean web dashboard for OpenClaw. Connect your Gateway, manage agents, and ship faster. ⭐️ Star if you like it!","",null,"TypeScript",2022,303,13,11,0,2,9,29.45,"MIT License",false,"main",[],"2026-06-12 02:03:29","![Home screen](home-screen.png)\n\n# OpenClaw Studio\n\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join-5865F2?logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002FEFkFHbZw)\n\nOpenClaw Studio is a clean web dashboard for OpenClaw. Use it to connect to your Gateway, see your agents, chat, manage approvals, and configure jobs from one place.\n\n⭐ Drop a star to help us grow! ⭐ \n\nIt helps more developers discover the project.\n\n## Get Started (Pick Your Setup)\n\nIf your Gateway is already running, pick the scenario that matches where your Gateway and Studio will run:\n\n- [A. Gateway local, Studio local (same computer)](#a-gateway-local-studio-local-same-computer)\n- [B. Gateway in the cloud, Studio local (your laptop)](#b-gateway-in-the-cloud-studio-local-your-laptop)\n- [C. Studio in the cloud, Gateway in the cloud](#c-studio-in-the-cloud-gateway-in-the-cloud)\n\nAll setups use the same install\u002Frun path (recommended): `npx -y openclaw-studio@latest`\n\nTwo links matter:\n\n1. Browser -> Studio\n2. Studio -> Gateway\n\n`localhost` always means \"the Studio host.\" If Studio and OpenClaw share a machine, the upstream should usually stay at `ws:\u002F\u002Flocalhost:18789` even when that machine is a cloud VM.\n\n## Requirements\n\n- Node.js 20.9+ (LTS recommended)\n- An OpenClaw Gateway URL + token, or a local OpenClaw install Studio can detect\n- Tailscale (optional, recommended for remote access)\n\n## A) Gateway local, Studio local (same computer)\n\n```bash\nnpx -y openclaw-studio@latest\ncd openclaw-studio\nnpm run dev\n```\n\n1. Open http:\u002F\u002Flocalhost:3000\n2. In Studio, set:\n   - Upstream URL: `ws:\u002F\u002Flocalhost:18789`\n   - Upstream Token: your gateway token (for example: `openclaw config get gateway.auth.token`)\n\n## B) Gateway in the cloud, Studio local (your laptop)\n\nRun Studio on your laptop as above, then set an upstream URL your laptop can reach.\n\nRecommended (Tailscale Serve on the gateway host):\n\n1. On the gateway host:\n   - `tailscale serve --yes --bg --https 443 http:\u002F\u002F127.0.0.1:18789`\n2. In Studio (on your laptop):\n   - Upstream URL: `wss:\u002F\u002F\u003Cgateway-host>.ts.net`\n   - Upstream Token: your gateway token\n3. Keep in mind:\n   - Studio still needs a gateway token here, even if the OpenClaw Control UI can use Tailscale identity headers\n   - Raw `ws:\u002F\u002F\u003Cprivate-ip>:18789` is an advanced\u002Fmanual path and may need extra OpenClaw origin configuration\n\nAlternative (SSH tunnel):\n\n1. From your laptop:\n   - `ssh -L 18789:127.0.0.1:18789 user@\u003Cgateway-host>`\n2. In Studio:\n   - Upstream URL: `ws:\u002F\u002Flocalhost:18789`\n\n## C) Studio in the cloud, Gateway in the cloud\n\nThis is the “always-on” setup. When Studio and OpenClaw run on the same cloud VM, keep the OpenClaw upstream local and solve browser access to Studio separately.\n\n1. On the VPS that will run Studio:\n   - Run Studio (same commands as above).\n2. If OpenClaw is on that same VPS, keep Studio's upstream set to:\n   - Upstream URL: `ws:\u002F\u002Flocalhost:18789`\n   - Upstream Token: your gateway token\n3. Expose Studio over tailnet HTTPS:\n   - `tailscale serve --yes --bg --https 443 http:\u002F\u002F127.0.0.1:3000`\n4. Open Studio from your laptop\u002Fphone:\n   - `https:\u002F\u002F\u003Cstudio-host>.ts.net`\n5. Only use a remote upstream like `wss:\u002F\u002F\u003Cgateway-host>.ts.net` if Studio and OpenClaw are on different machines.\n\nNotes:\n- Avoid serving Studio behind `\u002Fstudio` unless you configure `basePath` and rebuild.\n- If Studio is reachable beyond loopback, `STUDIO_ACCESS_TOKEN` is required.\n- If you bind Studio beyond loopback, open `\u002F?access_token=...` once from each new browser to set the Studio cookie.\n\n## How It Connects (Mental Model)\n\nOpenClaw Studio now runs one runtime architecture with **two primary paths**:\n\n1. Browser -> Studio: HTTP + SSE (`\u002Fapi\u002Fruntime\u002F*`, `\u002Fapi\u002Fintents\u002F*`, `\u002Fapi\u002Fruntime\u002Fstream`)\n2. Studio -> Gateway (upstream): one server-owned WebSocket opened by the Studio Node process\n\nThis is why `ws:\u002F\u002Flocalhost:18789` means “gateway on the Studio host”, not “gateway on your phone”.\n\nIf Studio is running on a remote machine over SSH and the terminal says `Open in browser: http:\u002F\u002Flocalhost:3000`, that `localhost` is the remote machine. Use Tailscale Serve or an SSH tunnel to open Studio from your own laptop.\n\n## Install from source (advanced)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fgrp06\u002Fopenclaw-studio.git\ncd openclaw-studio\nnpm install\nnpm run dev\n```\n\nOptional setup helper in a source checkout:\n\n```bash\nnpm run studio:setup\n```\n\nThat writes the saved gateway URL\u002Ftoken for this Studio host without opening the UI first.\n\n## Configuration\n\nPaths and key settings:\n- OpenClaw config: `~\u002F.openclaw\u002Fopenclaw.json` (or via `OPENCLAW_STATE_DIR`)\n- Studio settings: `~\u002F.openclaw\u002Fopenclaw-studio\u002Fsettings.json`\n- Control-plane runtime DB: `~\u002F.openclaw\u002Fopenclaw-studio\u002Fruntime.db`\n- Default gateway URL: `ws:\u002F\u002Flocalhost:18789` (override via Studio Settings or `NEXT_PUBLIC_GATEWAY_URL`)\n- Domain API mode: always enabled. Studio runs on the server-owned control-plane architecture.\n- `STUDIO_ACCESS_TOKEN`: required when binding Studio to a public host (`HOST=0.0.0.0`, `HOST=::`, or non-loopback hostnames\u002FIPs); optional for loopback-only binds (`127.0.0.1`, `::1`, `localhost`)\n\nStartup guard behavior:\n- `npm run dev` and `npm run dev:turbo` run `verify:native-runtime:repair` before server startup.\n- `npm run start` runs `verify:native-runtime:check` before startup (check-only; no dependency mutation).\n\nWhy SQLite exists now:\n- Studio’s server-owned control plane stores durable runtime projection + replay outbox in `runtime.db`.\n- This keeps runtime history and SSE replay deterministic across page refreshes and process restarts.\n\n## UI guide\n\nSee `docs\u002Fui-guide.md` for UI workflows (agent creation, cron jobs, exec approvals).\n\n## PI + chat streaming\n\nSee `docs\u002Fpi-chat-streaming.md` for how Studio streams runtime events over domain SSE (`\u002Fapi\u002Fruntime\u002Fstream`), applies replay\u002Fhistory, and renders tool calls, thinking traces, and final transcript lines.\n\n## Permissions + sandboxing\n\nSee `docs\u002Fpermissions-sandboxing.md` for how agent creation choices (tool policy, sandbox config, exec approvals) flow from Studio into the OpenClaw Gateway and how upstream OpenClaw enforces them at runtime (workspaces, sandbox mounts, tool availability, and exec approval prompts).\n\n## Color system\n\nSee `docs\u002Fcolor-system.md` for the semantic color contract, status mappings, and guardrails that keep action\u002Fstatus\u002Fdanger usage consistent across the UI.\n\n## Troubleshooting\n\nIf the UI loads but “Connect” fails, it’s usually Studio->Gateway:\n- Confirm the upstream URL\u002Ftoken in the UI (stored on the Studio host at `\u003Cstate dir>\u002Fopenclaw-studio\u002Fsettings.json`).\n- If Studio is on a remote host, remember that `ws:\u002F\u002Flocalhost:18789` means \"OpenClaw on the Studio host,\" not \"OpenClaw on your laptop.\"\n- If Studio is on a remote host and you cannot open `http:\u002F\u002Flocalhost:3000` from your laptop, expose Studio with `tailscale serve --yes --bg --https 443 http:\u002F\u002F127.0.0.1:3000` or use `ssh -L 3000:127.0.0.1:3000 user@host`.\n- `EPROTO` \u002F “wrong version number”: you used `wss:\u002F\u002F...` to a non-TLS endpoint (use `ws:\u002F\u002F...`, or put the gateway behind HTTPS).\n- `.ts.net` + `ws:\u002F\u002F`: use `wss:\u002F\u002F` instead.\n- Assets 404 under `\u002Fstudio`: serve Studio at `\u002F` or configure `basePath` and rebuild.\n- 401 “Studio access token required”: `STUDIO_ACCESS_TOKEN` is enabled; open `\u002F?access_token=...` once to set the cookie.\n- Helpful error codes: `studio.gateway_url_missing`, `studio.gateway_token_missing`, `studio.upstream_error`, `studio.upstream_closed`.\n\nIf startup fails with `better_sqlite3.node` \u002F `NODE_MODULE_VERSION` mismatch:\n- Run `npm run verify:native-runtime:repair`\n- Confirm `node` and `npm` point at the same runtime before launching Studio:\n  - `node -v && node -p \"process.versions.modules\"`\n  - `which node && which npm`\n  - If they differ (for example Homebrew `npm` + `nvm` `node`), run `nvm use` in that terminal first.\n- If it still fails, run:\n  - `npm rebuild better-sqlite3`\n  - `npm install`\n\n## Architecture\n\nSee `ARCHITECTURE.md` for details on modules and data flow.\n","OpenClaw Studio 是一个为 OpenClaw 设计的简洁网页仪表盘，用于连接网关、管理代理以及加速开发流程。项目采用 TypeScript 编写，提供了一个集中式的界面来查看和管理代理、聊天、审批和任务配置。其主要技术特点包括通过 WebSocket 与 OpenClaw 网关通信，并支持多种部署场景，如本地或云端运行。此外，推荐使用 Tailscale 进行远程访问。此工具非常适合需要在一个地方管理和监控多个 OpenClaw 实例的开发者或团队使用，无论是本地开发环境还是云基础设施中都能良好运作。","2026-06-11 03:51:21","high_star"]