Run one command and get a floating AI toolbar on your dev server. Select elements, describe changes, approve diffs. It's a reverse proxy, so it works with any framework without plugins or code changes.
npx openmagic@latest
The toolbar gives your LLM enough context to actually change your code.
Click any element. OpenMagic grabs its DOM, computed styles, parent layout, siblings, and React component name if available.
Reads project files, follows import chains, captures network requests and console output. The LLM sees your actual API responses and errors.
Changes show up as diffs. You see what gets modified line by line, then approve or reject each one.
Every file change gets backed up. One click to revert.
When the AI names a file, OpenMagic finds it in your project tree with fuzzy matching. No exact paths needed.
If the LLM needs more files, OpenMagic reads them and retries automatically. Rate limits and transient failures are retried with backoff.
Captures fetch/XHR requests, status codes, and timing. This context helps the AI understand what your APIs return and where they fail.
Drag-drop or paste screenshots into chat. Vision models use them to see what you see.
Ctrl+Shift+O toggles the toolbar. Chat history and settings survive page reloads via sessionStorage.
Markdown rendering in the chat panel with code blocks. Responses are readable, not raw JSON.
A reverse proxy sits between your browser and dev server. It injects a script tag. That's the whole trick.
Run this in your project folder. OpenMagic detects your dev server, wraps it with a reverse proxy, and injects the toolbar. Your app runs unmodified. Works with anything that serves HTML.
Pick a provider from the dropdown, paste your API key. It's saved to ~/.openmagic/config.json on your machine and only sent to the provider's API.
Click an element to give the AI context. Type what you want changed. It proposes edits as diffs. Approve them, and your dev server hot-reloads.
API formats, thinking modes, and vision support are pre-configured. You just add your key.
Side-by-side with other tools that do something similar.
| Feature | OpenMagic | Stagewise | Frontman |
|---|---|---|---|
| Install | npx openmagic |
Electron app | Framework middleware |
| Architecture | Reverse proxy | IDE extension + browser | Build plugin |
| Framework support | Any framework | React, Vue, Angular, Svelte | Next.js, Astro, Vite |
| Code changes required | None | VS Code extension | Middleware import |
| BYOK / No limits | Yes / Unlimited | Paid tiers | Yes / Unlimited |
| Providers | 14 providers | Limited | OpenAI, Anthropic |
| Vision / Screenshots | Yes | Yes | No |
| Thinking models | Auto-configured | No | No |
| Diff preview | Yes | No | Yes |
| Undo | Yes | Via IDE | No |
| IDE required | No | VS Code | No |
| License | MIT | Partial | Apache 2.0 |