Element-anchored reports
Every report is pinned to a real DOM element — CSS selector plus the React component path — so an agent opens the right file instead of guessing.
Self-hosted UAT feedback → an MCP work queue
From “it’s broken” to a fixed commit — without leaving your terminal.
Non-technical UAT testers point at what’s wrong. Their reports — element anchor, screenshots, console and network evidence — land as an agent-ready queue your Claude Code works through over MCP, and close with the commit SHA that fixed them.
The loop
From a tester's confusion to a resolved report
Four steps, no bug-tracker busywork in between. This is the real sequence every report runs.
Capture
A tester points at the element that's wrong and describes it. The widget attaches the React component path, element + viewport screenshots, and the console / network / error tail from the last few minutes.
Queue
The report lands in your self-hosted triage queue, bound to one project and environment, ordered oldest-first — the order an agent should work it.
Agent
Claude Code pulls the next report over MCP: the screenshot as a native image block, the element anchor, the diagnostics. It reproduces and fixes it in your repo.
Fixed
The status closes with the commit SHA that fixed it, and the tester sees their report resolved — no status meeting, no back-and-forth thread.
What's in the box
One widget, the whole evidence trail
Everything an agent needs to reproduce a bug, assembled from proven pieces — and nothing a production build has to carry.
Retroactive evidence
An always-on ring buffer holds the last few minutes of console, network, and errors. Testers never have to reproduce what just happened.
Screenshots + DOM snapshot
Element and viewport PNGs, plus a re-renderable DOM snapshot kept as ground truth for how the page actually looked at report time.
Zero bytes in production
The widget is env-gated at build time. No key, no import — it tree-shakes out entirely. Nothing ever ships to your production users.
Multi-tenant by design
Organizations → projects → environments, each with its own ingest key, origin allowlist, and privacy flags. Several allowed origins per environment.
MCP work queue
Reports arrive over a stateless HTTP MCP server with native screenshot image blocks and token-budgeted responses — built for Claude Code to consume.
Token-efficient CLI + REST
A REST v1 API is the source of truth; a zero-dependency bugcraft CLI wraps it for agents that would rather Read a file than parse an image block.
Self-hosted
One Next.js service plus Postgres on your own Railway. Your feedback, screenshots, and diagnostics stay on your infrastructure — not ours.
Masked by default
Inputs are masked before anything is captured, and passwords are never unmasked — whatever an environment's relax-for-test-data flag is set to.
For Claude Code
Point Claude Code at it and go
Three commands. No SDK, no glue code — your triage queue becomes a slash command.
Register the MCP server
Use an org API token from Settings. <BASE_URL> is your service origin — here, the hosted one.
claude mcp add --transport http bugcraft https://bugcraft.betacraft.com/mcp \
--header "Authorization: Bearer $BUGCRAFT_TOKEN"Install the /bugcraft skill
One line drops the skill into .claude/skills/ — it teaches Claude the triage loop and which tools to call.
mkdir -p .claude/skills/bugcraft && curl -fsSL \
https://bugcraft.betacraft.com/skill/bugcraft/SKILL.md \
-o .claude/skills/bugcraft/SKILL.mdRun it
Claude works the queue oldest-first: reads each report, reproduces and fixes it in your repo, and closes it with the commit SHA.
/bugcraftStart collecting agent-ready feedback
Create your organization, add a project and an environment, and drop the widget into your UAT build. Self-hostable on your own Railway whenever you want your data on your infrastructure.