Cline

Cline plans multi-step edits inside VS Code, so the result is only as good as the target you give it. Embed Patchrooms on the app you’re reviewing, collect element-anchored reports, and paste the Markdown export into Cline so its plan hits the right element.

Prerequisites

Cline running in VS Code, pointed at the project whose preview you’re reviewing.
A preview build of your app you can open in a browser (the running app — not the source Cline edits).
For cloud reports: a project key (pr_…) from your Patchrooms dashboard. Local mode needs no account.

Cline edits your source; you add Patchrooms to the app you review. Pick one variant.

Cloud (project key)
Local (no account)

The 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>

Reports land in the Patchrooms dashboard and stream live; an agent can read them over MCP.

Zero friction — no account, no key, nothing leaves the browser. Reports live in localStorage; you export them from the widget.

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({
    mode: 'artifact-review',
    storage: 'local',
    artifact: { id: 'my-app', tool: 'cline', title: 'My app' },
  });
</script>

projectKey belongs inside init(), not as a script-tag attribute. Never put secrets or personal data in the page.

You can ask Cline to add the snippet for you. Paste this into the Cline chat:

Add the Patchrooms review widget. Insert this script tag into the main HTML template before the closing </body> tag, exactly as written: <script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

Where it goes

The script tag belongs in the page <head> or just before </body> in your app’s main HTML template. 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 your preview build in a browser.
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 the element that’s wrong, and leave a comment like:

The form validation message is hard to read — bump the contrast and move it under the field.

Attach a screenshot, an element selection, or a voice note in the same thread. Patchrooms captures the selector, screenshot, and your note so Cline plans against an accurate target instead of guessing.

In local mode, open the report in the widget and hit Copy agent feedback (or Download .md). In cloud mode, open the report in your dashboard and copy the same Markdown.

Paste it into the Cline chat and tell Cline to fix it:

Here’s a Patchrooms report. The selector and screenshot point at the exact element — plan a fix and patch it.

(paste the Markdown)

If you’ve wired the Patchrooms MCP server into Cline, it can pull reports itself with the read-only tools:

list_reports — list reports for a project.
get_report — fetch one report’s full blocks (text, screenshot, selection).

These need a secret pr_sk_… key with feedback:read scope. Then ask Cline:

Use list_reports, read the newest one with get_report, and patch the element it points at.

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 loader URL is wrong. Copy it again from the dashboard.
Cloud reports never arrive	You’re in `storage: 'local'`. Drop `storage` and pass a `projectKey` to send to the dashboard.
Cline patches the wrong element	Paste the full Markdown export — the selector and screenshot are what anchor its plan. A one-line summary loses that context.