lux-edit

In-browser visual editing, annotation, and review overlay for AI coding agents.

<div align="center"> <video src="https://github.com/user-attachments/assets/8bd9ec95-bdaf-489a-89b0-fcc444611838" title="Lux Product Demo" autoplay loop muted playsinline width="100%"></video> </div> <picture> <source media="(prefers-color-scheme: dark)" srcset="./docs/workflow-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="./docs/workflow-light.svg"> <img alt="lux-edit Workflow" src="./docs/workflow-light.svg" width="100%"> </picture>

[!NOTE] Security & Privacy Guarantee: lux-edit runs 100% locally on 127.0.0.1 and communicates with coding agents via standard stdio (MCP). There is zero telemetry, no remote analytics, and no external network calls. All diffs, annotations, and sessions are stored strictly on your local disk in .visual-edit/. Audited in PRIVACY.md and SECURITY.md.

lux-edit injects a live visual editing layer into your web app or static HTML. Adjust styling, edit text directly in the DOM, and highlight words or drop comment pins. Everything syncs in real time as structured diffs to your AI coding agent via MCP.

---

Quickstart

1. Installation

Pick the method that best fits your workflow:

| Method | Command | Best For | | --- | --- | --- | | Claude Code Plugin | claude plugin marketplace add David-Sat/lux-edit<br>claude plugin install lux-edit | Claude Code CLI users | | Current Project | npx lux-edit init | Zero global pollution (.mcp.json + skills) | | Global Machine | npm i -g lux-edit && lux init -g | Interactive setup for Cursor, Antigravity, Claude, Windsurf |

<details> <summary><strong>Interactive Global Installer & Advanced Options</strong></summary>

Running lux init -g provides an interactive checklist of detected coding tools:

Select agents to configure with lux:
  1. [●] Google Antigravity    (detected)
  2. [●] Claude Code           (detected)
  3. [○] Claude Desktop        (not detected)
  4. [●] Cursor                (detected)
  5. [○] Windsurf              (not detected)

Enter numbers (e.g. 1,2), "a" for all, or press ENTER for detected defaults.

• Non-interactive / CI: lux init -g -y (auto-configures detected tools)
• Target single agent: lux init -g --agent cursor
• Custom path (Zed, Aider, etc.): lux init --path ~/.config/zed/settings.json

</details>

---

2. How to Use (Local App Editing vs. Web Research)

Mode A: Local Dev & Code Editing (/lux)

1. Start Review: In your AI agent chat, type /lux (or in terminal: lux http://localhost:3000 or lux ./index.html).
2. Edit in Browser: Open http://127.0.0.1:4320:
   • Press V to visually inspect elements, tweak CSS, or double-click text to edit directly.
   • Press C to drop comment pins or drag across text to comment on specific words.
3. Apply Changes: Tell your agent /lux. The agent reads your visual edits and comments over MCP, updates your code, and the browser auto-refreshes.

Mode B: Web Research, UI Teardowns & Article Discussion (/lux-web)

1. Inspect Any Website: Ask your agent /lux-web on a URL (or run in terminal: lux https://overreacted.io).
2. Annotate & Question: Open http://127.0.0.1:4320:
   • Drop pins on impressive UI components ("How did they build this glassmorphic card?").
   • Highlight confusing paragraphs in articles ("Can you explain the intuition behind this section?").
3. Discuss with Agent: Click Submit Review and ask your agent to review. The agent analyzes the DOM paths, computed CSS, and your notes to deconstruct the implementation or break down the text.

---

Architecture

lux-edit bridges the gap between browser inspection and your coding agent's local filesystem context:

<picture> <source media="(prefers-color-scheme: dark)" srcset="./docs/architecture-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="./docs/architecture-light.svg"> <img alt="lux-edit System Architecture" src="./docs/architecture-light.svg" width="100%"> </picture>

---

Shortcuts

| Key | Action | | --- | --- | | V | Visual Edit (select elements, tweak styles, box model, double-click text) | | C | Comment Pin (click element or highlight text selection) | | Enter | Save active comment / finish text edit | | Shift + Enter | Multi-line newline inside comment | | Esc | Deselect element or close active popover / drawer |

---

Standalone CLI Options

# Target running dev server (Next.js, Vite, Remix, etc.)
lux http://localhost:3000

# Target static HTML file
lux ./index.html

# Target live web pages for UI teardowns or article discussion
lux https://overreacted.io
lux https://news.ycombinator.com --port 4330

# Custom port or behind cloud proxies (SageMaker, Codespaces, JupyterHub)
lux http://localhost:5173 --port 4401 --base-path /codeeditor/default/ports/4401

<details> <summary><strong>Manual MCP Server Configuration</strong></summary>

Add this to your .mcp.json or agent config:

{
  "mcpServers": {
    "lux": {
      "command": "lux",
      "args": ["mcp"]
    }
  }
}

Or with Claude Code CLI:

claude mcp add lux -- lux mcp

Available MCP Capabilities

• Tools:
  • lux_get_pending_review: Instantly retrieves active comments, text selections, and visual diffs.
  • lux_get_session: Retrieves details for a specific session ID.
  • lux_list_sessions: Lists all recorded review sessions.
• Resources:
  • lux://pending-review: Real-time markdown context of active annotations and style edits for direct agent attachment.
• Prompts:
  • lux_apply_review: One-click prompt template to apply review changes to the codebase.

</details>

---

Updating & Auto-Updates

Single-Command Upgrade: lux update

To upgrade lux-edit and re-sync all agent skills (~/.claude/skills/lux/SKILL.md, Antigravity plugins, MCP configs):

lux update
# or without global install:
npx lux-edit update

Options:

• lux update --check: Check for available updates without making changes.
• lux update --force: Re-sync agent skills and templates even if already on the latest version.

---

In-Browser Update Reminder

When reviewing in your browser, a subtle status pill appears in the drawer footer whenever a new version is published. Clicking it copies lux update to your clipboard with a link to the release changelog.

---

Auto-Updates & Security Transparency

By default, lux init uses pinned package execution (npx -y lux-edit mcp) to guarantee stability, transparency, and prevent silent code execution on your machine.

If you prefer completely hands-off updates across all your secondary devices and laptops so your coding agents always launch the latest tools without manual commands:

# Opt-in to automatic @latest MCP execution
npx lux-edit init --auto-update

When enabled, MCP client configurations are set to npx -y lux-edit@latest mcp, pulling new releases as soon as they are published. You can revert back to pinned at any time with npx lux-edit init.

Uninstalling & Cleanup

# 1. Cleanly remove MCP servers and skills from all agents (or without -g for workspace)
lux uninstall -g

# (or remove from a custom path: lux uninstall --path ~/.config/zed/settings.json)
# (or with npx: npx lux-edit uninstall -g)

# 2. Remove the CLI package
npm uninstall -g lux-edit

---

Architecture & Principles

Read our Design Principles to understand how Lux is engineered for agent efficiency, single-command simplicity, and context economy.

---

License

MIT © 2026 David Satomi. Inspired by ui-review. • Design Principles • Privacy Policy