Your partner for
shipping
the UI
you designed.
Point at anything in your running app and say what to change. Your agent gets the file and line, makes the fix and shows you a before and after.
Paste it into Claude Code, Codex or Cursor. It installs jrabbit and opens your app.
Stop pasting screenshots into your terminal
You screenshot the page, paste it, and explain which button you mean. The agent guesses the component and edits the wrong file. Next session, you correct the same spacing again.
How it works
-
Open
Ask your agent to open a review of localhost:3000. jrabbit serves your app with the overlay on top and never edits your code.
-
Point
Press P, click an element and write the change. Add as many pins as you need, then press Send.
-
Fix
Your agent receives every pin with your comment, a screenshot, the selector and the file and line, and edits the code.
-
Check
Each pin comes back with a before and after shot. Approve it, or reopen it with a note.
What your agent gets
One pin on a pricing page, from your click to the fix. Point at something on this page and press Send to see your own.
{
"id": "pin_3f2a91c0",
"n": 3,
"status": "open",
"comment": "Too much air above the price. Cut it in half.",
"page": "/pricing",
"viewport": "1440x900@2x",
"element": {
"tag": "p",
"selector": "section.plans > div:nth-of-type(2) > p.price",
"text": "$24 / month",
"size": "312x56",
"styles": { "margin-top": "48px", "font-size": "40px" }
},
"source": "src/components/PlanCard.tsx:41 (PlanCard)",
"sourceChain": ["src/app/pricing/page.tsx:18 (PricingPage)"]
}Each pin also carries its screenshot. File and line work for React apps on Next.js and Vite. Anywhere else, your agent gets the text, classes and test ids to search for.
Say it twice and it becomes a rule
When you repeat a correction, your agent proposes a rule. Nothing applies until you approve it. Approved rules
are Markdown files in .jrabbit/rules/, committed with your repo, and your agent reads them before
it starts.
---
title: "Secondary text uses --ink-500"
status: approved
source: ["pin_3f2a91c0", "pin_8b17d4e2"]
created: 2026-11-04T15:12:09.000Z
---
Secondary text uses the --ink-500 token.
Never a neutral gray like #999.Runs on your machine
- One line to install. There is no account or API key.
- Pins, screenshots and rules are files in
.jrabbit/inside your project. - Pages behind a login work, because the review shares your dev server's cookies.
- MIT licensed, with the code on GitHub.
Questions
Rather install it by hand?
claude mcp add jrabbit -- npx -y jrabbitRun it from your project root.
Does jrabbit change my code?
No. It serves your app through a local proxy and adds the overlay there. Your agent makes the edits, the same way it does today.
Which agents does it work with?
Claude Code, Codex, Cursor, and any client that runs MCP servers over stdio.
Which frameworks?
Any web app on a local dev server gets pins with a screenshot, selector and styles. File and line need React on Next.js or Vite. Adapters for Vue, Svelte and Astro are welcome contributions.
Where do my screenshots go?
To the .jrabbit/ folder in your project, and to your agent when it reads a pin. jrabbit itself sends nothing anywhere.
What does it cost?
Nothing. jrabbit is free and MIT licensed.