dev-buddy-config
npx machina-cli add skill Z-M-Huang/vcp/dev-buddy-config --openclawDev Buddy Web Configuration Portal
Launch the web configuration portal for managing AI provider presets and pipeline configuration.
Starting the Portal
bun "${CLAUDE_PLUGIN_ROOT}/scripts/config-server.ts" --cwd "${CLAUDE_PROJECT_DIR}"
The server:
- Starts on an OS-assigned port (printed to stdout as JSON)
- Opens the user's default browser automatically
- Serves the Alpine.js SPA for visual configuration
- Auto-shuts down after 60 minutes of inactivity
Portal Capabilities
| Tab | Features |
|---|---|
| AI Presets | List, add, update, remove presets; reveal/hide API keys |
| Pipeline Config | Configure which preset each stage uses |
Startup Output
The server prints a single JSON line to stdout on successful start:
{ "port": 12345, "url": "http://localhost:12345" }
Tell the user: Web portal running at http://localhost:{port}. Press Ctrl+C or close the terminal to stop.
The server also opens the browser automatically. If the browser does not open (e.g., SSH environment), the user can manually navigate to the URL.
Stopping the Portal
The portal stops automatically after 60 minutes of inactivity. To stop it manually:
- Press
Ctrl+Cin the terminal running the server
Security Notes
- The portal is localhost-only — CORS is restricted to the exact
http://localhost:{port}origin - API keys are masked by default; use the "Reveal Key" button to temporarily view a full key
- The portal auto-shuts down to minimize the attack window
Source
git clone https://github.com/Z-M-Huang/vcp/blob/main/plugins/dev-buddy/skills/dev-buddy-config/SKILL.mdView on GitHub Overview
Launch a web portal to manage AI provider presets and the pipeline configuration for your projects. It runs locally via bun, auto-opens a browser, and is secured to localhost with a 60-minute auto-shutdown.
How This Skill Works
Start the portal with the bun command, which spins up config-server.ts on a dynamic port and prints the port and URL as JSON. The server serves an Alpine.js SPA for configuration, auto-launches the browser, and shuts down after 60 minutes of inactivity; you can stop it manually with Ctrl+C.
When to Use It
- You need to add, update, or remove AI provider presets quickly.
- You want to map specific presets to individual pipeline stages via the Pipeline Config tab.
- You need to view API keys securely and reveal them temporarily for testing.
- You require a local, browser-based configuration portal with automatic startup and shutdown for safety.
- You want to run a self-contained config portal in a development environment without exposing remote access.
Quick Start
- Step 1: Run bun "${CLAUDE_PLUGIN_ROOT}/scripts/config-server.ts" --cwd "${CLAUDE_PROJECT_DIR}"
- Step 2: Wait for the startup JSON to print port and URL, then open http://localhost:{port} (browser may auto-open)
- Step 3: In AI Presets, add/update presets and use Pipeline Config to assign presets to stages
Best Practices
- Run the portal on localhost and rely on CORS to restrict access.
- Mask API keys by default and reveal them only briefly for testing.
- Use the Pipeline Config tab to clearly map which preset each stage uses.
- Watch the startup JSON output to confirm the listening port and URL.
- Manually stop with Ctrl+C or rely on the 60-minute inactivity shutdown for security.
Example Use Cases
- A developer adds a new AI provider preset and assigns it to the first pipeline stage.
- A QA engineer tests a preset by temporarily revealing the API key, then hides it again.
- A team updates multiple presets and rebinds a stage to the new preset via Pipeline Config.
- A local dev opens the portal automatically after starting the server and validates the UI.
- An SSH session runs the portal; the user navigates manually to the printed URL.
