Skip to documentation
Visual WizardOpen dashboard

Working with agents

Give an agent a clear target and review its changes on the canvas.

On this page

Use the Agents panel

Select the frame or element you want to change, then open the Agents panel. Describe the result and what must stay untouched. A focused request is easier to review than an instruction to change the entire project.

Connect your coding agent

Use Connect Agent in the editor header to set up an MCP-compatible coding agent, such as Codex or Claude Code.

  1. Open your project in Visual Wizard, then click Connect Agent in the top-right corner.
  2. Click Copy command in the Agent setup command box.
  3. Paste the copied instructions into your coding agent’s chat and send them. This is a setup prompt, not a command to paste into a terminal.
  4. Let the agent check Node.js 20 or newer and configure the Visual Wizard MCP server. The setup uses npx -y @visual-wizard/cli@latest mcp.
  5. Approve any setup permissions requested by your agent. If its MCP tools do not appear immediately, reload the agent session and ask it to verify that the Visual Wizard tools are available.
  6. Keep the editor open, select the frame you want to work on, and ask the agent to inspect the current canvas before making a change.

Make the target explicit

  1. Select the exact frame or element.
  2. Describe one outcome and the constraints: “Make this card more compact; keep its content and colors.”
  3. Review the visible result and the source changes.
  4. Undo a wrong direction, or continue with a smaller follow-up.