opencode

Install one skill and opencode embeds the Patchrooms widget whenever it generates a UI artifact for review — reviewers comment straight on the preview, and opencode gets clean, structured feedback to patch from.

Prerequisites

opencode with skills enabled.
A project key (pr_…) from your Patchrooms dashboard.

Install the skill

Place the skill so opencode can discover it:

Directoryyour-project/
- Directoryskills/
  - Directorypatchrooms-artifact-review/
    SKILL.md

Paste this into SKILL.md:

---
name: patchrooms-artifact-review
description: Embed the Patchrooms SDK when generating an HTML/React/preview artifact a human will review, so reviewers comment in place and feedback returns as structured, agent-ready context.
---

# Patchrooms: make generated artifacts reviewable

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

## 1. Embed the SDK

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

```html
<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({
    projectKey: 'pr_xxx',             // <-- the user's project key
    mode: 'artifact-review',
    artifact: {
      id: 'my-app',                   // stable room key — reuse across regenerations
      title: 'Checkout flow',
      tool: 'opencode',
      goal: 'What this artifact should do',
    },
  });
</script>
```

For React, put both `<script>` tags in `index.html` so `window.Patchrooms`
exists before app code runs.

## 2. Project key

`projectKey` (`pr_…`) is required — get it from the user or their Patchrooms
dashboard settings and pass it in `init()`. Reports land in the dashboard and
stream live; an agent can read them over MCP. `projectKey` is not a `data-*`
attribute.

## 3. Stable anchors

Put `data-patchroom-id` on the key elements (primary buttons, header, nav, hero,
form fields) using semantic, stable ids so comments survive regeneration.

```html
<button data-patchroom-id="checkout-submit">Pay now</button>
```

## 4. Rules

- Never embed secrets, tokens, or PII in the page, `artifact.meta`, or `extra`.
- `pr_…` is public and safe; a secret `pr_sk_…` key must never appear in client
  code.
- After shipping, tell the user: open the preview, click elements to comment —
  the report lands in the Patchrooms dashboard, where "Copy as prompt" copies it
  as Markdown to paste back so you can patch.

Where it goes

The skill lives in your project’s skills/ directory (or wherever your opencode config loads skills from). opencode surfaces it by its description when you ask it to build a reviewable UI.

The install snippet opencode emits

The skill above uses the programmatic snippet so it can attach artifact metadata. If you don’t need that, the lowest-friction 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 (when the skill 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: 'opencode' } });
</script>

Verify it works

Ask opencode to generate or edit a UI page, then open 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 preview, click an anchored element, and leave a comment such as:

The empty state has no call to action — add a “Create your first room” button.

Attach a screenshot or element selection in the same thread. The report is already in your dashboard — hit Copy as prompt and paste the Markdown back into opencode to patch, or read it over MCP.

API the skill relies on

Real init options (packages/sdk-web/src/types.ts):

mode: 'default' | 'artifact-review'.
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.

Troubleshooting

Symptom	Fix
opencode doesn’t apply the skill	Confirm `SKILL.md` is under your `skills/` directory and ask explicitly for a reviewable UI.
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	Use stable `data-patchroom-id` anchors and reuse the same ids.