Cursor

Drop a Cursor rule into your repo and Cursor will embed the Patchrooms widget whenever it generates a UI artifact — turning every preview into a review room where reviewers comment in place and the feedback comes back structured.

Prerequisites

Cursor with rules enabled (.cursor/rules/ in your project).
For cloud reports: a project key (pr_…) from your Patchrooms dashboard. Local mode needs no account.

Install the rule

Create the rule file so Cursor applies it to HTML/React work:

Directoryyour-project/
- Directory.cursor/
  - Directoryrules/
    patchrooms.mdc

Paste this into .cursor/rules/patchrooms.mdc:

---
description: Embed Patchrooms in generated HTML/React/preview artifacts so humans can review them in place and feedback returns as agent-ready context.
globs:
  - "**/*.html"
  - "**/*.tsx"
  - "**/*.jsx"
alwaysApply: false
---

# Patchrooms: make generated artifacts reviewable

When you generate a UI artifact (HTML page, React app, preview build) that a
human will review, embed Patchrooms. The preview becomes a review room:
reviewers click any element to comment in place, and you get clean, structured
feedback. Apply when the artifact has a visual surface; skip backend-only code.

Add before `</body>`. The UMD build attaches `window.Patchrooms`.

```html
<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({
    mode: 'artifact-review',
    storage: 'local',                 // zero-friction: no account, no backend
    artifact: {
      id: 'my-app',                   // stable room key — reuse across regenerations
      title: 'Checkout flow',
      tool: 'cursor',
      goal: 'What this artifact should do',
    },
  });
</script>
```

For React, render the two `<script>` tags in `index.html` (not inside a
component) so `window.Patchrooms` exists before app code runs.

- `storage: 'local'` runs with no account, no backend, no network calls; reports
  live in localStorage. The reviewer exports them ("Copy agent feedback" /
  Download `.md`) and pastes the Markdown back.
- If the user supplies a `projectKey` (`pr_…`), pass it in `init()` and drop
  `storage` (cloud is default). `projectKey` is **not** a `data-*` attribute.
- Put `data-patchroom-id` on the key elements (primary buttons, header, nav,
  hero, form fields) so click-to-comment anchors survive regeneration.
- Never embed secrets, tokens, or PII. `pr_…` is public; a secret `pr_sk_…` key
  must never appear in client code.

Where it goes

The rule lives at .cursor/rules/patchrooms.mdc in your project root. With alwaysApply: false and the globs above, Cursor activates it when it touches .html, .tsx, or .jsx files.

The install snippet Cursor emits

Cursor’s default is the local snippet above (no account). When you give Cursor a project key, the 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 (needed when Cursor should attach mode/artifact):

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

Verify it works

Ask Cursor to generate or edit a UI page, then run the preview.
Confirm the Patchrooms launcher appears docked to the viewport edge.
Click an element to comment. With a project key, the report should stream into your dashboard.

Your first feedback

Open the generated preview, click an anchored element, and leave a comment such as:

The hero CTA is below the fold on mobile — move it up and shrink the headline.

Attach a screenshot or element selection in the same thread. In local mode, hit Copy agent feedback / Download .md and paste the Markdown back into Cursor to patch. In cloud mode, the report is already in your dashboard (and readable by an agent over MCP).

API the rule relies on

These are the real init options (packages/sdk-web/src/types.ts):

mode: 'default' | 'artifact-review'.
storage: 'cloud' | 'local' — local means no backend and no network.
artifact: { id, title?, tool?, source?, goal?, constraints?: string[], url?, meta? }. id is the stable room key.
Script data-* reads: data-project-key, data-mode, data-artifact-id, data-source, data-storage. (projectKey can come via data-project-key or init().)

Troubleshooting

Symptom	Fix
Cursor doesn’t embed the widget	Confirm the rule is at `.cursor/rules/patchrooms.mdc` and the file you’re editing matches a glob (`.html`/`.tsx`/`.jsx`).
No launcher in the preview	Check the `<script>` is in the rendered HTML. In React, both tags must be in `index.html`.
Console: `[Patchrooms] unknown project key`	The `pr_…` key in the loader URL is wrong — copy it from the dashboard.
Comments drift after regeneration	Ensure stable `data-patchroom-id` anchors and reuse the same ids.