How to Use PulseDev: The Beginner's Guide to Click-to-Fix UI Bugs With Your Coding Agent
CodexFuse Team · 2026-11-03T01:43:20.827Z · 12 min read min read
PulseDev is the macOS app that lets you click any UI bug and have Claude Code, Codex, Gemini CLI, or OpenCode fix it. This beginner guide covers install, the 3-step loop, pricing, and pitfalls.
How to Use PulseDev: The Beginner's Guide to Click-to-Fix UI Bugs With Your Coding Agent
What Is PulseDev, Exactly?
PulseDev is a macOS app that turns UI fixes into a three-step loop: point at the broken element on your running site, describe the change in plain words, and approve the diff your coding agent produces. Nothing touches your source files until you approve, so the agent works inside a review gate you control. If you are learning how to use PulseDev, the whole mental model is "point, describe, approve" — everything else in the product is scaffolding around those three moments.
One clarification up front, because the search results for this keyword are messy: PulseDev is the macOS coding-agent tool from pulsedev.app. It is not the Pulse Device fitness gadget, not the pulse_dev Dart SDK on pub.dev, and not DevPulse AI, a VS Code extension that explains Python errors. The product this guide covers launched on Product Hunt on October 26, 2026, and works with the coding agents you already use — Claude Code, Codex, Gemini CLI, and OpenCode. If your bug involves an API call misbehaving behind the UI, you can verify the endpoint's response separately with a REST API tester before deciding whether the fix belongs in the frontend at all.
PulseDev's own tagline captures the pitch: "Point at your site. Approve the fix." You click any element on your running site, say what is wrong, and the agent edits the real source. The widget streams what the agent does — every read, edit, and command — as a live log, and each fix lands in a review queue before it is written. This guide walks through the full beginner arc: install, the first fix, choosing an agent, the Vite plugin, pricing, and the mistakes that waste a new user's first afternoon.
How Does the PulseDev Loop Work?
The loop has exactly three steps, and understanding them before you install anything saves you the usual first-hour confusion. Every fix you will ever do in PulseDev is some version of this:
- Point at the thing that is wrong. Turn on Inspect mode and hover over your page. PulseDev outlines each element with its selector and size as you move. If the problem spans more than one element, Shift-click to select several at once.
- Say what it should be. Write the change in plain words next to the element. The selector, the page, and the viewport travel with your message automatically, and you pick which agent takes the task. Pressing ⌘↵ sends it.
- Review it on the page, then approve. The agent edits your source and the change shows up live in your browser. Read the diff in the widget: Approve writes it to your files, Reject rolls it back, or reply to iterate. An auto-apply mode exists if you prefer, but the default keeps you in the loop.
The key design decision is that the agent never writes to your files silently. Beginners coming from terminal-based agents — where the agent edits files directly — should reset their expectations here: the browser widget is a mandatory checkpoint. If you already work with a terminal agent, the Claude Code beginner guide explains that workflow; PulseDev adds the visual review layer on top of it.
How to Install PulseDev: The Full pulsedev Tutorial Setup
Installing PulseDev has two parts: the desktop app and the in-page widget. Download the desktop app from pulsedev.app first — it is the control surface where you manage projects, servers, and agents. Each project gets its own local server, port, and agent, and you switch between them from the app's sidebar.
Next, add the widget to your local site with a single script tag. That tag is what gives you Inspect mode, the click-to-select overlay, and the review panel inside the page. If you use Vite, you can additionally install the PulseDev Vite plugin, which adds source mapping where supported so the agent can locate the real source file behind a compiled bundle more reliably. For plain HTML projects there is no plugin needed; just remember to remove the script tag before you deploy, since the widget is a development tool.
PulseDev works with Vue, React, Svelte, and plain HTML, it runs in your own browser, and it works on pages behind a login — the widget attaches to your local page, so authenticated states are fine. The app is macOS today, with Windows listed as coming soon. If your local stack runs in containers, the Docker beginner guide covers getting a local server up that PulseDev can attach to.
Your First Fix, Step by Step
Start with a trivial, visible bug — a button with the wrong label, a heading in the wrong size — so the loop's mechanics are obvious before the stakes are real. Open your site locally, open the PulseDev app, and make sure the widget is visible on the page.
Turn on Inspect mode and hover until the element you want is outlined with its selector and size. Click it — or Shift-click several elements if the fix spans more than one. A small input appears next to the element: type the change in plain words, the way you would describe it to a colleague ("this button should say 'Checkout' and sit on the right, with 16px of margin"). Check that the right agent is selected, then press ⌘↵.
The widget's live log starts streaming: you will see the agent read files, locate the component, and make its edit. The change appears on your page. Open the diff in the widget and read it — this is the habit that matters. If the diff is right, hit Approve and it is written to your files. If it is wrong, hit Reject to roll it back, or reply with a correction ("keep the margin but use the secondary button style") to iterate without starting over. The reply-to-iterate path is the one beginners underuse: it keeps the agent's context about your page instead of resetting the conversation.
Which Coding Agent Should You Use?
PulseDev supports four agents: Claude Code, Codex, Gemini CLI, and OpenCode. You pick per task, and the honest beginner answer is to start with whichever agent you already use and already pay for. PulseDev calls the coding agent you already pay for — there are no extra PulseDev tokens, and your agent's usual usage limits and provider charges still apply.
Because the cost lives on your agent subscription, the "which agent" question is really a "which subscription do I already have" question. All four are capable of the edit-diff-review cycle; the differences that matter for beginners are response speed on small edits and how chatty the agent is in its explanations, which the live log surfaces anyway. If you have not picked a terminal agent yet, the terminal-based Claude Code workflow is a reasonable starting point, and the OpenClaw beginner guide covers a different agent-flavored workflow for comparison. Try one fix with each agent you have access to and keep the one whose diffs you find easiest to read.
What the pulsedev vite plugin Actually Does
The Vite plugin exists for one reason: source mapping. When your app runs through Vite's dev server, the code the browser executes is transformed — the agent needs to map a clicked element back to the real source file, and the plugin supplies that mapping where supported. Without it, the agent still gets the selector and your description, but its file-location step is less precise.
Practical notes: the plugin only runs in development, so it never affects your production build. Add it alongside the widget script tag, use it while you are fixing, and remove the script tag (not the plugin config — the tag) before deploying. If your project is plain HTML rather than a Vite app, skip the plugin entirely; it has nothing to do there. Beginners sometimes assume the plugin is the product — it is not. It is a helper for the "point" step; the approve-before-write loop is the product.
How Your Data Stays Local
Every task, message, and diff in PulseDev lives as JSON files in a ~/PulseDev folder on your own machine. There is no PulseDev cloud account and no hosted server involved — the app runs locally, the agent runs through your own subscription, and your fix history sits on your disk. One licence is per person, activated in the desktop app.
This matters for beginners evaluating whether to let an agent touch a client project: the data never leaves your machine except through your agent provider's normal API calls. Keep that folder in mind when you clean up disk space, and do not delete it casually if you want your fix history. If you version-control your project, the Git beginner guide shows how to commit the agent's approved diffs so every accepted fix has a proper history.
What Each Step Sends to Your Agent (pulsedev coding agent ui bug context)
The reason the "point, describe, approve" loop works is the context that travels automatically. When you Shift-click an element and press ⌘↵, the agent does not receive just your sentence — it receives a small packet of page state. Here is what each step contributes:
| Step | What you do | What the agent receives |
|---|---|---|
| Point | Hover, inspect, Shift-click elements | CSS selector, element size, page URL, viewport size |
| Describe | Type the change in plain words | Your message, linked to the selected element(s) |
| Approve | Read the diff, Approve or Reject | A write-or-rollback decision on a concrete diff |
That automatic context is the whole advantage over describing a UI bug in a chat window, where you would type the selector yourself and probably get it wrong. The Vite plugin strengthens the "point" row by adding source mapping where supported, so the agent jumps closer to the real file.
PulseDev Pricing: Free vs Pro, Verified Today
PulseDev's pricing changed shape at launch and the old copy is still floating around, so verify at the source. As checked today on pulsedev.app and its LemonSqueezy storefront:
| Plan | Price | What you get |
|---|---|---|
| Free | $0 forever | 1 project, 1 agent of your choice, unlimited agent runs, widget + task board + diff review |
| Pro | $12/month | Unlimited projects, every supported agent, unlimited runs, several local servers at once; yearly plan saves 33%; 5-day free trial, cancel anytime |
| Founder Lifetime | $149 once | First 200 buyers only; everything in Pro, no subscription |
A note on the $18 figure: the Product Hunt page still says new subscriptions would be $18/month after November 3, 2026. As of today, the vendor homepage and the live checkout both show Pro at $12.00 — the $18 was launch-window copy, not the current price. Start on Free; one project and unlimited runs is enough to learn the loop, and Pro only becomes worth it when you are juggling multiple projects or want every agent available.
PulseDev vs Faylee: Two Different Mechanics
Beginners sometimes confuse PulseDev with bug-report tools because both involve "agent fixes UI bug." The mechanics are different, and the difference decides which one you need. Faylee (covered in a separate guide) is a report pipeline: it records your screen, console, and network activity into a one-link report your coding agent can investigate. PulseDev is an edit loop: you point at the broken element yourself and watch the fix land in your browser.
| PulseDev | Faylee | |
|---|---|---|
| Starting point | You see the bug on your own site | Someone records a bug happening |
| Your action | Click the element, describe the fix | Share a recording link |
| Agent's input | Selector + your words + live page | Video + console + network timeline |
| Approval | Diff review in the widget before write | Agent investigates from the report |
Use PulseDev when you are the developer staring at the broken page. Use a report-pipeline tool when the bug was found by someone else — a tester, a user — and you need the full context of how it happened. Neither replaces the other.
7 Beginner Mistakes That Waste Your First Afternoon
| # | Mistake | What to do instead |
|---|---|---|
| 1 | Describing the fix without selecting the element | Always Shift-click the element first; the selector is the agent's anchor |
| 2 | Writing vague requests ("fix the layout") | Say what it should be, concretely: labels, sizes, positions |
| 3 | Approving diffs without reading them | Read every diff; approval is the product's safety guarantee |
| 4 | Deploying with the widget script tag still in | Remove the tag before deploying; it is a dev tool |
| 5 | Expecting the Vite plugin on plain HTML | The plugin is Vite-only; plain HTML skips it entirely |
| 6 | Starting over instead of replying to iterate | Reply inside the task; the agent keeps your page's context |
| 7 | Quoting the stale $18 price | Check pulsedev.app; Pro is $12/month as of this writing |
Sources
Product facts, pricing, and the three-step loop were verified on November 3, 2026 against: the PulseDev homepage (pulsedev.app); the PulseDev Product Hunt launch page (published October 26, 2026, updated November 2, 2026); the PulseDev Pro checkout on pulseshot.lemonsqueezy.com; the GPTOnline editorial profile "PulseDev: Point At A UI Bug And Let Your Coding Agent Fix It" (published ~October 28, 2026); and the DevPulse AI listing on the VS Code Marketplace (for the name disambiguation). Where the Product Hunt copy and the live vendor site disagreed on pricing, this article follows the vendor site and checkout.
Frequently Asked Questions
Is PulseDev free?
Yes — the Free plan costs $0 forever and includes one project, one agent of your choice, unlimited agent runs, and the full widget, task board, and diff review. Pro ($12/month) adds unlimited projects, all supported agents, and multiple simultaneous local servers.
Which coding agents work with PulseDev?
Claude Code, Codex, Gemini CLI, and OpenCode. You choose per task, and you pay your agent's normal subscription — PulseDev adds no token charges of its own.
Does PulseDev work with React, Vue, and Svelte?
Yes — plus plain HTML. The optional Vite plugin adds source mapping where supported for Vite-based projects. The widget runs in your own browser and works on pages behind a login.
Is PulseDev available on Windows?
Not yet. The app is macOS today, with Windows listed as coming soon on the vendor site.
Can PulseDev write to my files without my approval?
No. Nothing is written until you approve the diff in the widget; Reject rolls the change back, and you can enable auto-apply only if you choose to. The review gate is on by default.
