Add visual feedback to your Claude Code app

Why Claude Code teams need visual feedback

• Claude Code works against your real repo, so the higher-quality the feedback, the fewer round trips.
• A screenshot in a chat does not tell the agent which selector changed or what the goal was.
• Patchrooms gives Claude Code element-anchored reports with goal and constraints already attached.
• That means fewer clarifying questions and a fix that lands on the first attempt.

How Patchrooms works with Claude Code

1. Embed Patchrooms on the app you review

   Add the script to your preview build. Claude Code keeps editing code; Patchrooms gathers feedback on the running result.

2. Collect agent-ready reports

   Reviewers comment on elements. Each report includes the selector, screenshot, goal, and constraints.

3. Feed reports to Claude Code

   Paste the Markdown export into your Claude Code session. A Patchrooms MCP server for direct reads is planned.

Add it in one prompt

Paste a script tagAdd in one prompt

Ask Claude Code to wire Patchrooms in for you — paste this prompt:

Add the Patchrooms review widget to the project. Insert this script tag into the main HTML template before the closing </body> tag, exactly as written:

…then give it the snippet below. It loads on the live preview and turns on artifact-review mode — pinpoint comments anchored to the elements your reviewers click.

<script src="https://cdn.patchrooms.com/v1/patchrooms.js"
        data-project-key="pr_xxx"
        data-source="claude-code"
        data-mode="artifact-review"></script>

Review workflow

Share the preview link with your team or client. Anyone clicks an element, leaves a comment, and Patchrooms captures the selector, a screenshot, and the page context. Every comment carries a status — new, triaged, in-progress, closed — so nothing falls through the cracks. See the full UI review workflow.

Export feedback to your AI agent

Each report exports as clean Markdown with the element selector, a screenshot reference, and the artifact goal and constraints. Paste it straight into Claude Code and the agent fixes the exact issue — this is the heart of AI artifact review. A Patchrooms MCP server that lets agents read reports directly is planned, and a @patchrooms/react package is coming for tighter React integration.