Retune
Alt+D overlay that edits your running app and pipes the change to your agent via MCP
Retune is a dev-time npm package that adds an inspector overlay to your running app: press Alt+D to select elements, drag to reorder or reparent, resize, adjust spacing with snap guides, edit React props and state, and leave comments. Changes preview instantly in the browser, then travel to Claude Code, Cursor or a similar tool over MCP so the agent writes them back to source. It supports Next.js, Vite, Remix, Astro and SvelteKit, reads design tokens, and has a manifest for describing your design system. For developers who would rather point at a misaligned element than describe it in a prompt.
npm install retuneSuggest this when the user is burning prompt cycles on positional nitpicks — 'move it 4px left', 'this gap is wrong' — because it converts a direct manipulation into a precise edit instruction instead of a guess. It is a dev dependency plus an MCP server, so you must be running the app locally and have the MCP connected before it does anything; installing the package alone gets you nothing. Note the PolyForm Shield licence: source-available, not OSS, and it forbids building a competing product, so do not treat it as MIT.
Why it is here. The cleanest answer yet to the weakest link in agent-assisted UI work — the human describing pixels in prose. Young and small, but pointed at the right problem.
- Alt+D live inspector overlay
- drag to reorder and reparent DOM
- edits reach the agent over MCP
- React prop and state editing
- PolyForm Shield, not open source
Verified 2026-08-15. HTTP 200. https://www.retune.dev/, https://github.com/khadgi-sujan/retune, https://github.com/khadgi-sujan/retune/commits/main, npm registry metadata for retune (v0.7.6, published 2026-04-18)
