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

OpenClaw Luna 是一款 VS Code 扩展，将 OpenClaw 的 AI Agent 管理能力深度集成到开发环境中。它支持多 Agent 管理、集群控制和 API 用量监控，解决了开发者在 AI 工作流中的窗口切换、远程连接和配置繁琐等痛点。安装后，用户可通过可视化界面快速配置本地/远程连接，实现“编码+AI”同屏协作。该插件还提供高级功能如多模型协作、成本监控和 SSH 远程开发

月と猫 - LunaNeko

764人浏览 · 2026-03-09 11:32:19

月と猫 - LunaNeko · 2026-03-09 11:32:19 发布

还在为频繁切换窗口管理 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？

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

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

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

二、核心功能全景

功能模块	能力说明	适用场景
🤖 Agent 管理	可视化创建、配置、切换多个 AI Agent	多模型对比、任务分工
🌐 集群连接	支持本地/远程 WebSocket 连接，自动重连	远程服务器开发、团队协作
📊 API 监控	实时查看 Token 消耗、请求频率、费用统计	成本控制、用量优化
⚙️ 可视化配置	图形化界面替代手动改配置	新手友好、减少出错
🔐 安全认证	支持 Token 身份验证，企业级安全	生产环境部署

三、5 分钟快速上手

3.1 安装插件

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

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

备用方案：如果市场暂未上架，可从 GitHub Release 下载 .vsix 文件手动安装：
git clone https://github.com/LunaticLegacy/openclaw-vscode-luna.git
cd openclaw-vscode-luna
npm install
npm run package
# 在 VS Code 中按 Ctrl+Shift+P，选择"从 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 首次连接

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

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

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 最香的使用场景之一：

SSH 连接到远程服务器（VS Code Remote-SSH）
Luna 插件自动同步到远程环境

配置指向 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：连接失败，状态栏显示红色指示灯？

排查步骤：

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

Q2：支持 wss 加密连接吗？

尚未测试。

Q3：如何获取 Gateway Token？

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

openclaw pairing approve vscode <code>

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

特性	OpenClaw Luna	基础版插件
Agent 管理	✅ 可视化多 Agent 合作	❌ 单 Agent
Agent 预设	✅ 有	❌ 无
集群支持	✅ 多网关切换	❌ 单连接
UI 美观度	🌙 现代化界面	基础样式