lux-edit

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

MCP Agent Plugins TypeScript License: MIT Privacy

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 add https://github.com/David-Sat/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

Interactive Global Installer & Advanced Options

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

2. How to Use (3 Steps)

Start Review: In your AI agent chat (Claude Code, Cursor, Antigravity, etc.), type:
```
/lux
```
(Or start manually in terminal: lux http://localhost:3000 or lux ./index.html)
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.
Apply Changes: Tell your agent:
```
/lux
```
The agent reads your visual edits and comments over MCP, updates your code, and the browser auto-refreshes.

Architecture

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

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

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

Manual MCP Server Configuration

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.

Update & Uninstall

Updating

From npm:

# Update CLI to latest published release
npm install -g lux-edit@latest

# Refresh agent skills & MCP configs
lux init -g

From local repository (monorepo / local development):

# Rebuild the monorepo packages
pnpm build

# Refresh agent skills & MCP configs from the current local build
lux init -g

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