Lovable

Paste one prompt into Lovable’s chat and it wires the Patchrooms widget into the app it generates — reviewers comment in place on the preview, and you hand the structured feedback back to your builder.

Prerequisites

A Lovable project you can chat with.
For the cloud variant: a project key (pr_…) from your Patchrooms dashboard. The local variant needs no account.

How it works

Lovable can’t run a CLI install, so you instruct it in plain language. 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.

Paste this into Lovable’s chat:

Add Patchrooms visual feedback to this app so I can review it in place.
Load the SDK just before </body>: <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: 'lovable', 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.

Paste this into Lovable’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>: <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: 'lovable', 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

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

The script tag belongs in the page <head> or just before </body>. In a React app, render the <script> tags in index.html (not inside a component) so window.Patchrooms exists before app code runs.

Verify it works

Open the Lovable 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. When you’re done in local mode, hit Copy agent feedback (or Download .md) in the widget and paste the Markdown back into Lovable’s chat so it can patch. In cloud mode, the report is already in your dashboard.

Troubleshooting

Symptom	Fix
No launcher appears	Confirm the `<script>` is in the rendered 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.