Figma-style UI review for AI coding agents - add comments to elements and export as markdown.
Click on UI elements to add feedback comments, navigate across routes, then export everything as structured markdown to paste into Claude, Cursor, Copilot, or any AI agent.
[Demo video placeholder - to be added]
✅ Click to comment - Add feedback to any UI element
✅ Multi-route sessions - Comments persist across page navigation
✅ Auto-export - Structured markdown copied to clipboard
✅ AI-ready format - Paste directly into coding agents
✅ Zero config - Works with Next.js, Tanstack Start, Vite, CRA, and more
npm install @waishnav/react-feedback- Install the package:
npm install @waishnav/react-feedback- Add a
scriptsarray to thehead()function insrc/routes/__root.tsx:
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
// ... your other meta tags
],
links: [
{ rel: "stylesheet", href: appCss },
// ... your other stylesheets
],
// Add react-feedback script for development only
scripts:
process.env.NODE_ENV === "development"
? [
{
src: "https://unpkg.com/@waishnav/react-feedback/dist/index.global.js",
crossOrigin: "anonymous",
},
]
: [],
}),
component: RootComponent,
});Add to app/layout.tsx:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
{process.env.NODE_ENV === "development" && (
<Script
src="https://unpkg.com/@waishnav/react-feedback/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</head>
<body>{children}</body>
</html>
);
}Add to pages/_document.tsx:
import Script from "next/script";
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
{process.env.NODE_ENV === "development" && (
<Script
src="https://unpkg.com/@waishnav/react-feedback/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Update index.html:
<!doctype html>
<html lang="en">
<head>
<script type="module">
if (import.meta.env.DEV) {
import("@waishnav/react-feedback");
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Add to src/index.tsx or src/main.tsx:
if (process.env.NODE_ENV === "development") {
import("@waishnav/react-feedback");
}<script src="https://unpkg.com/@waishnav/react-feedback/dist/index.global.js"></script>-
Start a review session
- Click the
▶️ play button in the toolbar
- Click the
-
Add comments
- Click the 💬 comment button
- Click any UI element to add feedback
- Type your comment and press Save (or ⌘+Enter)
-
Navigate routes
- Comments persist across page navigation
- Add feedback on multiple pages in one session
-
Toggle hints
- Click 💬 again to pause/resume element selection hints
-
End session
- Click the ⏹️ stop button
- Markdown is automatically copied to clipboard
-
Paste to AI agent
- Paste into Claude, Cursor, Copilot, etc.
- Share structured feedback with your team
# UI Review Session
**Date:** 1/21/2026, 9:45 PM
**Total Comments:** 3
---
## Route: /
### Comment 1
**Component:** `TodoList` at `components/todo-list.tsx:42`
**Feedback:**
> The "Add Todo" button should be more prominent - increase size and use primary color
<details>
<summary>HTML Snippet</summary>
\`\`\`html
<button class="px-3 py-1 text-sm">Add Todo</button>
\`\`\`
</details>
---
## Route: /settings
### Comment 2
**Element:** `<select>`
**Feedback:**
> Theme dropdown should have dark mode option as first choiceThis project is a fork of React Grab by Aiden Bai, extended with UI review and feedback capabilities.
MIT
