Feedback DevTools

For Next.js teams

Visual feedback for Next.js, mapped to the exact file:line

Stakeholders click any element on your Next.js app and describe the change. You get a bug report with the component name, the exact source file and line, console errors and network failures already attached.

No "which button did you mean?" threads. No reproducing from a screenshot. The report opens at the line of code that renders the element.

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

Watch the 60s file:line demo first

How it works

  1. 1

    Install the SDK

    npm install @feedback/sdk — one package, no separate widget script to manage.

  2. 2

    Mount FeedbackToolbar in the root layout

    A client component inside app/layout.tsx. Works with the App Router and React Server Components — only the toolbar crosses the client boundary.

  3. 3

    Ship with source mapping on

    The bundled babel plugin injects __feedback_source (fileName, lineNumber, columnNumber) into every JSX element. On by default in development; set ENABLE_FEEDBACK_SDK=true for preview/staging builds.

  4. 4

    Collect source-mapped feedback

    Each item pins component, file:line:col, screenshot, console errors and failed network calls. One click generates a ready-to-run Claude Code prompt.

Two minutes in a Next.js app

Same snippet as the docs: one client component in app/layout.tsx and every page is feedback-enabled.

'use client';

import { FeedbackToolbar } from '@feedback/sdk';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackToolbar
          projectToken="YOUR_SDK_TOKEN"
          serverUrl={process.env.NEXT_PUBLIC_FEEDBACK_SERVER_URL}
        />
      </body>
    </html>
  );
}

Why Next.js teams pick Feedback DevTools

  • App Router native. The toolbar is a single client component in the root layout — your server components stay server components.
  • file:line is the moat. The babel plugin (packages/sdk/babel-plugin) stamps source locations at build time, so "make this button blue" arrives as src/components/Button.tsx:12:3 — not a screenshot with an arrow.
  • Console and network come along. Every item includes the console errors and failed requests from the reporter’s session, so you stop asking "did you see an error?".
  • Priced per project, not per seat. Unlimited feedback free; Pro AI triage (sentiment, intent, urgency) is $9/mo only on the projects you upgrade.
  • Agent-ready. A hosted MCP server lists open items and returns the same source-mapped context to Cursor or Claude — feedback goes straight into your AI coding loop.

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 Feedback DevTools work with the Next.js App Router?

Yes. FeedbackToolbar mounts once in app/layout.tsx as a client component. Your pages and layouts stay React Server Components; only the toolbar hydrates.

How does feedback get mapped to my source files?

The @feedback/sdk babel plugin injects a __feedback_source attribute (fileName, lineNumber, columnNumber) into every JSX element at build time. When a stakeholder clicks an element, the SDK reads that attribute and attaches the exact file:line:col to the report.

Does source mapping bloat my production bundle?

The plugin is on by default in development only. For preview or staging builds you opt in with ENABLE_FEEDBACK_SDK=true, so production bundles stay clean unless you explicitly want feedback collection there.

What does it cost for a Next.js side project?

Nothing. The free plan collects unlimited feedback with shareable links, a kanban pipeline and CSV/JSON export. Pro ($9/mo per project) adds AI triage when the queue gets long.

Get early access and collect your first source-mapped report today.