Feedback Widget

Live

A drop-in feedback widget for Next.js. Floating button, modal, screenshot upload, and optional AI rewriting — submissions land as cards on a Trello list of your choice.

View on GitHub Install

Files

Two

Env vars

Five (one optional)

DB / auth deps

None

Framework

Next.js App Router

What you get

Just enough to ship the loop. Nothing you don't need.

01
Floating button → modal
Categories: Bug, Idea, Question. Free-text input. Stays out of the way until someone clicks it.
02
Optional screenshot
Paste from clipboard, drag-and-drop, or file-picker. Attached to the Trello card automatically.
03
Improve with AI
Optional button that rewrites the user's note via Claude into something actionable before submission.
04
Submissions become Trello cards
Auto-generated title, the full message, and the screenshot. Lands on whichever Trello list you point it at.

Install

Copy two files, set five env vars.

Step 1

Drop the two files into your project

components/feedback-widget.tsx
lib/feedback-action.ts

Step 2

Install runtime deps

pnpm add lucide-react sonner ai @ai-sdk/anthropic

Step 3

Mount in your root layout

import { FeedbackWidget } from
  "@/components/feedback-widget";

<FeedbackWidget />

Step 4
Point at a Trello list
Set the env vars (Trello key, token, list ID, board ID, and optionally an Anthropic key for AI rewrites).

Open source. Use it on your Next.js project.

View on GitHub