Patchrooms
<p> Turn AI-app feedback into agent-ready patch context. </p> <p> <a href="https://www.producthunt.com/products/patchrooms?utm_campaign=producthunt-atom-posts-feed&utm_medium=rss-feed&utm_source=producthunt-atom-posts-feed">Discussion</a> | <a href="https://www.producthunt.com/r/p/1168490?app_id=339">Link</a> </p>
Last verified:
What is Patchrooms?
Patchrooms is visual feedback software for AI-built apps that closes the feedback loop between AI-generated app previews and coding agents. Drop one script into any AI-built preview, let anyone comment or leave a voice note right on the live preview, and export agent-ready context your agent can fix. Reviewers point at exact elements and leave text, screenshots, or voice notes, while Patchrooms captures URL, viewport, browser, console errors, and element context.
Key features include screenshots and annotations where you point at the exact pixel and drop arrows, notes, and highlights right on the screen; voice notes that are auto-transcribed into clean agent-ready text; threaded comments from humans plus the plan your agent proposed; and diffs, reports, and links to Jira, Linear, GitHub, or Notion. Every report exports as clean Markdown with the element selector, screenshot reference, and artifact goal and constraints.
Patchrooms is built for tiny teams that move fast, especially AI-native teams using Claude Code, Cursor, Lovable, v0, Bolt, Replit Agent, Codex, Windsurf, OpenCode, or Cline. It serves use cases including AI artifact review, vibe coding review, visual bug reporting, UI review, customer feedback on staging builds, QA feedback, and agent-ready feedback formatted for coding agents rather than just humans.
The tool transforms feedback into agent-ready markdown or MCP reports instead of traditional tickets. It allows reviewers to click any element to drop comments, with reports streaming live to the Patchrooms dashboard when using cloud mode with a project key, or saved in localStorage for local mode without requiring an account.
Patchrooms pricing
Pricing model: Freemium
Free tier available - join early access with no card required. Local mode needs no account, no project key, and zero network calls with reports saved in localStorage. Cloud mode requires a project key (pr_...) from the Patchrooms dashboard where feedback lands and streams live. No pricing details for paid plans mentioned on the website yet.
Patchrooms pros
- Drop one script into any AI-built preview to enable visual feedback
- Reviewers click exact elements and leave pinpoint comments anchored to those elements
- Voice notes auto-transcribed into clean agent-ready text without typing
- Captures URL, viewport, browser, console errors, and element context automatically
- Exports feedback as clean Markdown with element selector and screenshot reference
- Supports cloud mode with live dashboard streaming and local mode with no account required
- Works with Claude Code, Cursor, Lovable, v0, Bolt, Replit Agent, Codex, Windsurf, OpenCode, and Cline
- MCP server integration lets agents read reports directly with list_reports and get_report tools
- No card required to join early access
- Threaded comments include human feedback plus agent-proposed plans in one room
- Links out to Jira, Linear, GitHub, or Notion holding the whole patch story
- Arrows, notes, and highlights drop right on the screen for precise annotations
- Reviewers need only the preview link with no account required
- Local mode has zero network calls with feedback saved in browser localStorage
- Status tracking for comments: new, triaged, in-progress, closed
- Best-effort CSS selector attached plus selected text and URL for reliable element anchoring
Patchrooms cons
- Still early access, recommended to run on staging first before production
- In-widget auth to block abuse (email-with-code, SSO, token bridge) is on the roadmap, not available yet
- Positional CSS selector can drift after big regenerations, not source of truth for rebuild-proof anchoring
- No dedicated @patchrooms/react package yet for tighter React integration, coming soon
- Extended MCP tools like create_room and issue creation are planned but not available
- Requires adding script tag to index.html before closing body tag, must be in HTML not component
- Cloud mode requires obtaining project key from Patchrooms dashboard, local mode has no dashboard
- Comments don't survive regeneration without stable data-patchroom-id anchors on key elements
Frequently asked questions about Patchrooms
What is Patchrooms and what does it do?
Patchrooms is visual feedback software for AI-built apps that closes the feedback loop. Drop one script into any AI-built preview, let anyone comment or leave a voice note right on the live preview, and export agent-ready context your coding agent can fix. It captures URL, viewport, browser, console errors, and element context, then turns feedback into agent-ready markdown or MCP reports for Claude Code, Cursor, and other coding agents - not tickets, but patch context.
How does feedback reach my coding agent like Claude Code or OpenCode?
Each report exports as clean Markdown with the element selector, a screenshot reference, and the artifact goal and constraints. Paste it straight into your coding agent session and the agent fixes the exact issue. For OpenCode, export any report as Markdown and include it in your OpenCode session as task context. The Patchrooms MCP server also lets agents read reports directly using list_reports and get_report tools.
What integrations does Patchrooms support?
Patchrooms supports Claude Code, Cursor, Lovable, v0, Bolt, Replit Agent, Codex, Windsurf, OpenCode, and Cline. It has specific integrations documented for Bolt (bolt.new) where you paste the loader into the app and the preview becomes a review room, and for OpenCode where you add the script tag with data-source='opencode' and data-mode='artifact-review'.
How do I install Patchrooms on my AI-built app preview?
Paste the script tag into your app's index.html before the closing </body> tag: <script src='https://room.patchrooms.com/v1/patchrooms.js' data-project-key='pr_xxx' data-mode='artifact-review'></script>. For local mode without an account, use just <script src='https://room.patchrooms.com/v1/patchrooms.js'></script> and initialize with Patchrooms.init({ storage: 'local', mode: 'artifact-review' }). In React apps, keep script tags in index.html not inside a component so window.Patchrooms exists before app code runs.
What is the difference between local mode and cloud mode?
Local mode is the fastest quick-start with no account, no key, and nothing leaving the browser. Reports live in localStorage and you export them from the widget, best for a first review pass. Cloud mode requires a project key (pr_...) from your Patchrooms dashboard, feedback lands in the dashboard and streams live, and an agent can later read it over the MCP server. Reviewers only need the preview link in both modes with no account required.
Can I use Patchrooms on production apps or just staging/previews?
Right now it's recommended to run on staging first since it's still early access, but the script should work in production too, especially for smaller teams without dedicated QA crews where own users help build the product. In-widget auth to block abuse including email-with-code, SSO, and a token bridge to your own backend is on the roadmap. Even today you can put it on prod if you gate who sees the widget and lock reports to your own domains.
How does Patchrooms anchor comments to elements that survive regeneration?
The anchor isn't just a CSS selector - it's the selected text plus the URL. When a reviewer highlights what they mean, the report carries that exact text and page URL, usually enough for the agent to find the component. A best-effort CSS selector is attached but treated as a hint not source of truth since positional selectors drift after big regenerations. For rebuild-proof anchoring, a declarative library tagging components with stable semantic data attributes like {component, name, label} is being built, same idea used for e2e/Playwright locators.
What use cases does Patchrooms support?
Patchrooms supports AI artifact review (generate, review in place, fix loop for AI agents), vibe coding review (review what AI built and give coding agent context to fix), visual bug reporting (click broken element capturing everything needed to reproduce), UI review (collaborative layer for design-system components, new features, redesigns), customer feedback (collect on staging without giving bug tracker access), QA feedback (QA annotates directly on staging capturing screenshot, selector, technical context), and agent-ready feedback (formatted for coding agents carrying artifact metadata, element selector, and screenshot).
What features does Patchrooms offer for capturing feedback?
Features include screenshots and annotations where you point at exact pixels dropping arrows, notes, and highlights; voice notes that are auto-transcribed into clean agent-ready text without typing or copy-paste; threaded comments from humans plus the agent-proposed plan you can review, push back, or approve; and diffs, reports, and links to Jira, Linear, GitHub, or Notion. Every comment carries a status of new, triaged, in-progress, or closed so nothing falls through cracks.
What is the Patchrooms MCP server and how do I use it?
The Patchrooms MCP server lets coding agents read reports directly using list_reports and get_report tools to triage them, and set_status to change comment status. This is available now. Extended MCP tools including create_room and issue creation are planned for future release. The MCP integration allows agents to access feedback without manual Markdown paste, automating the report-to-fix loop.