From gerdsenai
Use when authoring, customizing, or extending an AgenticUI agent-observability web app — a generated standalone frontend that shows an AI agent working via a live in-browser terminal (xterm.js + node-pty over WebSocket), a pseudo-desktop (Dockerized Xvfb + x11vnc + noVNC), and optional computer-use (a VLM-driven click/type loop). Activates for the /gerdsenai:agentic-ui scaffolder and any work on its templates.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gerdsenai:agentic-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
AgenticUI is a **generator** in the GerdsenAI toolkit: `/gerdsenai:agentic-ui` scaffolds a
AgenticUI is a generator in the GerdsenAI toolkit: /gerdsenai:agentic-ui scaffolds a
standalone web app (a deliverable, not a UI for this plugin) that lets anyone watch an AI agent
work. It mirrors how /gerdsenai:init scaffolds projects and /gerdsenai:build makes PDFs.
The generated app is public-safe and BYO-model: it ships no credentials and no hardcoded model endpoints. The end user supplies their own model for the computer-use brain via environment variables.
--phase 1|2|3)xterm.js (frontend) ⇄ WebSocket ⇄ node-pty (backend
PTY). The PTY runs a configurable command (default shell), so the app can be pointed at any agent.Xvfb (headless X
server) → x11vnc (exposes it as VNC) → websockify + noVNC (VNC in the browser). Shown in a
Desktop tab.pyautogui/xdotool. Provider-agnostic (see below). A --read-only
variant observes only (screenshots, no input simulation).The computer-use agent reads its model config from the environment, in this order:
VLM_BASE_URL + VLM_MODEL + VLM_API_KEY — any OpenAI-compatible vision endpoint
(messages:[{type:"image_url", image_url:{url:"data:image/png;base64,…"}}]). Works with hosted or
local servers (the user points it wherever they like).ANTHROPIC_API_KEY — use Claude's computer-use tool loop.localhost default ships.127.0.0.1 by default; never 0.0.0.0 on the host.--read-only (watch, don't drive) in docs; make enabling input simulation explicit.SECURITY.md: computer-use is powerful/dual-use — run it only against environments you own
or control, inside the provided container, never exposed to the network..env (git-ignored). .env.example holds placeholders only.scripts/agentic-ui-build.py copies templates/agentic-ui/phase1..N/ into the target dir, rendering
tokens (__APP_NAME__, __TERM_PORT__, __DESKTOP_PORT__, __AGENT_PORT__, __AUTH_TOKEN__,
__READ_ONLY__). Later phases override earlier files (e.g., docker-compose.yml). It generates a random
auth token into .env, refuses to clobber without --force, and emits the standard JSON result.
See references/architecture.md, references/ui-ux.md, references/security.md,
references/models.md (computer-use capability tiers: Claude native vs reasoning/vision vs weak local),
and references/design-ultraplan.md (design-driven planning via /gerdsenai:design-plan → /ultraplan
→ frontend-design) for detail.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub gerdsenai/gerdsenai-agentic-devtools --plugin gerdsenai