Pixel-Agent.ai (IDE Extension)

Continuous Visual Feedback Loop for AI-Powered UI Styling & Repair

Bridge the gap between your browser's rendered UI and your VS Code workspace.

Pixel-Agent.ai is a developer productivity extension designed to create a continuous, hot-reloaded visual repair loop. In combination with the Pixel-Agent Chrome Extension and the underlying AI Agent, it allows developers to visually inspect UI elements directly in the browser, tweak styles, and have code modifications programmatically focused and applied in the IDE.

No more hunting down files, searching for specific CSS or Tailwind classes, or manual copy-pasting. Simply inspect, specify your visual fix, and let the AI handle the rest.

🚀 Key Features

• Embedded Bridge Server: Starts a lightweight Express and WebSocket server (default port 9559) directly inside your VS Code window. No external proxies required.
• Synchronized Element Focus: Upon receiving a visual ticket from the browser, the extension automatically opens the target file, highlights the precise line/column, and positions the cursor.
• Automated Backup & Rollback: Maintains a historical log of the last 20 applied fixes. Before any files are modified, a .bak copy is saved in global storage to allow one-click recovery.
• Tailwind Theme Scanner: Automatically parses local config files (tailwind.config.js/ts/cjs/mjs) to feed custom theme tokens (screens, fonts, colors) directly to the AI agent.
• Live HMR Watchers: Listens to file saves and automatically triggers hot-module replacement (HMR) reload signals back to the browser client.
• Interactive Control Center: A sidebar webview detailing connection statuses, real-time server traffic logs, port configuration, and active rollback management.

🛠 How It Works

graph TD
    A[Chrome Extension Inspector] -->|POST /submit-issue| B(Embedded Local Bridge Server)
    B -->|Locate & Open| C[VS Code Editor Focus]
    C -->|Trigger| D[AI Agent Panel]
    D -->|Edit Code & Save| E[File Watcher / HMR]
    E -->|WS: reload-notify| A

1. Start the Bridge: Click the Pixel-Agent.ai icon in the Activity Bar and click Start Server in the side panel.
2. Inspect & Fix: Use the Chrome Extension to select any element in your browser. Enter your visual requirements or style edits.
3. Automated Handoff: The bridge opens the exact source code file in VS Code at the correct line. The AI Agent panel opens with complete component context, screenshot links, and computed styles.
4. Instant Sync: The AI applies the change, saves the file, and the extension instantly triggers browser hot reloading.

⚡ Extension Settings & Commands

Commands

You can access all extension controls via the VS Code Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

• Pixel-Agent.ai: Start Server — Boots the local Express/WS backend on the configured port.
• Pixel-Agent.ai: Stop Server — Shuts down the active bridge instance.

Sidebar Control Panel

• Connection Status: Glows green when active and red when stopped.
• Port Configuration: Customize the server listening port (default 9559) to avoid port collisions.
• Rollback History: Track and revert up to 20 visual fixes with one-click backups.

📦 Requirements & Prerequisites

To fully run the visual repair loop, ensure you have:

1. VS Code version 1.75.0 or higher.
2. The Pixel-Agent Chrome Extension installed in your browser.
3. A running local development server (such as Vite, Next.js, or Webpack) in your workspace supporting Hot Module Replacement.

[!NOTE] All target files are backed up locally in VS Code's extension-global storage directory prior to applying AI changes, ensuring your workspace is always safe.

⚖️ License

This extension is licensed under the MIT License.