Bolt

Bolt (bolt.new) generates and runs a full web app in the browser with an instant preview — paste the Patchrooms loader into that app and the running preview becomes a review room, where reviewers click any element to comment and you hand the structured feedback back to Bolt.

Prerequisites

A Bolt project with a live preview you can open.
A project key (pr_…) from your Patchrooms dashboard.

How it works

Bolt ships a live preview app, so you embed the widget in that app — not as a separate tool. Feedback lands in the Patchrooms dashboard and streams live; an agent can later read it over MCP.

Reviewers only need the preview link — no Bolt account required.

Copy-paste prompt

The simplest path is to ask Bolt to add the script for you. Paste this into Bolt’s chat, replacing pr_xxx with your project key:

Add Patchrooms visual feedback to this app, connected to my Patchrooms project.
Load the per-project loader just before </body> in the app HTML: <script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script> (replace pr_xxx with my key). This loader carries my project config, so the widget auto-initializes.
If you also want artifact metadata on the reports, instead initialize programmatically:
<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({
    projectKey: 'pr_xxx',              // <-- my key
    mode: 'artifact-review',
    artifact: { id: 'my-app', tool: 'bolt', title: 'My app' },
  });
</script>
Put projectKey inside init() — it is not a script-tag attribute.
Add stable data-patchroom-id attributes to the key UI elements (primary buttons, header/nav, hero, form fields) using semantic, unchanging ids. Reuse them across regenerations so comments stay attached.

Never put secrets or personal data in the page. pr_… is a public project key and is fine to include; never paste a secret pr_sk_… key into the app.

The install snippet

You can also paste the script straight into the app’s HTML yourself — Bolt’s file tree exposes index.html. The primary, lowest-friction cloud install is the per-project loader — the key lives in the URL and the server inlines your config, so the widget auto-initializes:

<script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

Programmatic alternative (use when you want to pass mode/artifact from JS):

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({ projectKey: 'pr_xxx' });
</script>

Where it goes

Paste the script into the app’s index.html, in the <head> or just before </body>. In a React app, keep the <script> tags in index.html (not inside a component) so window.Patchrooms exists before app code runs. The script activates the review layer on the live preview without changing your build.

Verify it works

Open the Bolt preview.
Look for the Patchrooms launcher docked to the edge of the viewport. If it’s there, the widget loaded.
Click any element to drop a comment. If you used a project key, open your Patchrooms dashboard — the report should stream in live.

Your first feedback

Open the preview, click a primary button (e.g. the one tagged data-patchroom-id="checkout-submit"), and leave a comment like:

This button label should say “Pay now”, and the spacing above it is too tight.

You can attach a screenshot, an element selection, or a voice note in the same thread — and reports carry page context such as the URL, so the bug is fully captured. The report streams straight into your Patchrooms dashboard, where you can hit Copy as prompt and paste the Markdown into Bolt’s chat so it can patch — the selector and goal give Bolt unambiguous instructions instead of a guess.

Troubleshooting

Symptom	Fix
No launcher appears	Confirm the `<script>` is in the rendered `index.html` and loads (Network tab). In React, the tags must be in `index.html`, not a component.
Console: `[Patchrooms] unknown project key`	The `pr_…` key in the URL is wrong. Copy it again from the dashboard.
Comments don’t survive a regeneration	Add stable `data-patchroom-id` anchors on the key elements and reuse the same ids when you regenerate.