In-app feedback
A React component with voice, text, transcript editing, account-specific drafts, and transcription retry. Next.js routes connect it to your app.
UserLoudSave 5 days.Keep building.Stay in touch.
Get a head start on the full support build for your Next.js and Supabase app. Collect user reports, connect your coding agent, and help customers hear back. The component, database setup, and reply guides are included.
One-time purchase. No UserLoud subscription.
14-day money-back guarantee.
Full sourceUnlimited projectsRuns on your stack
For developers on support
A report starts the work.
A user says something is broken. You find their account, trace the problem, check the fix, and remember to reply. Each handoff pulls you away from building.
Let them explain it in your app.
Add voice and text feedback to your signed-in layout. Reports arrive with the user's Supabase Auth ID and page address, giving your agent a place to start investigating.
Users can type or record, then edit their transcript before sending.
Keep the customer's words connected to the work that follows.
Put your agent to work
From a report
to a useful reply.
Your coding agent already knows its way around your repository. Give it reports from Supabase and instructions for investigating them, checking results, and preparing an answer.
You choose which fixes and replies it may handle. Questions that need your judgment come back to you with findings and a next step.
- 01
Capture
A Next.js server route saves the report using the signed-in user's identity.
- 02
Investigate
Your agent reads reports through Supabase MCP and checks the relevant code and application evidence.
- 03
Check
It verifies an authorized fix or brings you the decision needed to continue.
- 04
Reply
It prepares a clear answer for review, or sends when you have granted that authority.
Your starting point
The pieces, already connected.
Supabase report storage
SQL for reports, investigation notes, and voice limits. Server-side intake uses Supabase Auth; browser access to the report tables is blocked.
Agent investigation
Repository instructions for checking reports, verifying changes, and handing decisions back to you. A recurring heartbeat keeps unfinished work in view.
Customer follow-up
Reply policies and Gmail setup help your agent send useful answers within your permissions. Add Telegram for decisions that need your attention.
The full support kit, ready to adapt.
Built for Next.js App Router, React, Tailwind CSS 4, and Supabase Auth.
Bring your database, coding agent, and model key. Connect a support mailbox when you want email replies.
Keep your development time
Start past
the first draft.
Your agent can build a feedback form. The rest takes attention too: recording failures, account changes, database access, investigation rules, and the email a customer actually receives.
The interaction details
Keep an unfinished draft when the form closes. Retry a failed transcription without recording again. Let users edit what they said.
Those behaviors are in the supplied component. Fit it to your layout and verify it with your users' devices.
An answer you can stand behind
The instructions connect investigation to customer communication: check the evidence, verify a fix, and give a useful next step.
Start with drafts. Grant sending or code-change authority for the work you want your agent to handle.
Put your effort into your application and the people using it.
Example with authorized actions
Follow a report through a fix.
YOUR CODEX AGENT, ON SUPPORTExample workflow
Feedback is right there.
Open Feedback and say what’s on your mind.
Explore each step
Example: a customer reports that a page loads slowly on their iPhone but works on their laptop. Every three hours, a Codex automation checks your Postgres database. It finds and claims the report, reproduces the Safari rendering delay, isolates a background blur, tests and pushes an authorized fix, and verifies the live page on an iPhone. It drafts and sends the customer a plain-language retry email without internal details, then sends you a Telegram update. The animation compresses the elapsed time. Use the chapter buttons to explore the sequence.
Next.js + Supabase setup
A concrete path into your app.
The guides include the source files and installation steps. Use your existing Next.js app and Supabase Auth project; place application files beside your app's package.json and agent instructions at the repository root.
1. Connect Supabase
Connect your agent to the correct Supabase project through MCP. Run the included SQL once to create the report and voice-limit tables. The server handles intake; your agent reads and updates reports through MCP.
2. Add the Next.js files
Copy the component, Supabase helpers, and the /api/feedback/reports and /api/feedback/transcribe routes. Install the listed dependencies and keep the component files in Tailwind CSS 4's scanned sources.
3. Use your signed-in layout
Mount FeedbackAdapter with the current Supabase user ID. Drafts are kept per account in session storage; the guide shows what to clear on sign-out. The server verifies the session before accepting a report.
4. Configure transcription
Set your app URL and Supabase credentials on the server. Add a Groq key, or select OpenAI in the supplied route. Keep secret keys server-side and match the app URL to each deployment.
5. Set your agent's scope
Add the support instructions and tool connections to your repository. Choose what the heartbeat may investigate, change, and send. Connect Gmail for replies and Telegram if you want developer alerts.
6. Run the whole flow
Submit text and a reviewed voice report from your own account, then trigger the heartbeat. Check the answer or saved draft. Run it again to confirm the agent recognizes completed work without repeating a reply.
Pricing
Pay once. Own the support loop.
Full source, every setup guide, and lifetime updates. One complete offer.
UserLoud Lifetime
Full source code + lifetime updates. Use in unlimited projects.
$98 50% off
$49
USD once
14-day money-back guarantee
Try the code and setup. If it isn’t a fit, email support@userloud.com within 14 days of purchase for a full refund. No explanation required.
- Voice and text report component
- Supabase database setup
- Report history and follow-up notes
- Coding-agent investigation skill
- Customer reply safety policies
- Gmail reply adapter guide
- Telegram escalation guide
- Background support workflow
- Setup and customization docs
- Use in unlimited projects
One-time payment through Stripe. Bring your own agent, database, and model keys.
FAQ
Before you connect it.
Does this fit my existing Next.js app?+
The supplied integration uses Next.js App Router, React, Tailwind CSS 4, and Supabase Auth. Add it to your existing signed-in layout and configure the supplied server routes. A different router, styling setup, or authentication system needs adaptation.
What does the five-day saving cover?+
The full DIY build: feedback component, report storage, agent instructions, and reply/setup guides, including testing and iteration. You still connect the kit to your application and verify it there.
Can I keep using my coding agent?+
Yes. It needs access to your repository, Supabase project, and the tools you choose to connect. The guides include recurring setup for Codex and Claude Code. Local checks need the agent app or session to stay running.
Will it change code or email customers on its own?+
You set that authority in the support heartbeat instructions. Start with investigation and reply drafts, then grant the fixes, deployment steps, and customer replies you want it to handle. Work outside that scope comes back to you.
Where do reports and recordings go?+
Reports and investigation notes stay in your Supabase project. For voice, your server sends audio to the transcription provider you select; the supplied route does not save the recording in your app.
Do users need another account?+
They use your application's Supabase session to submit reports. They do not need a UserLoud account. Customer email replies require a confirmed address.
What am I paying for?+
For $49 USD once, UserLoud Lifetime includes the source, setup guides, and future updates for unlimited projects you own. You run the kit on your stack. Your agent, database, and transcription provider charges are separate.
Is the walkthrough a live result?+
It illustrates a customer reporting an iPhone slowdown, followed by a Codex investigation, an authorized fix, a customer email, and a Telegram update. The sequence compresses elapsed time. Your agent follows the access and authority you configure.
Can I get a refund?+
Yes. Try UserLoud for 14 days from purchase, including downloading the source and trying the setup. If it isn’t a fit, email support@userloud.com within that period for a full refund. No explanation required.
Build your app.
Keep users in the loop.
Start with the Next.js component, Supabase setup, and agent instructions. Connect them to your product so a report can become a checked answer and a useful reply.
14-day money-back guarantee. Try it in your application.