tapfix

Tap it, fix it — live QA loop for React Native: mark issues on the device (or from the cockpit) and an embedded coding agent fixes them in your repo, on the fly.

Built on top of mcp-rn-devtools — tapfix shares its CDP session and SDK channel in a single process (Hermes only admits one debugger), and adds the QA product on top.

What you get

• 🎯 Mark from the cockpit (zero-config): a local web UI (http://localhost:8099) shows a screenshot of the connected device; click any element (hit-tested inside the app via the injected runtime agent — no app changes needed), or drag an area to mark several. Annotate, attach reference images (📎, ⌘V, drag & drop), done.
• On-device overlay (optional): with mcp-rn-devtools-sdk integrated (<RNDevtoolsProvider qaOverlay>), a draggable QA button lets testers mark elements by touching them, with honest feedback toasts.
• Enriched reports: component hierarchy, flattened style, props, source file:line (React 19 _debugStack resolved through Metro's source map), navigation route, redux state, recent network/logs/errors and a screenshot — everything an agent needs to find and fix the issue.
• ⏺ Recording for functional bugs: press record, reproduce, mark — the report carries everything the app did since t0 (actions, requests, logs, errors), optionally with a screen recording.
• Embedded fix agent: ▶ Start QA session and every "fix now" report spawns a claude -p turn (your Claude Code CLI — subscription auth, model selectable) in the app's repo (mapped once, or detected from the bundle), resuming one persistent session per run. After each fix it lints, reloads the app, returns to the report's screen, takes an after-screenshot and, if enabled, verifies before/after. Questions and failures land on the report's card, where you answer and retry.
• Queue workflow: "save" while testing, then fix everything with one click — grouped by screen so related fixes share a turn. Per-fix diff, one-click revert, and an optional commit of the session's fixes.
• Cockpit timeline: filters (status, app, screen, text), grouping by screen, frame drawn over the screenshot, before/after, retention of old reports, browser notifications when a turn ends or the agent asks something.
• MCP tools (qa_list_reports, qa_get_report, qa_wait_for_report, qa_resolve_report) plus everything mcp-rn-devtools exposes — tapfix's MCP server is a superset. Reports are claimed so the embedded agent and a Claude Code session never fix the same thing twice.

Install

claude mcp add-json --scope user tapfix '{"type":"stdio","command":"npx","args":["-y","tapfix"]}'

Every Claude Code session then starts tapfix (MCP + cockpit at http://localhost:8099). Sessions on different apps coexist (the debugger is owned per app on a device, and tapfix attaches to the app of the repo it runs in); a second tapfix in another session serves its cockpit on the next free port (8100, …). Check the environment with:

npx -y tapfix doctor
npx -y tapfix --version

Requirements: Metro on 8081, an Android device or emulator (adb), and the Claude Code CLI logged in for the fix agent. adb reverse for Metro and the SDK channel is applied automatically for USB devices.

Daily use

1. Run Metro in the app's repo, open the app (debug build).
2. Open a Claude Code session — the MCP starts, and with it the cockpit at http://localhost:8099.
3. ▶ Start QA session (first time per app: point it at the repo, or accept the one detected from the bundle).
4. Mark issues — 🎯 from the cockpit (m), or the QA button on-device — and watch the agent fix them live. Use ⏺ Grabar first for "when I tap X, Y happens" bugs.

Reports live in ~/.tapfix/<applicationId>/pending|resolved/, config in ~/.tapfix/config.json (apps, agentModel, autoVerify, retentionDays, recordVideo, device).

Development

npm run build      # node build + cockpit UI bundle
npm test           # vitest
npm run typecheck && npm run lint

To develop against a local checkout of the core instead of the published package: npm install ../mcp-rn-devtools/packages/server (restore ^x.y.z before committing). Point the MCP at the local build with claude mcp add-json --scope user tapfix '{"type":"stdio","command":"node","args":["<path>/tapfix/dist/cli.js"]}'.

License

MIT