Point at the bug.
Ship the prompt.
The slow part was never the AI fixing it. It was turning "that button is broken" into a prompt your agent can act on. BugToPrompt records what happened and writes that prompt for you.
One click on any tab, no code in your site. It works once you allow that site from the popup, and never runs anywhere else.
# Checkout button does nothing on the cart page
## Steps to reproduce 1. Open /cart with 2 items 2. Click "Proceed to checkout" 3. Nothing happens, no navigation, no error toast ## Element button.checkout-cta (text: "Proceed to checkout") selector: main > section.cart > button.checkout-cta ## DOM context <button class="checkout-cta" disabled=""> is rendered with disabled set while cartTotal is still 0 on first paint. ## Expected Button enabled once items load, navigates to /checkout. ## Actual Button stays disabled, onClick never fires.
- Cursor
- Claude Code
- GitHub
MIT · client-side The agent can fix it. If you describe it right.
Coding agents are good at fixing bugs. The slow part is turning "that button is broken" into something they can act on: the exact element, how to reproduce it, what the DOM looked like, expected versus actual. Most of that lives in your head, so you under-describe, the agent guesses, and you run another round.
the save button is broken
// fix it pls
No selector, no steps, no state. The agent has to ask, or guess.
selector: button.btn-save[data-id="42"]
route: /invoices/42/edit
repro:
1. open invoice, edit a line
2. click Save
expected: row persists, toast shown
actual: 500 on save, row does not persist
+ DOM snapshot, screenshot, voice transcript
Selector, repro, state, expected versus actual — one pass, no follow-up questions.
The BugToPrompt overlay writes that right-hand brief for you — free, open source, and entirely client-side. You point and talk; it captures the selector, DOM, repro, and your narration, then renders the prompt your agent already understands. That's the free LITE wedge, shipping as a one-click desktop app with no Node.js to install. PRO takes the next step: cloud transcription and hosted GitHub filing, so teammates without gh installed can file issues too.
Point at the bug. Ship the prompt.
- 01
Point
Open the overlay and click the element that is wrong. Add a line of context, or say it out loud.
- 02
Capture
Clicks, route changes, interactive DOM snapshots, screenshots, and your voice, all recorded as you go.
- 03
Render
Everything collapses into one issue-format prompt: selector, repro steps, expected versus actual.
- 04
Ship
Paste it into Cursor or Claude Code, or file it straight as a GitHub issue through your own gh CLI. On PRO, filing goes through the hosted backend instead, no gh CLI needed.
One drop-in. Everything captured.
The overlay brings its own UI and stays out of the way until you open it. No config, no wiring, no design work.
Zero-config drop-in
Add it once with no props and no setup. It ships its own UI and CSS, mounts itself, and waits until you reach for it.
// render once, anywhere in your tree
<BugToPrompt />- 01 Four ways to add it
- React component, standalone script tag, a console one-liner, or the Chrome extension (planned).
- 02 Three output modes
- Copy to the clipboard or download as markdown with no backend at all, or file a GitHub issue through the desktop app: LITE uses your own gh CLI (one project), PRO files through the hosted backend with no gh CLI needed (unlimited projects).
- 03 Local capture history
- Every capture is listed on the device. Copy, download, or delete each one when you are done with it.
- 04 Voice narration, local or cloud desktop app · waitlist
- Talk through the bug while you point. LITE transcribes on-device with Parakeet-MLX; PRO can transcribe in the cloud with AssemblyAI.
- 05 Persists across navigation
- Survives route changes and reloads, and stays client-side by default. Your data never leaves the machine.
Add it once. Point at any bug.
BugToPrompt is a Chrome extension: one click, no code in your site. It only runs on a tab once you allow it there, and never anywhere else.
One click on any tab
// injects the same overlay build, no code in your site
First-run onboarding, popup pairing, and per-site permission. It only runs on a site once you allow it there.
// not on the Chrome Web Store yet: download the zip, unzip it, then load it at chrome://extensions with Developer mode on
This is what your agent receives.
Not a screenshot. A precise, repo-aware prompt: the element, the selector, the steps to reproduce, and the gap between expected and actual. Paste it into Cursor or Claude Code and it has everything. On PRO, filing goes straight through the hosted backend, so teammates without gh installed can still file the issue.
# Checkout total ignores applied coupon
The order summary keeps the full price after a valid coupon is applied. The
discount line shows up, but the total does not change.
## Repro steps
1. Add any item to the cart and open /checkout
2. Enter coupon code SAVE10 and click "Apply"
3. Discount row appears (-$10.00), total stays at $99.00
## Element
- Text: "Total $99.00"
- Selector: `section.order-summary [data-testid="cart-total"]`
- Nearest component: <OrderSummary />
## DOM context
<div class="summary-row total">
<span>Total</span>
<span data-testid="cart-total">$99.00</span> <!-- expected $89.00 -->
</div>
## Expected vs actual
- Expected: total recalculates to $89.00 after the coupon applies
- Actual: discount is recorded but the total field is not recomputed
## Environment
- URL: /checkout
- Viewport: 1440x900, devicePixelRatio 2
- Browser: Chrome 126 on macOS
- Route changes during capture: /cart -> /checkout
---
captured with BugToPrompt- File as GitHub issue
- Copy to clipboard
- Download as .md
- Hosted filing, no gh CLI needed (PRO)
Free to drop in. Paid only when it's hosted.
The overlay is open source and free forever. LITE and PRO, the desktop apps for local or cloud transcription and GitHub filing, are both in development — join the waitlist for early access.
Open-source overlay
Runs entirely client-side, no backend, no account, no credits. Get it as the Chrome extension — one click, early access today.
// injects the same overlay build, no code in your site
point at the bug → paste-ready prompt
- Clipboard, download, and inline output modes
- Selector + DOM context + screenshots
- No telemetry, nothing leaves the browser
LITE
$0/mo
- Local transcription (Parakeet-MLX)
- GitHub issues via your own gh CLI
- 1 project
PRO
Waitlist
- Everything in LITE
- Cloud transcription (AssemblyAI)
- Hosted GitHub filing, no gh CLI needed
- Unlimited projects
Screenshots and Looms make the agent guess.
The other ways of reporting a bug all drop the one thing an AI agent actually needs — the element and the state it was in. Same bug, four ways to hand it off.
| Dimension | bugtoprompt | Screenshot + Slack | Loom | Write it yourself |
|---|---|---|---|---|
| Context captured | Selector, DOM, screenshots, repro steps | Pixels only | Video, no DOM | Whatever you remember |
| Paste-ready prompt | Structured markdown, ready | Agent must infer it all | Agent can't read video | Only as good as your prose |
| Time to share | Seconds | A minute, plus a message | Record, wait, upload | Five to ten minutes |
| Reproducibility | Exact element and state | Approximate, you re-explain | Watch and guess | Depends on your notes |
Questions, answered straight
Do I need a backend?
Not to capture. Clipboard and download modes run fully client-side, zero config. Filing straight to GitHub and voice transcription need the BugToPrompt desktop app: LITE runs Parakeet-MLX locally and files through your own gh CLI (one project); PRO is the hosted option, with cloud transcription and issue filing that needs no gh CLI (unlimited projects). Both are in development, join the waitlist.
What is the difference between LITE and PRO?
LITE is free: local transcription (Parakeet-MLX) and GitHub issues filed through your own gh CLI, capped at one project. PRO is paid: cloud transcription (AssemblyAI), hosted issue filing with no gh CLI needed, and unlimited projects.
Where does the prompt go?
Wherever you point it. Copy it to the clipboard and paste into Cursor or Claude Code, download it as a .md file, or file it as a GitHub issue through your own gh CLI. On PRO, filing goes through the hosted backend instead, no gh CLI needed.
Does my data leave the browser?
Not by default. Clipboard and download stay on your machine, and capture history is stored locally. Filing a GitHub issue or transcribing voice needs the desktop app: LITE keeps transcription local and files through your own gh auth; PRO can run transcription in the cloud (AssemblyAI) and files through the hosted backend instead.
Does it work on non-React or old multi-page apps?
Yes. It's a browser extension, so it works on any page — React, server-rendered, or legacy multi-page, it doesn't matter. No code changes to your site are needed.
How is this different from pasting a screenshot?
A screenshot makes the agent guess. This captures the element, its CSS selector, the surrounding DOM, the clicks and route changes that led there, and your description, then renders it as a structured prompt the agent can act on directly.
What does it cost?
The overlay is free and MIT today, drop it in and use it. LITE (free desktop app: local transcription, GitHub filing via your own gh CLI, one project) and PRO (paid: cloud transcription, hosted filing, unlimited projects) are both in development, join the waitlist below.
Point at the bug. Ship the prompt.
Get the extension
One click on any tab you allow it on. It never runs anywhere else. Still early access, the overlay below is what ships today.
PRO: cloud & hosted
Coming soonCloud transcription (AssemblyAI), hosted GitHub filing with no gh CLI needed, and unlimited projects. Join the waitlist for early access.
Bug→Prompt Open source today. LITE and PRO desktop apps in development.