Sign in Try the live demo

Use case

Review tool for vibe-coded apps

Vibe coding makes it easy to generate a working app preview fast. The bottleneck is reviewing what the AI built and giving the coding agent enough context to fix the right thing. Patchrooms lets reviewers click the live preview, leave feedback, and send agent-ready patch context back to Claude Code, Cursor, Lovable, v0, Bolt, or Replit Agent.

Try the live demo

The problem

A vibe-coded app changes with every prompt, and there is no spec to point at. So review happens by eyeballing the preview and typing impressions into the builder chat: "the pricing cards look off on mobile". The agent guesses which cards, which breakpoint, which property, and one regeneration later you are also reviewing new accidental changes. Feedback that is not anchored to a real element makes every iteration a coin flip.

The workflow

  1. Generate, then share the preview

    Your builder ships a live preview URL. One script tag puts the Patchrooms widget on it, or use local mode (no key, no server) for artifacts generated on your own machine.

  2. Point at what is off

    Click the element and say what is wrong, typed or as a voice note that is auto-transcribed. Patchrooms captures the element anchor, a screenshot, the viewport, and console errors automatically.

  3. Copy the fix prompt

    One click turns the report into agent-ready Markdown: the comment plus the exact element and context. Paste it straight back into the builder chat.

  4. Regenerate with confidence

    The agent edits the exact element instead of guessing. Statuses in the dashboard track what is fixed; MCP-connected agents can even close their own reports.

Example

A solo builder vibe-codes a landing page in Bolt. The hero CTA overlaps the nav at 375px. Instead of describing it, they click the CTA on the preview, type "overlaps the nav on mobile, keep desktop unchanged", hit Copy, and paste into Bolt. The next generation fixes only the CTA positioning; the rest of the page stays put.

Agent-ready export

Each report exports as agent-ready Markdown with the element selector, screenshot reference, viewport, and console errors. Paste it into Lovable, Bolt, v0, or Cursor chat. Claude Code and other MCP clients read reports directly (list_reports / get_report) and close them with set_status.

A report exports as Markdown like this:

## Report: Landing page (vibe-coded)
**Tool:** bolt   **Goal:** marketing landing v1

- **Element:** `header .cta-primary`
- **Comment:** Overlaps the nav at 375px, keep the desktop layout unchanged.
- **Viewport:** 375×812 · Console: clean
- **URL:** https://preview.bolt.new/landing

FAQ

How do I review and QA a vibe-coded app?
Review it on the live preview, not in the chat. Click the element that looks wrong, leave a comment (a screenshot and the element anchor attach automatically), and export the structured report back into your builder. The agent gets the exact element and context it needs to fix the right thing on the first try.
Why does chat feedback fail for vibe coding?
Chat loses the pixel. "Make the button bigger" carries no selector, no viewport, no screenshot, so the agent guesses, and each guess costs a regeneration. Element-anchored feedback removes the guessing.
Does it work with Lovable, Bolt, v0, and Replit Agent?
Yes, anything that serves a live preview. There are per-tool guides for Lovable, Bolt, v0, Replit Agent, Cursor, Claude Code, and more.
Can I review a local artifact without an account?
Yes. Local mode runs the widget with zero network requests (no key, no signup) and exports the feedback as Markdown when you are done.
Do reviewers need an account?
No. Reviewers open the preview link and comment. Only the person triaging feedback needs an account.