visualpatch

v2.1.0

Published

21 days ago

Universal in-browser visual feedback & pinpoint annotation tool for web development with AI pair programmers.

0High
0Medium
0Low

visualpatch ai feedback visual-feedback annotator devtools claude cursor chatgpt windsurf copilot antigravity vite nextjs react

🎯 VisualPatch v2.0

Universal In-Browser Visual Feedback & Autonomous UI Review Tool for AI Pair Programmers.
Effortlessly guide Claude, Cursor, ChatGPT, Windsurf, Copilot, Antigravity, and Devin with pinpoint visual precision and zero window switching.
Crafted with an ultra-premium CleanShot X + Apple Pro frosted glass aesthetic.

[!TIP]
🤖 1-Prompt Autonomous Setup for AI Agents
Want your AI assistant to install and configure VisualPatch automatically? Simply tell your agent:
"Install VisualPatch in this project according to AGENTS.md"
Any AI pair programmer (Claude Code, Antigravity, Cursor, Windsurf, Devin) will read AGENTS.md and configure the component, dev server middleware, and live review loop in seconds with zero manual effort.

⚡ What Makes VisualPatch v2.0 Magical

🔄 The Zero-Window-Switching Live Loop

🚀 Key Features

⚡ Autonomous Live Review Loop (/vp-live): Edit frontend UI live directly from your browser without ever switching windows back to the IDE.
🔍 React Fiber & Component Source Inspector: Automatically resolves the exact React/Vue component name (e.g. <HeroSection />) and source code file path + line number (src/components/HeroSection.jsx#L42).
💎 CleanShot X + Apple Pro Frosted Glass UI: Obsidian acrylic dock with multi-layer depth shadows, subtle hairline borders, and hardware-accelerated micro-interactions.
🎯 Pixel-Perfect Element Inspector: Hover over any DOM node with real-time bounding box highlighting and tag dimensions.
📸 Spotlight Area Screenshot Marquee Tool: Drag a spotlight box over any element or section with true-color subject fidelity and live acrylic dimension capsule (953 × 393 PX).
🖼️ Auto-Stitched Multi-Screenshot Strip: Capturing multiple screenshot pins automatically stitches them into one consolidated image strip, bypassing OS single-image clipboard limits.
💾 Zero-Token Local Artifact Storage: Saves high-res crops as .visualpatch/preview_1.png on local disk, keeping prompt tokens under ~80 tokens (0 base64 waste).
⌨️ Intuitive Keyboard Flow: Press Ctrl+Enter to Send to Agent, Enter to save notes, Esc to toggle inspect mode, and S for area snapshots.
🖐️ Draggable Anywhere: Drag the toolbar or collapsed capsule to any corner of your screen—persists smoothly across page refreshes.
🛡️ Zero Telemetry / 100% Local: Runs strictly on local development domains (localhost, 127.0.0.1, local ports). No external servers, no tracking, zero analytics.

⌨️ Keyboard Shortcuts

🤖 Ask Your AI Agent to Install It (Zero Effort)

You can literally just tell your AI coding assistant:

"Install VisualPatch in this project and enable live review mode."

Your AI assistant will automatically read AGENTS.md and set up the component, dev server middleware, and background watcher in 5 seconds.

🚀 Manual Installation Options

Option 1: Instant Setup via `npx` (Fastest)

npx visualpatch init

The interactive CLI will automatically detect your framework (Vite, Next.js, React, Vue, Astro, HTML) and configure VisualPatch.

Option 2: Install via `npm` / `pnpm` / `yarn`

npm install -D visualpatch
# or
pnpm add -D visualpatch
# or
yarn add -D visualpatch

React / Vite (`src/App.jsx`)

import { VisualPatch } from 'visualpatch';

export default function App() {
  return (
    <>
      <YourAppContent />
      {import.meta.env.DEV && <VisualPatch />}
    </>
  );
}

Next.js App Router (`app/layout.jsx`)

import { VisualPatch } from 'visualpatch';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === 'development' && <VisualPatch />}
      </body>
    </html>
  );
}

Option 3: Download Chrome Extension (`.zip`)

Download latest release: VisualPatch-v2.0.0.zip (or clone the repo).
Unzip the package.
Open chrome://extensions (or edge://extensions, brave://extensions).
Enable Developer mode toggle.
Click Load unpacked and select the folder.
Open any localhost tab — the ● V dock appears automatically!

Option 4: Standalone CDN `<script>` Tag (Vanilla HTML)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/vanilla.js" defer></script>

📋 Generated Task Queue (`.visualpatch/inbox.md`)

When you hit ⚡ Send to Agent (Ctrl+Enter), VisualPatch produces a clean, token-efficient markdown task:

# 📌 VisualPatch UI Task Queue
> **Source URL:** `http://localhost:3000/`  
> **Total Items:** 1

### Item #1: `section.hero > div.cta-wrap > button.cta-primary`
- **React Component:** `<HeroSection>`
- **Source File:** [`src/components/HeroSection.jsx#L42`](file:///.../src/components/HeroSection.jsx#L42)
- **Rendered Text:** "Get Started"
- **Visual Proof:** ![Screenshot 1](file:///.../.visualpatch/preview_1.png)
- **Requested Change:** Make button glow cobalt and increase horizontal padding to 24px

🔒 Privacy & Security

Strict Localhost Scope: Only activates on localhost, 127.0.0.1, 0.0.0.0, .local, or explicit port numbers.
Zero Third-Party Network Requests: All logic, state, and coordinates are handled entirely client-side.
Isolated Shadow DOM: UI styles are completely encapsulated in Shadow DOM and will never bleed into or conflict with your project's stylesheets.

📄 License

Distributed under the MIT License. See LICENSE for more information.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎯 VisualPatch v2.0

🤖 1-Prompt Autonomous Setup for AI Agents

⚡ What Makes VisualPatch v2.0 Magical

🔄 The Zero-Window-Switching Live Loop

🚀 Key Features

⌨️ Keyboard Shortcuts

🤖 Ask Your AI Agent to Install It (Zero Effort)

🚀 Manual Installation Options

Option 1: Instant Setup via npx (Fastest)

Option 2: Install via npm / pnpm / yarn

React / Vite (src/App.jsx)

Next.js App Router (app/layout.jsx)

Option 3: Download Chrome Extension (.zip)

Option 4: Standalone CDN <script> Tag (Vanilla HTML)

📋 Generated Task Queue (.visualpatch/inbox.md)