Make This Better

Make This Better is an open-source feedback collection and triage platform built for teams that ship with AI coding agents. A drop-in widget lets end users report a problem by clicking an element, drawing an annotation, and writing a note — while the system automatically captures a screenshot, DOM snapshot, browser info, console errors, and up to 60 seconds of interaction replay (the DOM mutations leading up to the report) in the background. It can also flag frustration signals proactively, such as rage clicks, repeated form failures, or error pages, even before a user files a report.

Once feedback comes in, an AI triage step asks clarifying questions where needed, then extracts the scene (context), the blocker, and the underlying need, turning raw feedback into a structured task. That task connects directly to AI coding agents — Claude Code, Cursor, Windsurf, and Codex — via an MCP server and CLI commands (for example, running /makethisbetter pick to claim a piece of work and inspect its evidence), plus a Skills framework that guides an agent through the fix workflow. A public feedback board shows each item's status moving from received to in progress to shipped, and the person who reported an issue gets a deployment notification when the fix ships.

The core widget is MIT-licensed and open source (available on GitHub, installable via a CDN script tag or npm, with framework support for React/Next.js, Vue/Nuxt, Astro, Ruby on Rails, and plain HTML), while the hosted cloud platform at makethisbetter.dev adds AI triage, a dashboard, GitHub/Linear sync, and email notifications on top of the open-source core.

1. Install the widget via a CDN script tag or npm (npm install makethisbetter) and initialize it with a project key from makethisbetter.dev.
2. When a user hits a problem, they click the element involved, draw an annotation, and write a note; the widget auto-captures a screenshot, DOM snapshot, console logs, browser info, and up to 60 seconds of interaction replay, and can flag frustration signals (like rage clicks) automatically.
3. The AI triage step may ask the user a clarifying question, then structures the report into a scene, a blocker, and the underlying need.
4. Connect the platform to your AI coding agent — Claude Code, Cursor, Windsurf, or Codex — via the MCP server, and have a developer run a command like /makethisbetter pick to claim a piece of feedback and review its full evidence trail.
5. Let the agent work the fix using the built-in Skills framework to guide the workflow, then ship the change — GitHub/Linear sync and email notifications keep the loop connected to your existing tools.
6. Track progress on the public feedback board (received → in progress → shipped), and the original reporter is notified automatically once their fix is deployed.

• Capturing a bug report with full context — screenshot, DOM state, console errors, and a 60-second interaction replay — instead of a vague one-line description from a user.
• Catching problems proactively via frustration detection (rage clicks, repeated form failures, error pages) before a user bothers to file a report at all.
• Feeding triaged, structured feedback directly to an AI coding agent (Claude Code, Cursor, Windsurf, Codex) so a fix can be picked up and shipped with full context, instead of a developer re-investigating from scratch.
• Giving end users visibility into whether their feedback is being worked on, via a public status board and automatic deployment notifications.
• Teams that want to self-host or use their own AI provider via BYOK to avoid per-triage AI usage costs, on any plan including Free.
• Product teams consolidating scattered feedback (bug reports, feature requests, in-app annotations) into one triaged, agent-ready queue instead of spreading it across support tickets, Slack, and email.