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.
A project key (pr_…) from your Patchrooms dashboard.

How it works

Lovable can’t run a CLI install, so you instruct it in plain language. Feedback lands in the Patchrooms dashboard and streams live; an agent can later read it over MCP.

Copy-paste prompt

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. The report streams straight into your Patchrooms dashboard, where you can hit Copy as prompt and paste the Markdown back into Lovable’s chat so it can patch.

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.