Patchrooms for Bolt
Add visual feedback to your Bolt app
Bolt (bolt.new) generates and runs full web apps in the browser with an instant preview. Patchrooms layers element-anchored feedback on top, so every comment turns into agent-ready context.
Try the live demoWhy Bolt teams need visual feedback
- Bolt iterates fast, so feedback has to keep up, but a list of bullet points in a doc never says exactly which pixel is broken.
- Reviewers and clients want to point at the running app, not describe it in prose.
- Vague feedback forces Bolt to re-generate on a guess; precise, element-anchored feedback gets the fix on the first try.
- Patchrooms turns "this spacing feels off" into a selector, a screenshot, and a goal the agent can act on.
How Patchrooms works with Bolt
-
Add the embed to your Bolt app
Ask Bolt to insert the Patchrooms script, or paste it into your project. It activates a review layer on the live preview without changing your build.
-
Collect pinpoint comments
Click any element to comment. Patchrooms records the selector, screenshot, and console context so nothing about the bug is lost.
-
Hand structured context to Bolt
Export to Markdown and drop it into your next Bolt prompt. The agent reads the selector and goal and ships the fix.
What your agent receives
Each pinpoint comment exports as clean Markdown with the element selector, the page and viewport, and the console state alongside the ask.
## Feedback: Checkout submit button
Element: button[data-patchroom-id="checkout-submit"]
Page: /checkout · 1440×900 · Chrome 126
Issue
Stays clickable while required fields are empty and
submits an invalid form.
Expected
Disabled until the form is valid: reduced opacity
+ aria-disabled="true".
Console
POST /api/order 422 (validation_failed) Add it in one prompt
Add in one promptPaste a script tag
Ask Bolt to wire Patchrooms in for you, paste this prompt:
Add the Patchrooms review widget. Insert this script tag into the app HTML before the closing </body> tag, exactly as written:
…then give it the snippet below. It loads on the live preview and turns on artifact-review mode: pinpoint comments anchored to the elements your reviewers click.
<script src="https://room.patchrooms.com/v1/patchrooms.js"
data-project-key="pr_xxx"
data-source="bolt"
data-mode="artifact-review"></script> Or try it locally: no account, no key, no server
Reviewing a Bolt artifact on your own machine? Run Patchrooms in local mode: no account, no project key, zero network calls. Pinpoint comments stay in your browser and export to Markdown you paste straight back into Bolt.
<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
Patchrooms.init({ storage: 'local', mode: 'artifact-review' });
</script> Review workflow
Share the preview link with your team or client. Anyone clicks an element, types a comment or records a voice note (Patchrooms auto-transcribes it to clean text), and captures the selector, a screenshot, and the page context. Every comment carries a status (new, triaged, in-progress, closed) so nothing falls through the cracks. See the full UI review workflow.
Export feedback to your AI agent
Each report exports as clean Markdown with the element selector, a screenshot reference, and the artifact goal and constraints. Paste it straight into Bolt and the agent fixes the exact issue: this is the heart of AI artifact review. The Patchrooms MCP server lets agents read reports directly (list_reports / get_report) and triage them (set_status). Available now; extended MCP tools (create_room, issue creation) are planned, and a @patchrooms/react package is coming for tighter React integration.
FAQ
- Can I use Patchrooms on a Bolt preview?
- Yes. The script loads on any Bolt-served page, and reviewers only need the link, no Bolt account required.
- Does Patchrooms capture console errors from my Bolt app?
- Yes. Reports include page context such as the URL and console state, which makes it much faster for the agent to reproduce the issue.