PluginStatsmakethisbetter weekly downloads statistics
By makethisbetter · npm · Claude Code
Make This Better JS Widget SDK — embed user feedback collection in any website
makethisbetter has 916 recorded weekly downloads on npm, ranking #1492 of 2,391 tracked listings.
About makethisbetter
Why
You ship with AI agents. Your users hit bugs you never see in dev. They leave. You never find out why.
This widget gives your users a way to report exactly what went wrong — annotated screenshot, console errors, DOM state, browser info — in two clicks. AI triage turns that into a structured task your coding agent (Claude Code, Cursor, Codex) picks up automatically. The agent ships the fix. The user gets notified.
No more "can you describe what happened?" No more lost screenshots in Slack. The full loop, from frustrated user to shipped fix, runs without you context-switching.
Quick Start
CDN (2 lines)
<script src="https://unpkg.com/makethisbetter@1"></script>
<script>
MakeThisBetter.init({ projectKey: 'mtb_proj_YOUR_KEY' })
</script>
npm
npm install makethisbetter
import { MakeThisBetter } from 'makethisbetter'
MakeThisBetter.init({ projectKey: 'mtb_proj_YOUR_KEY' })
That's it. A feedback tab appears on your page.
How It Works
User clicks feedback tab
-> Annotates the problem (click to pin, drag to draw)
-> Adds a comment
-> Submits
+-- Screenshot captured automatically
+-- Console errors collected
+-- Page context assembled (URL, browser, OS, selectors)
+-- Sent to Make This Better API
+-- AI asks a clarifying question if needed
-> Dashboard shows structured feedback
-> AI triage produces an agent-ready task
-> Your coding agent picks it up and ships the fix
-> User gets notified: the fix is live
Framework Guides
<details> <summary><strong>React / Next.js</strong></summary>// app/providers.tsx (App Router) or pages/_app.tsx (Pages Router)
'use client'
import { useEffect } from 'react'
export function FeedbackProvider({ user }: { user?: { id: string, email?: string } }) {
useEffect(() => {
import('makethisbetter').then(({ MakeThisBetter }) => {
MakeThisBetter.init({
projectKey: process.env.NEXT_PUBLIC_MTB_KEY!,
user
})
})
return () => {
import('makethisbetter').then(({ MakeThisBetter }) => MakeThisBetter.destroy())
}
}, [user])
return null
}
// plugins/makethisbetter.client.ts (Nuxt) or main.ts (Vue)
import { MakeThisBetter } from 'makethisbetter'
export default defineNuxtPlugin(() => {
MakeThisBetter.init({
projectKey: useRuntimeConfig().public.mtbKey,
})
return {
provide: { mtbDestroy: () => MakeThisBetter.destroy() }
}
})
<!-- src/components/Feedback.astro -->
<script>
import { MakeThisBetter } from 'makethisbetter'
MakeThisBetter.init({ projectKey: import.meta.env.PUBLIC_MTB_KEY })
</script>
<%# app/views/layouts/application.html.erb %>
<body>
<%= yield %>
<%# Turbo replaces <body> on every visit, taking any script-appended element
with it. Render the host yourself and mark it permanent, or the widget is
rebuilt after each navigation and anything mid-flight — a half-written
report, a screen recording — is lost. %>
<div id="mtb-widget-host" data-turbo-permanent></div>
<% if current_user&.admin? %>
<script src="https://unpkg.com/makethisbetter@1"></script>
<script>
MakeThisBetter.init({
projectKey: '<%= Rails.application.credentials.mtb_project_key %>',
user: { id: '<%= current_user.id %>', email: '<%= current_user.email %>' }
})
</script>
<% end %>
</body>
The host must sit inside <body> — Turbo pairs permanent elements by id within
the body snapshot, so one placed in <head> is never matched and nothing
happens. It needs both the id and the attribute; either alone does nothing.
Only Turbo-driven apps need this. React, Vue and Svelte routers re-render inside
their own container and never replace <body>, so the host survives on its own.
<script src="https://unpkg.com/makethisbetter@1"></script>
<script>
MakeThisBetter.init({ projectKey: 'mtb_proj_YOUR_KEY' })
</script>
Features
Annotation
Click any element to pin it, or drag to draw a freeform highlight. The SDK captures the element's CSS selector, text content, and position.
Interaction Replay
Switch to Replay mode in the toolbar to capture an Interaction Replay (up to 60 seconds). It records rrweb DOM mutations and interaction events. It does not capture screen video or audio and does not request browser media permissions. The recorder loads lazily, so there is zero cost until the reporter starts a replay.
What a replay contains…
Description from the npm listing.
- feedback
- widget
- ai
- mcp
- claude-code
- cursor
- vibe-coding
- agent
- bug-reporting
- annotation
README badge
Show your rank in a README or on your website. The badge updates automatically.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Ranking history
Listing placement
Listing placement
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Each band is one page of 20. Weekly downloads on a linear scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Recent observations
Full history (1)Similar npm Claude Code plugins
All 20 makethisbetter alternativesData source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/makethisbetter. First seen Oct 20, 2026; last successful collection Oct 20, 2026. See the methodology.