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.
For the cloud variant: a project key (pr_…) from your Patchrooms dashboard. The local variant needs no account.

How it works

Bolt ships a live preview app, so you embed the widget in that app — not as a separate tool. Pick one variant:

Local-mode quick-start — fastest. No account, no key, nothing leaves the browser. Reports live in localStorage; you export them from the widget. Best for a first review pass.
Cloud with a project key — 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 one of these into Bolt’s chat.

Local (no account)
Cloud (project key)

Add Patchrooms visual feedback to this app so I can review it in place.
Load the SDK just before </body> in the app HTML: <script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
After it loads, initialize:
<script>
  Patchrooms.init({
    mode: 'artifact-review',
    storage: 'local',
    artifact: { id: 'my-app', tool: 'bolt', title: 'My app' },
  });
</script>
Add a stable data-patchroom-id attribute to the key UI elements — primary buttons, the header/nav, hero, and each form field — using semantic, unchanging ids (e.g. data-patchroom-id="checkout-submit"). Reuse the same ids if you regenerate, so my comments stay attached.

Do not put any API keys, secrets, or personal data in the page, artifact.meta, or extra.
storage: 'local' means no account or backend — feedback is saved in the browser, and I’ll export it from the widget to hand to my coding agent.

Replace 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. When you’re done in local mode, hit Copy agent feedback (or Download .md) in the widget and paste the Markdown back into Bolt’s chat so it can patch — the selector and goal give Bolt unambiguous instructions instead of a guess. In cloud mode, the report is already in your dashboard.

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.
Cloud reports never arrive	You’re in `storage: 'local'`. Drop `storage` and pass a `projectKey` to send to the dashboard.