v0

Add one script tag to the app shell of your v0 build and the Patchrooms widget overlays a review layer on the rendered page — reviewers comment in place on the exact component, and you hand the structured feedback back to v0 to regenerate.

Prerequisites

A v0 project that produces a React/Next.js app you can edit (or deploy from).
For the cloud variant: a project key (pr_…) from your Patchrooms dashboard. The local variant needs no account.

How it works

v0 generates React components — it doesn’t expose a CLI install — so you either paste the snippet into the app shell yourself, or ask v0 to insert it. 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.

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 widget is a plain script tag — there is no React component to import. Add it once at the document level so window.Patchrooms exists for every page, not inside a feature component.

v0 output is almost always Next.js (App Router), so placement has a nuance:

Render the loader in app/layout.tsx using next/script. Use the afterInteractive strategy so it loads after hydration:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

For the programmatic variant, load the base script with next/script and call Patchrooms.init() from a tiny client component ('use client') in an effect, so window.Patchrooms is defined when you call it.

Render the loader in pages/_document.tsx, just before </body>:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        {/* eslint-disable-next-line @next/next/no-sync-scripts */}
        <script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js" />
      </body>
    </Html>
  );
}

If your v0 export is a standalone HTML page, put the tag in <head> or just before </body>:

<script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

Ask v0 to insert it

Prefer to let v0 wire it up? Paste this into the v0 prompt. Pick one variant:

Local (no account)
Cloud (project key)

Add the Patchrooms visual feedback widget to this app so I can review it in place.
Load the SDK and initialize it. Since this is a Next.js app, add it in app/layout using next/script with strategy="afterInteractive" (or in pages/_document for the Pages Router), so it runs on every page: <script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
After it loads, initialize from a client component:
Patchrooms.init({
  mode: 'artifact-review',
  storage: 'local',
  artifact: { id: 'my-app', tool: 'v0', title: 'My app' },
});
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 the component, 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 back to v0.

Replace pr_xxx with your project key:

Add the Patchrooms visual feedback widget to this app, connected to my Patchrooms project.

This is a Next.js app, so add the per-project loader in app/layout using next/script with strategy="afterInteractive" (or in pages/_document for the Pages Router): <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 load https://room.patchrooms.com/v1/patchrooms.js and call Patchrooms.init({ projectKey: 'pr_xxx', mode: 'artifact-review', artifact: { id: 'my-app', tool: 'v0', title: 'My app' } }) from a client component. 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.

Verify it works

Open the v0 preview (or your deployed page).
Look for the Patchrooms launcher docked to the edge of the viewport. If it’s there, the widget loaded.
Click any component 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 component (e.g. the one tagged data-patchroom-id="checkout-submit"), and leave a comment like:

This card is too wide on desktop, and the spacing above the button 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 the v0 prompt so it can regenerate the component. In cloud mode, the report is already in your dashboard.

Troubleshooting

Symptom	Fix
No launcher appears	Confirm the script is in the rendered HTML (Network tab). In Next.js it must be in `app/layout` (via `next/script`) or `pages/_document`, not a raw tag inside a component.
Console: `[Patchrooms] unknown project key`	The `pr_…` key in the URL is wrong. Copy it again from the dashboard.
`Patchrooms is not defined`	You called `Patchrooms.init()` before the base script loaded. Load `patchrooms.js` first, then init from a client effect.
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.