Feedback DevTools

For React teams

Visual feedback that knows which component was clicked

Generic feedback widgets tell you someone disliked a button. Feedback DevTools tells you it was <Button variant="primary"> in src/components/Button.tsx, line 12 — with the console error that fired when they clicked it.

A babel plugin stamps every JSX element with its source location at build time, so every report is a reproducible, source-mapped bug — not a screenshot with an arrow drawn on it.

Free plan included · no credit card · reporters need no account

Watch the 60s file:line demo first

How it works

  1. 1

    Install @feedback/sdk

    One npm package covering the toolbar UI, element selection, screenshot capture and source mapping.

  2. 2

    Add the babel plugin

    babel-plugin-feedback-source stamps every JSX element with fileName, lineNumber and columnNumber. On in development by default; ENABLE_FEEDBACK_SDK=true opts preview builds in.

  3. 3

    Mount FeedbackToolbar

    Drop the component near your root. Stakeholders get a floating feedback button; you get structured reports.

  4. 4

    Fix from the report, not the thread

    Open the mapped file:line, or click once to generate a Claude Code prompt with the full source context and let the agent make the change.

What a single report contains

The same shape list_open_feedback and get_feedback_context return over the MCP — this is what lands in your dashboard for every item.

{
  "summary": "Make the primary button blue",
  "component": "Button",
  "file": "src/Button.tsx:12:3",
  "console": { "errorCount": 1, "errors": [ { "level": "error",
    "message": "undefined is not a function",
    "stack": "TypeError ... at Button (src/Button.tsx:12:3)" } ] },
  "network": { "failedCount": 1 },
  "screenshot": "<captured at click time>"
}

Why React teams pick Feedback DevTools

  • Component-level precision. Reports carry the React component name and file:line:col — the thing generic widgets (and screen recordings) cannot give you.
  • Framework-agnostic React. Works the same in Vite, Next.js and Create React App — anywhere babel compiles your JSX.
  • Dev-first, production-optional. Source mapping is development-only by default; you choose which deployed environments collect feedback.
  • AI triage when you need it. Pro ($9/mo per project) classifies every item by sentiment, intent and urgency, so the angry stakeholder floats to the top.
  • Built for the agent workflow. The hosted MCP server hands Cursor or Claude the same source-mapped context — feedback becomes a pull request without a copy-paste relay.

See a real report before you sign up

The 60-second demo shows an actual source-mapped item: component, file:line, console error and the Claude Code prompt it generates. No account needed.

Open the demo

Agent? The same context is available over the hosted MCP: https://server-production-14a9.up.railway.app/mcp · discovery at /.well-known/mcp.json · pricing: Free $0 / Pro $9 per project per month

Frequently asked questions

Does it work with Vite / CRA, or only Next.js?

Any React setup that compiles JSX through babel can use the source-mapping plugin. The toolbar component itself is plain React and mounts anywhere.

How is this different from a screen-recording tool?

Recordings show you what happened; Feedback DevTools tells you where in the code it happened. Every report pins the component and file:line:col, plus the console and network state at click time — no watching a 4-minute video to find a 1-second problem.

Do reporters need an account?

No. Share a feedback link and anyone can click an element, annotate and submit. Only your team needs dashboard access.

What does Pro add?

AI triage: sentiment classification (angry/happy/neutral), intent detection (bug/feature/UX) and urgency scoring, plus a classification stats dashboard. $9/mo per project; everything else stays free.

Get early access and see your first component-mapped report in minutes.