Visual Edit

Use /visual-edit when the user wants to inspect or edit a real local app visually instead of generating standalone Alpine HTML. The source of truth is the running localhost app plus its route URLs. Design shows those routes as iframe-backed screens on the infinite canvas.

The editor is hosted at https://design.agent-native.com. Never start local Design; only the target app and bridge run locally.

See the Visual Edit guide for a worked onboarding-flow example.

Fast local startup

• Do not install this skill into the target app or start a local Design server. The skill belongs to the coding host; Design is always the hosted app above.
• If you need to start an Agent-Native framework app yourself, use AUTH_DISABLED=1 with its normal dev command. This is local-only and gives the visual editor the framework's dev identity without a user login.
• If an agent-owned local server redirects a requested screen to /sign-in, restart that server with AUTH_DISABLED=1 and probe the route again before opening Design. Never present a sign-in page as the requested screen.
• Before calling open-visual-edit, verify the target URL responds. Start an agent-owned dev server with its normal command when it is down, and wait for the requested routes to respond before opening Design. Never leave a dead localhost URL in the canvas.
• Preserve a server you did not start; use its existing authenticated browser session or explain that the target app, rather than Design, requires login.
• When the user gives explicit paths, skip route inventory and place those paths directly. Discover routes only when paths were not supplied.

Installation