How to Add User Feedback to a Lovable App

Lovable makes it possible to go from an idea to a deployed app in minutes. But most Lovable apps launch without any way for users to report bugs, ask questions, or suggest features. This tutorial shows you how to add a user feedback widget to any Lovable app in under 5 minutes.

Last updated: April 14, 2026

Lovable has surpassed 5 million users and generates React/TypeScript apps that deploy to Lovable Cloud or Vercel. As of March 2026, Lovable does not include a built-in feedback widget — so you need to add one yourself. The good news: it takes one command.

What you'll get

After following this tutorial, your Lovable app will have:

• A floating feedback button in the corner of your app (customizable position, label, and colors)
• Three submission types: bug reports, feature requests, and ratings
• Automatic capture of browser, OS, viewport, URL, and console errors
• An MCP server your coding agent can use to read and act on submissions

The widget is under 30KB, renders in a Shadow DOM (so it won't conflict with your Lovable app's styles), and works on mobile.

Prerequisites

• A Lovable app (any stage — prototype or production)
• Your Lovable project synced to GitHub (Lovable → click the GitHub button → connect)
• Node.js 18+ installed locally
• An AI coding agent (Claude Code, Cursor, or Windsurf) — optional but recommended

Step 1: Clone your Lovable project

If you haven't already, sync your Lovable project to GitHub. Then clone it locally:

git clone https://github.com/your-username/your-lovable-app.git
cd your-lovable-app

Step 2: Run the installer

npx userdispatch init

The CLI does six things:

1. Opens your browser to authenticate (Google sign-in)
2. Creates your organization and app on UserDispatch
3. Detects your framework (Lovable generates React with Vite — the CLI recognizes this automatically)
4. Injects the widget script tag into your index.html
5. Writes the .mcp.json config for your coding agent
6. Sends a test submission to verify everything works

The entire process takes about 2 minutes.

Step 3: Push to GitHub

git add .
git commit -m "Add UserDispatch feedback widget"
git push

Lovable auto-deploys from GitHub. Within a minute or two, your live app will have the feedback button in the bottom-right corner.

Step 4: Test it

Visit your deployed Lovable app. You should see a "Feedback" button in the bottom-right corner. Click it, submit a test bug report, and check your UserDispatch dashboard — or ask your coding agent:

"Check my UserDispatch inbox for new submissions."

Customizing the widget

The widget is configured via data-* attributes on the script tag. After running the installer, you'll find the tag in your index.html:

<script
  src="https://userdispatch.com/widget.js"
  data-api-key="pk_your-api-key"
  data-position="br"
  data-trigger-label="Feedback"
  defer
></script>

You can customize:

Connecting your coding agent

If you use Claude Code, Cursor, or Windsurf, the CLI already configured the MCP server. Restart your agent and try:

"Show me recent feedback submissions for my app."

"Triage my inbox — categorize by type and flag anything critical."

"Draft replies for all resolved submissions."

Your agent reads feedback via MCP, so it can correlate user reports with your codebase and propose fixes directly. This is especially useful for Lovable apps where you might not have written every line of code yourself — the agent can trace a bug report to the specific component and suggest a fix.

Why this matters for Lovable apps

Lovable apps ship fast — often in a single session. But speed creates a specific feedback gap: your app is live before you've thought about how users will tell you something is broken.

The February 2026 Lovable security report highlighted that many Lovable apps had vulnerabilities that went unreported because there was no feedback mechanism. Users encountered issues, but there was nowhere to report them. Adding a feedback widget closes this gap from day one.

With UserDispatch's MCP server, the feedback loop stays in your AI-first workflow. You don't need to check a separate dashboard — your coding agent handles it. For more on why vibe-coded apps need this, see The Feedback Loop for Vibe Coding. For a walkthrough of what the agent can do with submissions, see How AI Agents Triage User Feedback.

Pricing

UserDispatch's free tier includes 100 submissions per month, the full MCP server with all 17 tools, and the feedback widget. No credit card required. Paid plans start at $9/month if you need more submissions or custom branding. See our getting started guide for full setup details.