Click to edit UIwith Claude Code.
Point at the element that’s wrong in your own browser, say what it should be, and PulseDev hands it to the Claude Code you already use. The diff waits for your approval.
How does PulseDev run Claude Code?
It runs the claude CLI in print mode and reads its stream-json output line by line.
PulseDev starts the claude CLI in print mode with stream-json output, in your project folder. It also gives Claude read access to the folder where PulseDev keeps element screenshots, so Claude can look at the element you clicked.
Every message and tool call Claude makes shows up in the widget as it happens: “Reading src/components/Header.vue”, “Searching for `.btn--outline`”, “Running `npm run lint`”. When you reply to a finished fix, PulseDev resumes the same Claude session with --resume, so Claude keeps the context.
PulseDev removes ANTHROPIC_API_KEY and ANTHROPIC_AUTH_TOKEN from the environment before it starts Claude. That way Claude Code runs on the account you signed in with, not on a stray API key in your shell.
The prompt goes in on stdin. PulseDev reads the stream-json output and turns each text block and tool call into the activity log next to the element.
What does a fix with Claude Code look like?
The same loop for every agent. The widget on your page talks only to the PulseDev server on your machine.
- Point. Turn on Inspect in the widget and click the element. Shift-click to add more.
- Describe. Write the change in plain words and pick Claude Code as the agent. The widget sends your note with the page URL, the element’s selector and markup, styles, recent console errors and failed requests, a page outline and a screenshot of the element.
- Watch. PulseDev starts Claude Code in your project folder. Its reads, searches and commands show up next to the element as they happen.
- Approve. In review mode PulseDev asks the agent to propose a diff rather than edit files. Approve applies the proposal, Reject discards it, or reply to ask for another pass in the same session.
Runs are queued one at a time per project. Review the applied changes in your editor before committing them with your usual git workflow.
How do I set up Claude Code with PulseDev?
You need the agent CLI installed and signed in. PulseDev finds it on your PATH and in the usual install folders. Settings › Agents has detection and custom-path controls for Claude Code, Codex and Gemini CLI.
- Install PulseDev. Download the app, add your project folder and click Set up project. That adds the widget script tag (or the Vite plugin) to your dev site.
- Install Claude Code and sign in. Install the claude CLI and run it once in a terminal to sign in. PulseDev doesn’t ask for an API key.
- Check Settings › Agents. Open PulseDev and go to Settings › Agents. Claude Code should show as found, with its path and version. If you installed it somewhere unusual, set a custom path there.
- Pick it as your agent. Make Claude Code the default agent, or choose it in the widget when you send a fix.
- Optional: connect your editor. Connect editor (MCP) writes the PulseDev MCP server into
.mcp.json(Claude Code),.cursor/mcp.jsonand.vscode/mcp.json, so your editor can list, read and close annotations.
{
"mcpServers": {
"pulsedev": {
"type": "http",
"url": "http://localhost:3899/mcp",
"headers": { "Authorization": "Bearer YOUR_TOKEN" }
}
}
}The app fills in your project’s port and token. The MCP server offers four tools: list_annotations, get_annotation, update_annotation_status and get_element_context.
Claude Code and PulseDev: common questions
- Does Claude Code have click-to-edit built in?
- The Claude Code desktop app has a Browser pane where you can select elements in a preview of your app. PulseDev works in your own browser instead, including pages behind your login, and runs the claude CLI you already have.
- Do I pay for extra tokens?
- No. PulseDev starts your own claude CLI with your own login. Usage counts against your Claude plan the same way it would in a terminal. PulseDev has no AI service of its own.
- Can Claude change files without asking?
- Review mode asks Claude to read files and propose a diff rather than edit files. PulseDev applies the proposal when you click Approve. This is an instruction, not an enforced read-only sandbox; Claude’s own permissions still apply. If you turn on Auto-apply in the widget, PulseDev starts Claude with --dangerously-skip-permissions, records edits, and offers Revert for recorded changes.
- Can Claude Code read my annotations over MCP too?
- Yes. Connect editor (MCP) in the app writes a .mcp.json file in your project that points Claude Code at the PulseDev server, so an interactive Claude session can list annotations, read the captured element context and close them.
Claude Code docsPulseDev vs Claude Code Desktop previewHow PulseDev handles your code
Other agents PulseDev runs
- CodexPulseDev gives the Codex CLI the element you mean, its selector, styles and a screenshot. In review mode, it asks Codex for a proposed diff that you review and apply on the page.
- Gemini CLIPulseDev runs Gemini CLI in ACP mode, sends it the element you clicked and what you want changed, and shows Gemini’s work next to the element until you approve the diff.
Keep Claude Code.Add a pointer.
Free to start. No credit card.