Open your first room

Patchrooms for Windsurf

Add visual feedback to your Windsurf app

Windsurf is an agentic IDE where Cascade edits your codebase and you preview the running app. Patchrooms layers element-anchored feedback on top, so every comment turns into agent-ready context.

Open your first room

Why Windsurf teams need visual feedback

  • Windsurf’s agent moves fast, so imprecise feedback becomes the bottleneck.
  • Testers report bugs in prose; the agent needs a selector to act confidently.
  • Patchrooms turns each report into element-anchored, agent-ready context.
  • The result is fewer regressions and faster review cycles.

How Patchrooms works with Windsurf

  1. Embed Patchrooms on your preview build

    Add the script to the app you review while Windsurf edits source.

  2. Collect pinpoint feedback

    Reviewers click elements to comment; Patchrooms captures selector and context.

  3. Feed it to Windsurf

    Paste the Markdown export into Cascade so it edits the right component.

Add it in one prompt

Paste a script tagAdd in one prompt

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

Add the Patchrooms review widget. 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="windsurf"
        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 Windsurf 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.

FAQ

Does Patchrooms work alongside Windsurf?
Yes. Windsurf edits your code; Patchrooms collects feedback on the running app and exports it as context you paste back into Cascade.