Explain the bug once.
Get it resolved.
BugToPrompt turns a vague report into a clear, reproducible problem your team or coding agent can act on. Sign up, record what went wrong, and manage every issue from one place.
5 bugs free, no card. Keep it local with the MIT extension, or create an account and track the issues until they are closed.
# 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 A bug you cannot explain is a bug nobody fixes.
Every vague report costs a round trip. You say "the save button is broken", whoever picks it up asks what you mean, and the bug sits there while you re-explain it. The fix was never the slow part — the description was. Get the description right once and the problem actually gets resolved.
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.
BugToPrompt writes that right-hand brief for you. You point at the bug and talk; it captures the selector, the DOM, the repro and your narration. Create a free account and those reports land in one place you can manage — no more scrolling a chat log to find out whether anything happened. The extension itself stays free, open source and entirely client-side.
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 place to see every problem through to resolved.
Capturing the bug is half the job. The other half is knowing what happened to it. Your reports land in a workspace with state, history and a thread — so "I reported that weeks ago" stops being the end of the conversation.
-
Sign up
Create a free account. No card, no sales call — the workspace is yours in a minute.
-
Capture the bug
Point at the broken thing and talk. The selector, the repro and the state are written for you.
-
Manage the fix
Every report becomes a tracked issue you can follow, comment on and close — not a message that scrolls away.
acme / storefront
- Checkout button does nothing on the cart page In progress
- Invoice total shows NaN after editing a line Waiting on you
- Avatar upload silently fails over 2 MB New
- Search ignores accents in customer names Done
Every issue keeps the context it was filed with: the element, the steps, the console. Reopen it and the explanation is still there.
Prefer to keep everything on your own machine? The MIT extension files
straight to GitHub through your own gh auth, with no account at
all. The workspace is for when you want the bugs to outlive your session.
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), Cloud 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 · account
- Talk through the bug while you point. LITE transcribes on-device with Parakeet-MLX; Cloud transcribes server-side with AssemblyAI.
- 05 Every report in one workspace cloud account · free to start
- With an account, each capture becomes a tracked issue with the context it was filed with. See what is new, what is in progress and what is waiting on you, and close the loop instead of wondering.
- 06 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 Cloud, 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 (Cloud)
Free to drop in. Paid only when it's hosted.
The overlay is open source and free forever. LITE is the local tray app: on-device transcription and GitHub filing through your own gh CLI, one project. Cloud is the account you sign up for today — your reports tracked as issues with their full context, transcription server-side, and unlimited projects.
Open-source overlay
Runs entirely client-side, no backend, no account, no credits. Get it as the Chrome extension — one click, available 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
Cloud
Free to start
- Everything in LITE
- Workspace with tracked issues and history
- Cloud transcription (AssemblyAI)
- Hosted 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); Cloud is the hosted option, with server-side transcription and issue filing that needs no gh CLI (unlimited projects).
What is the difference between LITE and Cloud?
LITE is free: local transcription (Parakeet-MLX) and GitHub issues filed through your own gh CLI, capped at one project, no account. Cloud is the workspace you sign up for: every report tracked as an issue with its full context, server-side transcription (AssemblyAI), hosted filing with no gh CLI needed, and unlimited projects. Free to start — 5 bugs, no card.
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 Cloud, it lands in your workspace instead, where you can follow the issue through to resolved.
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; Cloud runs transcription server-side (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) costs nothing, ever. Cloud (the workspace: tracked issues, server-side transcription, hosted filing, unlimited projects) is free to start — create an account above and you get 5 bugs with no card.
Your machine. Or your inbox.
Create an account
The workspace: every report tracked as an issue with the context it was filed with, cloud transcription, and unlimited projects. Free to start — 5 bugs, no card.
Keep it local
MIT
The extension plus the local tray app: on-device transcription and
GitHub filing through your own gh CLI. One project, no
account, nothing leaves your machine.
Bug→Prompt LITE runs on your machine. Only the issue text reaches GitHub.