Automation Skill Builder — VS Code embedded panel
This is a separate mini-project: a VS Code extension that shows the Automation Skill Builder UI inside an editor tab using a Webview + full-page iframe.
It assumes the Python/FastAPI application is already running on your machine (for example via python main.py or your packaged app). The default URL matches the app’s default HTTP port 8800.
If the panel cannot reach automationSkillBuilder.baseUrl (HTTP probe with timeout), it shows a landing page aligned with the Chrome side panel: open visualbuild.me downloads in the system browser, optional 在终端启动本地服务 (runs automationSkillBuilder.startTerminalCommand in a new terminal if you configured it), Retry, and an automatic re-check about every 20 seconds. The extension still cannot start arbitrary installers by itself unless you set that command.
Prerequisites
- Node.js 18+ and npm
- VS Code (or Cursor)
- Automation Skill Builder service reachable at the configured URL (default
http://127.0.0.1:8800/)
Build
cd vscode-embedded-ui
npm install
npm run compile
For development, npm run watch keeps out/ updated.
Try it in a development host
- Start the automation server (from the parent repo): e.g.
python main.py (or your install’s launcher).
- Open the folder
vscode-embedded-ui in VS Code.
- Run Run → Start Debugging (or F5) with the “Run Extension” configuration.
- In the new Extension Development Host window, open the Command Palette and run:
“Skill Builder: Open Automation Skill Builder (embedded)” (search Skill Builder or embedded).
Settings
In VS Code Settings, search for Automation Skill Builder:
| Setting |
Default |
Meaning |
automationSkillBuilder.baseUrl |
http://127.0.0.1:8800/ |
Root URL of the running server (same as in the browser). |
automationSkillBuilder.downloadPageUrl |
https://www.visualbuild.me/#product-downloads |
Opened from the offline landing CTA. |
automationSkillBuilder.startTerminalCommand |
(empty) |
If set, 在终端启动本地服务 sends this line to a new terminal (e.g. python main.py or a path to your .exe). |
If you use another port (--port or AUTOMATION_SERVICE_PORT), change baseUrl accordingly (HTTP 8800 or HTTPS 8843, etc.).
Note: The server may bind to 0.0.0.0 for LAN access; the iframe should still use 127.0.0.1 or localhost, not 0.0.0.0.
HTTPS
If you run the app with TLS, set baseUrl to https://127.0.0.1:8843/ (or your --https-port). Self-signed certificates may cause the embedded page or API calls to fail until the certificate is trusted by the OS/browser stack VS Code uses.
Package a .vsix (optional)
一键产出 VSIX + Chrome zip（推荐）：首次在 vscode-embedded-ui 执行过 npm install 后，在仓库根目录执行：
./scripts/package_user_extensions.sh
产物在 dist/user-extensions/（该目录被 .gitignore 忽略，适合本地打包或上传到 Release）：
automation-skill-builder-distribution-*.zip — 总分发包（内含 VSIX、Chrome 扩展 zip、INSTALL.txt），适合整包下载分发。
仅打 VSIX 时（本目录已 npm install，vsce 随 @vscode/vsce 安装在本地）：
npm run compile
npm run package
Install the generated .vsix via Extensions → … → Install from VSIX….
Command palette does not show the commands
- Reload the window after installing the VSIX: Command Palette → Developer: Reload Window.
- Search for
Skill Builder or embedded (command category is Skill Builder).
- In Extensions, confirm Automation Skill Builder (Embedded) is installed and Enabled (not “Disabled”, not “Install” stuck).
- If the host is older, install v0.1.2+ of the VSIX (
engines.vscode is relaxed to ^1.74.0).
Limitations
- The UI runs inside an iframe; behavior should match the browser, but pop-ups, downloads, and clipboard may be subject to Webview/sandbox rules.
- By default this extension does not start the backend; it only loads the URL you configure. You may optionally set
startTerminalCommand so the offline panel can paste a single command into a new terminal—same “local or download” story as Chrome (Chrome cannot do even that without native messaging).
