10 分钟上手 OpenClaw Studio从安装到连接 Gateway 的完整快速开始【免费下载链接】openclaw-studioA clean web dashboard for OpenClaw. Connect your Gateway, manage agents, and ship faster. ⭐️ Star if you like it!项目地址: https://gitcode.com/gh_mirrors/op/openclaw-studioOpenClaw Studio是一个开箱即用的 OpenClaw 网页控制台Web Dashboard一条命令安装后你可以在浏览器里连接 Gateway、管理智能体Agent、实时聊天对话、审批命令执行还能配置定时任务——所有操作都在同一个干净的界面里完成。本文将带你用 10 分钟走完「环境检查 → 安装 → 连接 Gateway → 上手使用」的完整快速开始流程。一、准备工作3 项环境检查清单在开始之前先确认以下 3 项避免安装中途卡住检查项要求说明️ Node.js20.9 或更高版本建议直接安装 LTS 版本node -v可查看 Gateway已运行的 OpenClaw Gateway需要 Gateway 的 URL 和 token 访问方式本地 / 局域网 / Tailscale远程访问推荐搭配 Tailscale可选一个必须记住的核心概念整个流程有两条链路——浏览器 → Studio和Studio → Gateway。其中ws://localhost:18789里的localhost永远指Studio 所在的那台机器而不是你自己的笔记本。记住这一点能避开 90% 的连接问题。二、一键安装 OpenClaw Studio最快安装步骤所有部署场景都使用同一条安装命令官方推荐直接用 npx 拉起最新版npx -y openclaw-studiolatest进入目录并启动开发服务器cd openclaw-studio npm run dev启动后在终端会看到Open in browser: http://localhost:3000的提示。从源码安装进阶如果想参与开发或做二次定制也可以克隆源码仓库git clone https://gitcode.com/gh_mirrors/op/openclaw-studio cd openclaw-studio npm install npm run dev源码安装还可以多跑一步设置助手 scripts/studio-setup.jsnpm run studio:setup它能在不打开界面的情况下直接为当前主机写入保存好的 Gateway 地址与 token。三、选择你的部署组合Gateway 和 Studio 在哪运行安装路径相同区别只在于「Gateway 在哪」「Studio 在哪」。对号入座即可场景 AGateway 和 Studio 在同一台电脑最简单直接打开http://localhost:3000稍后在界面里填入Upstream URLws://localhost:18789Upstream Token你的 Gateway token可用openclaw config get gateway.auth.token获取场景 BGateway 在云端Studio 在你的笔记本推荐用 Tailscale Serve 在 Gateway 主机上暴露 HTTPS 端点tailscale serve --yes --bg --https 443 http://127.0.0.1:18789然后在 Studio 中把 Upstream URL 设为wss://gateway-host.ts.net填入 token。 不想装 Tailscale也可以用 SSH 隧道ssh -L 18789:127.0.0.1:18789 usergateway-hostUpstream URL 保持ws://localhost:18789不变。场景 CStudio 和 Gateway 都在云端7×24 常驻在 VPS 上用同样命令启动 Studioupstream 保持ws://localhost:18789再用tailscale serve --yes --bg --https 443 http://127.0.0.1:3000把 Studio 暴露到 tailnet之后从笔记本或手机访问https://studio-host.ts.net。⚠️ 注意当 Studio 绑定到非回环地址对外提供访问时必须设置STUDIO_ACCESS_TOKEN并在每个新浏览器中打开一次/?access_token...来写入 Cookie。四、连接 Gateway在 Web Dashboard 中完成配置用浏览器打开http://localhost:3000。首次运行会看到全屏连接引导页它会教你理解上面提到的两条链路并提供三个分支一切都在这台电脑上Studio 在这、OpenClaw 在云端Studio 和 OpenClaw 在同一台云服务器按所选分支填入Upstream URL和Upstream Token然后点击Save settings保存点击Test connection验证连通性连接成功后即可看到你的智能体列表连接配置面板的逻辑实现在 src/features/agents/components/ConnectionPanel.tsxGateway 地址与 token 由服务端保管保存在~/.openclaw/openclaw-studio/settings.json浏览器只能看到「是否已存 token」看不到 token 本身——这是有意的安全设计。五、连接成功后的界面速览连接成功后你会看到 OpenClaw Studio 的主界面从左到右分为三大区域左侧智能体列表展示所有 Agent 及其状态RUNNING / IDLE 等顶部可筛选 ALL / NEEDS ATTENTION / RUNNING点击NEW AGENT即可创建新智能体只需填名字和头像Studio 会自动应用宽松默认权限。中间聊天工作区选中某个 Agent 后默认进入聊天页支持选择模型与思考强度Thinking、显示思考过程Thinking与工具调用Tool calls、新建会话AI 的流式回复会实时逐字渲染。⚙️右侧设置侧栏包含 Personality人设/改名、Capabilities命令执行策略、网络访问、文件工具开关、Automations定时任务和 Advanced高级选项与危险区四个标签页。界面各区域的交互细节可参考 docs/ui-guide.md。六、常见连接问题最快排查方法如果页面能打开但Connect 失败问题几乎都出在Studio → Gateway这一段症状原因与解法UI 能加载但连接失败检查 Upstream URL / token 是否正确Studio 在远程机器localhost:3000打不开记得localhost指的是远程机器用tailscale serve或ssh -L 3000:127.0.0.1:3000转发EPROTO/ wrong version number对非 TLS 端点误用了wss://改用ws://或让 Gateway 走 HTTPS.ts.net域名配了ws://应改用wss://401 Studio access token required启用了STUDIO_ACCESS_TOKEN先访问一次/?access_token...启动时报NODE_MODULE_VERSION不匹配运行npm run verify:native-runtime:repair确认node与npm指向同一运行时更多报错码如studio.gateway_url_missing、studio.upstream_error的对照说明见 README.md 的 Troubleshooting 一节。七、下一步深入 OpenClaw Studio快速开始完成后可以继续探索 界面与工作流详解docs/ui-guide.md 聊天流式输出原理SSE 事件流、重放与历史docs/pi-chat-streaming.md 权限与沙箱Agent 的工具策略如何从 Studio 流转到 Gatewaydocs/permissions-sandboxing.md️ 整体架构与数据流浏览器 → Studio → Gateway 三条链路ARCHITECTURE.md 服务端核心实现server/index.js、Gateway 设置存取 server/studio-settings.js10 分钟走完以上流程你就已经拥有了一个可以管理智能体、实时对话、审批执行的 OpenClaw 控制台。祝使用愉快【免费下载链接】openclaw-studioA clean web dashboard for OpenClaw. Connect your Gateway, manage agents, and ship faster. ⭐️ Star if you like it!项目地址: https://gitcode.com/gh_mirrors/op/openclaw-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考