Skip to content
Patchrooms Patchrooms

Codex

Codex edits your repository but never hosts the running preview — so embed Patchrooms on the app you run, collect element-anchored reports, and hand them back to Codex as Markdown (or read them over the read-only MCP) so it patches the right code path instead of guessing.

Prerequisites

Section titled “Prerequisites”
  • Codex (OpenAI’s coding agent) working against your repository.
  • A running build of your app to review — your local dev server or a preview deploy.
  • A project key (pr_…) from your Patchrooms dashboard.

Install the widget

Section titled “Install the widget”

Codex doesn’t host a preview, so the widget goes on the app you run. Ask Codex to insert the per-project loader into your HTML entry point — 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 you want to attach config from JS):

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({ projectKey: 'pr_xxx' });
</script>

Where to paste it

Section titled “Where to paste it”

The script tag belongs just before </body> in your HTML entry point — index.html for a Vite/React app, the root template for a server-rendered app, or the layout that wraps every page. In a React app, render the <script> tags in index.html (not inside a component) so window.Patchrooms exists before app code runs.

A prompt Codex can act on:

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

Verify it works

Section titled “Verify it works”

  1. Run your app (local dev server or preview deploy) and open it in the browser.

  2. Confirm the Patchrooms launcher appears docked to the edge of the viewport — that means the widget loaded.

  3. Click an element to leave a comment. The report should stream into your Patchrooms dashboard.

Your first feedback

Section titled “Your first feedback”

Open the running app, click the element that’s wrong, and leave a comment like:

The submit button stays enabled while the form is invalid — disable it until every required field is filled.

You can attach a screenshot, an element selection, or a voice note to the same thread. Each report captures the element selector and page context, so the next Codex edit has unambiguous targeting.

Export back to Codex

Section titled “Export back to Codex”

Two ways to get a report into a Codex task:

  • Paste Markdown (works today). Open the report in your dashboard, hit Copy agent feedback (or Download .md), and include the Markdown in your Codex task. It carries the selector, screenshot reference, goal, and constraints, so Codex edits the right code path instead of hunting through the tree.
  • Read over MCP (read-only, available now). Point Codex at the Patchrooms MCP server with a secret pr_sk_… key (scope feedback:read). Codex can call list_reports and get_report to pull reports directly — no copy-paste.

Troubleshooting

Section titled “Troubleshooting”
SymptomFix
No launcher in the running appConfirm the <script> is in the rendered HTML and loads (Network tab). In React, the tag must be in index.html, not a component.
Console: [Patchrooms] unknown project keyThe pr_… key in the loader URL is wrong — copy it from the dashboard.
Reports never reach the dashboardCheck the browser console for ingest errors and confirm the page origin is allowed for the project.
Codex can’t read reports over MCPConfirm the MCP server is configured with a pr_sk_… key scoped to feedback:read. Only list_reports / get_report exist today.