---

name: visual-edit description: >- Open and collaboratively edit a running local app in Design, with shared fallback previews and source handoff. Use when the user asks to inspect, share, or edit a real local app in Design. metadata: visibility: exported

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.

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

npx @agent-native/core@latest skills add visual-edit installs the skill and hosted Design MCP connector. npx skills@latest add BuilderIO/agent-native --skill visual-edit installs instructions only; page-capable WebMCP hosts need no connector installation.

Put Design Beside The Chat

Prefer the interactive MCP App from open-visual-edit: it keeps Design beside chat and routes Apply design updates through the host's MCP Apps bridge. The host may ask the user to confirm the current conversation. Otherwise, openUrl is a credential-free, read-only fallback; never claim it is editable.

• Inline-browser hosts should open https://design.agent-native.com/visual-edit and call its open-visual-edit WebMCP tool. It works signed in or out; the one-time capability is not a Design account session. A page-capable browser controller is enough, so Claude-in-Chrome, Claude Code browser tools, the ChatGPT Chrome/browser extension, Puppeteer or Playwright MCP, CDP, and similar JavaScript-capable controllers do not need the hosted MCP connector.
• VS Code uses its Design webview/deep link. Without page WebMCP, use the hosted Design MCP connector and its normal OAuth/device authorization. Never replace either path with a local Design server.

Inside Design, use Show/Hide UI from the Cmd K menu or press Figma's Shift \ shortcut to toggle all editing chrome so only the canvas remains.

Browser WebMCP (Default Without Connector)

Without a connected Design MCP, use a visible browser tab with a main-world JavaScript evaluator. Prefer the host's inline browser; use external Chrome only when requested or unavailable. Open https://design.agent-native.com/visual-edit, keep it visible while tools register, and read the title before work. Never enter, copy, or request passwords, cookies, tokens, or codes. Signed-out loopback visual-edit works; other pages that block tools behind sign-in still require a signed-in tab. If the browser exposes CDP permissions, grant local-network-access to https://design.agent-native.com before calling page tools; otherwise use the page's Connect button and let the browser's permission prompt complete.

Use a native browser-session WebMCP bridge when the host provides one: list once with list-browser-session-webmcp-tools and run with run-browser-session-webmcp-tool, or use the list-host-webmcp-tools and run-host-webmcp-tool pair. Preserve the exact discovered name, origin, and args. Otherwise use the page-world API. Agent-Native pages expose this helper:

Example assumes signed-in or existing bridge; fresh signed-out loopback must add the locally held bridgeToken described below.

const an = window.__agentNativeWebMcp;
const status = await an.ready({ waitMs: 20_000 });
if (status.state !== "ready") throw new Error(status.error ?? status.state);
const tools = await an.tools("visual-edit");
if (!tools.some((tool) => tool.name === "open-visual-edit")) {
  throw new Error("open-visual-edit is not registered yet");
}
const result = await an.call("open-visual-edit", {
  devServerUrl: "http://localhost:5173",
  paths: ["/"],
  navigate: true,
}, { waitMs: 2_000 });
if (result.state === "pending") {
  // On the next evaluation, read the still-running call without replaying it.
  an.result(result.id);
}

If the helper is absent, use standard WebMCP directly. document.modelContext is canonical; navigator.modelContext is deprecated:

const ctx = document.modelContext;
const tool = (await ctx.getTools()).find((candidate) => candidate.name === NAME);
if (!tool) throw new Error(`WebMCP tool not found: ${NAME}`);
const codex = typeof ctx.codexExecuteTool === "function" ||
  typeof ctx.codexGetTools === "function";
const result = await ctx.executeTool(tool, codex ? ARGS : JSON.stringify(ARGS));

The helper handles live discovery, partial registries, and pending calls. If a call returns state: "pending", read an.result(id) on the next evaluation; never replay a write. For Claude Code or Cowork, javascript_tool runs this page-world code with top-level await; for Codex open the page with cua.createBrowserTab("iab", url, { visible: true }), then use CDP Runtime.evaluate with awaitPromise: true; Puppeteer and Playwright MCP can use their page evaluator. Playwright isolated worlds cannot see document.modelContext. Keep evaluator output small, batch dependent calls, and do not navigate inside a batch.

Tool descriptors are page-local. Do not copy them into the host, hand-build authenticated HTTP requests, or replace named tools with clicks, typing, DOM automation, or screenshots. UI automation remains appropriate for canvas work without a named tool or when requested. If both bridges are unavailable after one discovery and one independent evaluator check, use hosted MCP/CLI before changing state.

For a fresh signed-out loopback connection, generate the bridge token locally, start the durable bridge with it, and pass that same token once as the page tool's bridgeToken; the page never returns it. Reuse a matching running bridge without the token. Account-backed or private Design work requires a signed-in session or the authenticated Design MCP connector. After canvas edits, call an.call("get-visual-edit-prompt", {}, { waitMs: 2_000 }) and apply the returned handoff. The page tool may show an approval dialog; let the user approve it and never bypass that consent.

Core Model

• Each screen is a URL-backed iframe, not copied HTML.
• Each screen keeps URL metadata: connectionId, routeId, path, url, bridgeUrl, title, and viewport size.
• The owner edits through the local bridge. Shared /visual-edit/:designId?share=1 links render a sanitized inert snapshot, refreshed on route or DOM changes; guests never reach the owner's localhost. Guest edits stay pending until an owner or editor applies them to source.
• Authorized viewers and commenters on private designs can edit the shared Visual Edit canvas and submit pending changes without writing design files. The owner or editor applies those source changes.
• The /visual-edit skill needs no Design account sign-in. open-visual-edit mints a five-minute, single-use capability for the exact /visual-edit/:designId local-editor route. The MCP host redeems it outside model-visible text, then opens the existing editor with localhost edit access. A public /visual-edit/:designId route enables browser-only DOM editing of public localhost snapshots; handoffs stay pending until applied. The owner sees Apply edits when a recipient has pending changes. This capability is not an account session: /_agent-native/session remains signed out, and account-backed save/share/generate actions remain denied.
• Hosted MCP highlights get-visual-edit-pending; pass the visual-edit design ID for a tab-free handoff. It returns a revision; after applying, call acknowledge-visual-edit-pending with that revision, then pull again. empty means no edits; session-ended means edits were lost; unknown means the marker was unreadable, not proof of no change.
• Browser hosts can use page-local get-visual-edit-prompt.
• The open-visual-edit action is owned by Design. From another app, use the hosted MCP server at https://design.agent-native.com/mcp or the page's WebMCP helper, not pnpm action in the target app. The page path works signed out only for loopback apps in public mode, using a short-lived capability-scoped principal; hosted MCP uses its normal OAuth identity.
• Ordinary public links stay read-only. Public /visual-edit/:designId and authorized private shares allow DOM-only edits, never source writes. Guest Interact is blocked; snapshots strip active content and owner-local resources, and persisted writes stay role-gated. Loopback is not a trust boundary because tunnels can proxy remote callers.
• The live editor is same-origin through the local bridge proxy. This boots CSR apps and root-relative assets, but it is still a localhost editing proxy: app-origin cookies, WebSockets/HMR, SSE, and non-GET app API calls may need a future dev-server/plugin integration for perfect parity with the app's own origin.
• The canvas is the editing view; Interact runs the normal URL with rails and a device bar. Interact preserves navigation, scrolling, links, and controls; the canvas pans/zooms and suppresses native frame interaction.
• While a localhost screen has pending live visual edits, do not switch back to Interact until the user either applies the edits to source or explicitly aborts/discards the preview.
• Alt-drag duplicates a localhost frame and its URL metadata. Change the copy's path/query for another state; preserve the order of named or numbered flows. Shorthand like localhost:1234/onboarding/1 means http://localhost:1234/onboarding/1.

Useful Canvas Sets

Use a focused batch of 3-7 frames by default: one ordered frame per requested route/query state, repeat routes at requested desktop/tablet/mobile viewports, and include URL-addressable empty, loading, error, modal-open, or selected-item states. Keep the Screens section readable so Layers remains useful while editing. Do not expand beyond 7 frames unless the user explicitly asks for an exhaustive audit or a complete route inventory.

Do not expand every discovered route or every viewport unless the user asks for an exhaustive audit. Preserve the user's labels and sequence so the canvas reads like the workflow they described.

Select And Reprompt

When a chat message begins with [Reprompt selection], the selected subtree is a hard write boundary. The only mutation path is propose-node-rewrite with the exact repromptId, target, and baseVersionHash captured in design-reprompt-pending:<designId>:<fileId>. Never use apply-visual-edit, apply-source-edit, write-source, write-local-file, edit-design, or any other content-writing action for that request. Clarifying questions are allowed, but a requested change must remain a proposal