What it does
OpenMagic is started with npx from your project folder. It proxies your dev server on a local port and adds a toolbar to the page, so nothing in your project is modified at install time. You click an element, describe the change in plain English, and the tool sends that element's DOM, computed styles, parent layout and related source files to a model. Proposed edits appear as diffs with approve and reject buttons, and nothing is applied without your consent. The site says changes are checked against the build, reverted if they break it, and can be undone. A visual editor lets you adjust CSS, text and attributes live, and a one-click design review looks at hierarchy, spacing, contrast, accessibility and consistency. You bring your own API key. The page lists 14 providers and more than 70 models, including OpenAI, Anthropic, Google, xAI, DeepSeek and Mistral, plus local models through Ollama. Because it works as a reverse proxy, it supports frameworks such as Next.js, Vue, Nuxt, SvelteKit, Astro and Angular, as well as plain static sites. It is a development tool and is not meant for production. The site notes that your app is reached on a different port, which can affect OAuth redirects, and that the toolbar should not be used with untrusted third-party scripts on the page. It requires Node.js 20.19 or newer.
Capabilities
- Click-to-select elements with DOM, style and component context captured
- Diff preview with approve, reject and rollback
- Live visual editing of CSS, text and attributes
- One-click AI design review of the page
- Bring-your-own-key support for 14 providers, including local Ollama
- Works across frameworks through a reverse proxy
When to use it
- You want to change a running UI by pointing at it instead of hunting for the right file
- You want one AI editing tool across different frameworks and model providers
- You want to review every change as a diff before it touches your code
Alternatives to explore
- Stagewise
- Frontman
- Agentation
