PulseDev

Product Introduction

1. Definition: PulseDev is a desktop application and local development tool that integrates a visual feedback layer directly into a developer's browser. Technically, it is a localhost server (localhost:3899) that injects a client-side script (widget.js) into a running development site, enabling in-context, AI-powered code editing.
2. Core Value Proposition: It exists to eliminate the friction of reporting and fixing visual UI bugs in web development. Instead of taking screenshots, writing descriptive tickets, or manually hunting through code, developers can directly click on the problematic element in their live localhost preview, describe the issue in natural language, and have an AI coding agent (Claude Code, Codex, Gemini CLI, or OpenCode) propose and execute the precise source code change. The core value is in-context visual feedback to code change, with a mandatory human-in-the-loop approval before any file is written.

Main Features

1. Visual Element Inspector & Annotation: The tool activates an "Inspect" mode that overlays the running localhost site. Hovering highlights DOM elements, displaying their CSS selector (e.g., .hero__actions > a.btn.btn--light) and pixel dimensions. Users can click to select a single element or Shift-click to batch-select multiple elements for a single task. This ensures the AI agent receives the exact, unambiguous target.
2. AI-Powered Code Editing with Local Agents: PulseDev acts as a bridge between the visual interface and the user's local codebase. It packages the selected element's selector, current page URL, viewport context, and the user's natural language instruction (e.g., "Drop the arrow, the label is enough") into a task. It then executes this task using a user-configured AI coding agent (Claude Code, Codex, Gemini CLI, or OpenCode) that runs locally on the developer's machine, using their existing API credentials and plan.
3. Live Diff Review and Approval Workflow: This is the critical differentiator. The AI agent's work is streamed in a live log widget next to the page, showing every file read and edit. The proposed code diff is displayed directly within the context of the live site. The developer must explicitly Approve the change for it to be written to disk, or Reject to roll it back. This creates a safe, auditable, and iterative code review process on the page itself.
4. Project & Task Management Dashboard: The desktop app manages multiple local projects (e.g., hearth-store, lumen-docs), each with its own local server instance and configurable AI agent. It provides a centralized activity feed and task board showing queued, running, in-review, and completed changes across all pages, functioning as a visual bug-tracking and resolution system.

Problems Solved

1. Pain Point: The inefficient feedback loop for visual and UI bugs. The traditional process involves a developer or designer taking a screenshot, pasting it into Slack or a ticket tracker (like Jira), writing a description, and a developer manually interpreting the issue, locating the correct component/file, and implementing the fix. This is slow and prone to miscommunication.
2. Target Audience: Frontend Developers and Full-Stack Engineers working with modern frameworks (Vue, React, Svelte, plain HTML) who need to iterate quickly on UI. UI/UX Designers who can directly provide precise, actionable feedback on a live prototype. Product Managers and QA Testers who can log visual issues without needing deep technical knowledge of the codebase structure.
3. Use Cases: Rapid UI Iteration: Changing button styles, typography, spacing, or copy across multiple components based on live feedback. Visual Bug Fixes: Correcting contrast issues, fixing broken layout at specific breakpoints, or aligning elements. Design System Consistency: Enforcing component variants (e.g., "make all 'Add to cart' buttons use the primary variant") directly on the rendered site.

Unique Advantages

1. Strengths & Limitations (Pros & Cons):

   • Pros:
     • Unmatched Context: Provides the AI agent with the exact selector, page state, and viewport, drastically increasing first-attempt accuracy.
     • Developer Safety & Control: The mandatory approval step ensures no unwanted changes are made automatically; the diff is reviewed in context.
     • No Vendor Lock-in: Works with multiple leading AI coding agents (Claude, Codex, Gemini, OpenCode) using the user's existing subscriptions.
     • Local-First & Private: All data (tasks, diffs) is stored locally in SQLite; no code or screenshots are sent to a cloud service besides the configured AI agent's API.
     • Integrated Workflow: Combines inspection, task creation, AI execution, and code review into a single, seamless loop within the development browser.
   • Cons:
     • Localhost-Only: Only works on sites running on your local machine. Cannot be used to provide feedback on staging or production environments directly.
     • Framework Dependency: While it supports multiple frameworks, the AI agent's effectiveness is dependent on its ability to correctly parse and edit the specific project's code structure (Vue SFCs, JSX, etc.).
     • Agent Cost & Reliability: The quality of changes is directly tied to the chosen AI agent's capabilities and the user's own API costs/limits.
     • Desktop App Requirement: Requires installing and running a separate desktop application (currently macOS-only, Windows "coming soon").

2. Key Alternatives & Differentiation:

   • Built-in Editor Previews (e.g., Cursor, Windsurf): These IDEs have AI agents that can preview changes, but they are locked inside the editor's own browser preview pane. PulseDev differentiates by working inside the developer's actual browser (Chrome, Safari, etc.), including pages behind authentication, and allowing the use of any preferred AI agent.
   • Copy-Paste/Visual Grabber Tools (e.g., V0, Screenshot-to-Code tools): These tools take a screenshot or design and generate code from scratch. PulseDev differentiates by editing existing, running codebases rather than generating net-new code. It understands the project's structure and makes surgical changes, maintaining the existing architecture and logic.
   • Traditional Bug Trackers (Jira, Linear) + Manual Coding: The old method. PulseDev differentiates by collapsing the entire "report -> triage -> locate -> code -> verify" cycle into a single "point -> describe -> approve" action, happening in real-time on the live site.

Frequently Asked Questions (FAQ)

1. How does PulseDev work with my existing AI coding agent? PulseDev is a desktop application that runs a local server. You connect it to your local project folder and configure it to use your existing AI agent's CLI or API (like Claude Code, GitHub Copilot/Codex, or Gemini CLI). It uses your credentials and token quota; there is no separate PulseDev AI or token cost.
2. Is PulseDev safe to use on my production code? PulseDev is designed for local development only. It injects its script into your localhost server. It should not and cannot be used on a live production website. The approval workflow ensures no changes are made to your source files without explicit review, providing a safety net during development.
3. What web frameworks and languages does PulseDev support? PulseDev works with any frontend that renders HTML in a browser, including Vue.js, React, Svelte, Solid, and plain HTML/CSS/JavaScript. The AI agent's ability to correctly edit the source files (e.g., .vue, .jsx, .svelte files) depends on the agent's own training and capabilities.
4. Can my team collaborate using PulseDev? PulseDev is primarily a local, individual developer tool. Tasks and history are stored locally per machine. For team collaboration, you would share the generated code changes via Git after approval. It does not currently have a cloud-based multi-user task management system.
5. What is the difference between the Free and Pro plan? The Free plan is fully functional but limits you to one active project at a time and one AI agent choice. The Pro plan ($12/month) offers unlimited concurrent projects, the ability to switch between all supported AI agents, and run multiple local development servers simultaneously, which is essential for developers working on multiple codebases.