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.
Every change is type/lint-checked and runtime-verified after it's applied. If it breaks the build, OpenMagic reverts it and re-prompts with the errors — automatically.
Press ⌘K for a fuzzy-searchable palette — select, apply, undo, settings, and more — all from the keyboard.
Maps the page URL to the right source file for Next.js, Remix / React Router, Nuxt, SvelteKit, SolidStart, Angular, Astro and more — plus a symbol index that finds the component you clicked.
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 |
Common questions about OpenMagic.
OpenMagic is an open-source AI coding toolbar for any web application. Run npx openmagic in your project and a floating AI toolbar is injected into your running app via a single-port reverse proxy. Select any element, describe a change in plain English, review the diff, and OpenMagic edits your actual source code.
Run it instantly with npx openmagic@latest, or install it globally with npm install -g openmagic and run openmagic from any project folder. Requires Node.js 20.19 or newer.
14 providers and 70+ models, bring your own key: OpenAI, Anthropic Claude, Google Gemini, xAI Grok, DeepSeek, Mistral, Groq, Ollama, OpenRouter and more — plus local CLI agents (Claude Code, Codex, Gemini CLI).
Yes. You review every diff before it is applied, and each change is verified (typecheck/lint plus runtime) after it is written — if it breaks the build it is automatically reverted and the model self-corrects. Undo is durable and one-click.
Next.js, Remix / React Router, Nuxt, SvelteKit, SolidStart, Angular, Astro, Vite, Vue, and plain static sites. It maps the page URL to the right source file and indexes your components.
Yes — OpenMagic is MIT licensed and open source. You bring your own API key, so there is no subscription.
Yes. One click runs a UX/UI design review that audits the page against your detected design system and proposes brand-consistent fixes. A visual element editor also lets you change CSS, text and attributes with live preview before applying to code.