# OpenMagic
**Add an AI coding toolbar to any web app. One command. Zero code changes.**
[](https://www.npmjs.com/package/openmagic)
[](https://www.npmjs.com/package/openmagic)
[](https://opensource.org/licenses/MIT)
[](https://github.com/Kalmuraee/OpenMagic/stargazers)
[](https://github.com/Kalmuraee/OpenMagic/actions)
[](https://www.typescriptlang.org/)
[](https://github.com/Kalmuraee/OpenMagic/pulls)
[](https://nodejs.org/)
[](https://hits.sh/github.com/Kalmuraee/OpenMagic/)
OpenMagic injects a floating AI toolbar into your running web app via reverse proxy.
Select any element, describe what you want, review the diff, approve — your code updates and HMR refreshes the page.
No framework plugin. No IDE extension. No account. Bring your own API key.
It's the **AI coding agent that edits your real source from the browser** — every change is **verified (typecheck/lint + runtime) and self-correcting**, with a **visual element editor** (live CSS/text/attribute preview) and a one-click **AI UI/UX design review**. Works with Next.js, Remix/React Router, Nuxt, SvelteKit, SolidStart, Angular, Astro, Vite, Vue, and plain static sites — across 14 providers (OpenAI, Anthropic Claude, Google Gemini, xAI Grok, DeepSeek, and more) and 70+ models.
[Website](https://kalmuraee.github.io/OpenMagic/) · [Quick Start](#quick-start) · [How It Works](#how-it-works) · [Providers](#supported-providers) · [GitHub](https://github.com/Kalmuraee/OpenMagic)
---
---
## Quick Start
```bash
# 1. Start your dev server as usual
npm run dev
# 2. In your project folder, run OpenMagic (auto-detects your dev server)
npx openmagic@latest
```
Run this from your project folder so OpenMagic can find your source files and dev server. A proxied version of your app opens with the toolbar overlaid.
Prefer a permanent install? Install it globally and run `openmagic` directly:
```bash
npm install -g openmagic # install once
openmagic # then run from any project folder
openmagic --version # check your version
```
OpenMagic checks npm on startup and prints a one-line notice when a newer version
is available (with the right update command for how you launched it). Disable the
check with `OPENMAGIC_NO_UPDATE_CHECK=1`.
Requires Node.js 20.19 or newer.
---
## Use it to…
- **Change a running web app by clicking an element** and describing the edit in plain English — no need to hunt for the file.
- **Let an AI fix your UI without a designer** — one click audits hierarchy, spacing, contrast, accessibility, and consistency, then proposes brand-consistent fixes.
- **Edit your real source code from the browser, safely** — every change is shown as a diff, verified against the build, auto-reverted if it breaks, and undoable.
- **Tweak CSS, text, and attributes live**, see the result instantly, then push it to your codebase.
- **Use one AI coding tool across every framework and any LLM** — React/Next.js, Vue/Nuxt, Svelte, Angular, Astro, and static sites; 14 providers and 70+ models with your own key.
---
## Features
| | Feature | Description |
|---|---------|-------------|
| **Select** | Element Selection | Click any element to capture its DOM, computed styles, parent layout, siblings, React props, and component name |
| **Ground** | Smart File Grounding | Server-side route, component, import, and stylesheet matching sends the most relevant files first |
| **Diff** | Atomic Patch Preview | Approve or reject each change. Patch groups apply server-side with rollback support |
| **Retry** | Auto-Retry | If the LLM requests more files, OpenMagic reads them transparently and retries — no manual intervention |
| **Chat** | Markdown Chat | Streaming responses, copy buttons, session persistence across HMR reloads |
| **Net** | Network Profiling | Captures page load timing, TTFB, FCP, and flags slow resources |
| **Img** | Image Attachments | Drag-drop, paste from clipboard, or use the file picker — vision models analyze screenshots |
| **Keys** | Per-Provider Keys | Store a key for each provider. Switch models without re-entering credentials |
| **Plan** | Plan Before Editing | Review an implementation plan before asking the model to generate patches |
| **KB** | Keyboard Shortcuts | Toggle, send, close, minimize — all from the keyboard |
| **Min** | Minimize to Icon | Collapse the toolbar to a small floating button when you do not need it |
---
## How It Works
OpenMagic is a single-port reverse proxy. It sits between your browser and your dev server, injecting the toolbar script into HTML responses. Your project is never modified at install time.
```
+-----------------------+
| Your Browser |
| localhost:4567 |
+---+---------------+---+
| |
HTTP proxy WebSocket
| |
+----------------+ +---+---------------+---+
| Your Dev Server| | OpenMagic Server |
| localhost:3000 |<---| |
+----------------+ | File Read/Write |
| LLM API Proxy |
| (your key, localhost) |
+-----------------------+
```
1. **Proxy** -- All requests forward to your dev server. HTML responses get the toolbar `