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

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. 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, replacing 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. The report streams straight into your Patchrooms dashboard, where you can hit Copy as prompt and paste the Markdown back into the v0 prompt so it can regenerate the component.

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.