OpenClaw Luna：在 VS Code 中驾驭 AI Agent 的终极利器

还在为频繁切换窗口管理 AI Agent 而烦恼？OpenClaw Luna 将 OpenClaw 的强大能力直接嵌入 VS Code，支持 Agent 管理、集群控制和 API 用量监控，让你在一个窗口内完成"编码+AI"的无缝协作。本文将手把手教你如何安装配置，并揭秘其高效工作流。

项目地址：https://github.com/LunaticLegacy/openclaw-vscode-luna
VS Code 市场：搜索 lunaticlegacy.openclaw-vscode-luna

目录

• 一、为什么需要 OpenClaw Luna？
• 二、核心功能全景
• 三、5 分钟快速上手
• 四、进阶玩法：集群管理与用量监控
• 五、技术架构解析
• 六、常见问题与解决方案
• 七、总结与展望

一、为什么需要 OpenClaw Luna？

在 AI 开发工作流中，开发者常面临这些痛点：

1. 窗口碎片化 —— 代码编辑器、浏览器、终端、AI 客户端来回切换，注意力被不断打断
2. 远程开发割裂 —— 使用 VS Code SSH 连接远程服务器时，无法直接操作部署在远端的 OpenClaw 服务
3. 配置黑盒化 —— 手动修改 JSON 配置文件容易出错，缺乏可视化界面

OpenClaw Luna 正是为解决这些问题而生。作为 OpenClaw 生态的（非）官方 VS Code 扩展，它将 AI Agent 的管理能力原生集成到编辑器中，打造**“All-in-One”**的极致体验。

二、核心功能全景

三、5 分钟快速上手

3.1 安装插件

打开 VS Code，进入扩展市场：

1. 快捷键 Ctrl+Shift+X（Mac: Cmd+Shift+X）
2. 搜索 OpenClaw Luna 或 lunaticlegacy.openclaw-vscode-luna
3. 点击安装

备用方案：如果市场暂未上架，可从 GitHub Release 下载 .vsix 文件手动安装：

3.2 基础配置

安装完成后，在 VS Code 左侧活动栏找到 🌙 OpenClaw Luna 图标，点击齿轮进入配置：

场景 A：本地开发

{"openclaw.gatewayUrl":"ws://localhost:18789","openclaw.gatewayToken":""}

场景 B：远程服务器（配合 SSH）

{"openclaw.gatewayUrl":"ws://your-server.com:18789","openclaw.gatewayToken":"your-secret-token"}

场景 C：生产环境（WSS 加密）

{"openclaw.gatewayUrl":"wss://your-domain.com:18789","openclaw.gatewayToken":"your-secret-token"}

3.3 首次连接

1. 点击左侧栏 OpenClaw 图标打开面板
2. 点击"连接网关"按钮
3. 状态栏显示 🟢 绿色指示灯即表示连接成功

四、进阶玩法：集群管理与用量监控

4.1 多 Agent 管理

OpenClaw Luna 支持同时管理多个 AI Agent，轻松实现多模型协作：

# 通过命令面板（Ctrl+Shift+P）执行 OpenClaw Luna: 添加 Agent OpenClaw Luna: 切换 Agent OpenClaw Luna: 删除 Agent 

实战技巧：为不同任务配置不同 Agent：

• Coding Agent：配置 GPT-4/Codex，专注代码生成
• Review Agent：配置 DeepSeek，专注代码审查
• Doc Agent：配置 Claude，专注文档编写

4.2 API 用量监控

在 Luna 面板中，你可以实时查看：

• Token 消耗趋势图（小时/天/周维度）
• 请求成功率与响应延迟
• 费用预估与额度预警

这对于成本控制至关重要，特别是在团队共享 API Key 的场景下。

4.3 SSH 远程开发工作流（这段是 AI 生成的，尚未测试）

这是 Luna 最香的使用场景之一：

1. SSH 连接到远程服务器（VS Code Remote-SSH）
2. Luna 插件自动同步到远程环境
3. 开始边写代码边对话，所有操作都在一个窗口完成

配置指向 localhost（对远程服务器而言）

{"openclaw.gatewayUrl":"ws://localhost:18789"}

这种"代码+AI"同屏工作流，大幅提升远程开发效率 。

五、技术架构解析

OpenClaw Luna 基于以下技术栈构建：

┌─────────────────────────────────────────────┐ │ VS Code Extension Host │ │ ┌─────────────┐ ┌─────────────────┐ │ │ │ Sidebar │◄────►│ WebSocket │ │ │ │ Webview │ │ Client │ │ │ │ (React/Vue)│ │ │ │ │ └─────────────┘ └────────┬────────┘ │ │ │ │ └────────────────────────────────┼───────────┘ │ ┌────────────▼────────────┐ │ OpenClaw Gateway │ │ (WebSocket Server) │ └────────────┬────────────┘ │ ┌──────────────────┼──────────────────┐ ▼ ▼ ▼ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ Agent 1 │ │ Agent 2 │ │ Agent N │ │ (GPT-4) │ │(DeepSeek)│ │ (Claude) │ └──────────┘ └──────────┘ └──────────┘ 

关键技术点：

• TypeScript：类型安全的扩展开发
• VS Code Extension API：原生侧边栏 Webview 集成
• WebSocket：实时双向通信，支持自动重连
• 状态管理：Redux/Vuex 管理多 Agent 状态

六、常见问题与解决方案

Q1：连接失败，状态栏显示红色指示灯？

排查步骤：

1. 确认 OpenClaw Gateway 已启动：systemctl status openclaw-gateway.service
2. 检查防火墙/安全组是否放行 WebSocket 端口（默认 18789）
3. 查看 VS Code 输出面板（Output > OpenClaw Luna）的详细日志

Q2：支持 wss 加密连接吗？

尚未测试。

Q3：如何获取 Gateway Token？

在 OpenClaw Gateway 的配置文件中查看或生成：

openclaw pairing approve vscode <code>

Q4：与 OpenClaw 官方 WebUI 有什么区别？

七、总结与展望

OpenClaw Luna 填补了 OpenClaw 在 IDE 深度集成方面的空白，特别适合：

• 🏢 企业团队：需要集中管理多 Agent、监控 API 用量
• 🖥️ 远程开发者：配合 VS Code SSH，打造无缝远程 AI 工作流
• ⚡ 效率极客：追求 All-in-One，拒绝窗口切换

未来 roadmap（据社区消息）：

• 支持 MCP (Model Context Protocol) 协议集成
• 内置代码补全与智能提示
• 团队协作空间与 Agent 共享

立即体验：

• GitHub: https://github.com/LunaticLegacy/openclaw-vscode-luna
• VS Code 市场: 搜索 OpenClaw Luna

💡 小贴士：如果觉得本文有帮助，欢迎点赞收藏！有任何问题可以在评论区交流，或者直接在 GitHub 提交 Issue。

参考链接：

• 在VS Code 里玩转OpenClaw，远程管理+SSH 双剑合璧
• OpenClaw Luna - Visual Studio Code Marketplace

本文首发于 ZEEKLOG，转载请注明出处。

为什么这个东西没有在ZEEKLOG上自动转markdown？