AI Agent Visual Editor

Design on the real page — adjust any element visually and your AI coding agent applies the change in your source files.

AI Agent Visual Editor is for designers who work with AI coding agents. You design on the page itself — point at any element in your running app, adjust spacing, colour, type and layout by eye — and your agent turns those adjustments into real code changes in the right files. No screenshots to annotate, no describing a change in prose and hoping the result matches, no hunting for the component that owns a style. Your edits snap to the design tokens your project already defines, so what you change stays inside your system instead of drifting into one-off values. How it works: 1. Start your dev server (npm run dev or equivalent). 2. Run the companion MCP server: npx @nco-studio/web-editor-mcp@^0 3. Open your project in your AI coding agent (Claude Code) with the MCP server configured in .mcp.json. 4. Click the toolbar icon — a popup opens. Click Extension in the popup to toggle it On and activate the overlay. 5. Click any element to inspect it, adjust spacing/color/typography/layout visually — each edit queues automatically. Click Review changes in the toolbar (or Open Change Queue in the popup) to see your pending edits, then click Apply Changes — your agent receives a structured diff — file paths, line numbers, the exact change — and writes it into your source. What you can edit: - Spacing, dimensions, and position - Colors and backgrounds - Typography (font family, size, weight, line-height) - Flex and grid layout - CSS visual effects (filter, mix-blend-mode, clip-path) - Design token snapping (Tailwind, CSS variables) - Element insertion, deletion, reorder, and reparenting Requirements: - @nco-studio/web-editor-mcp npm package running locally (free, open-source) - An AI coding agent that speaks MCP (built and tested with Claude Code) - A locally-running dev server at localhost or 127.0.0.1 - @nco-studio/web-editor-plugin (optional, enables source-file mapping) Architecture: All processing is local. The extension communicates with a WebSocket server running on your own machine, and neither the extension nor that server sends your data anywhere else. The extension activates only on localhost pages; it never runs on public websites. One thing to be deliberate about: each edit carries the page's URL, the edited element's text and attributes, and your changed values to the local MCP server — and on to your agent, whose model provider then sees them, the same as any file you ask it to read. A dev server is not automatically harmless here: if yours is pointed at a seeded database or a production dump, that content goes with the edit. (Screenshots are the exception: they stay in the browser.)