Pincushion for Next.js.

One JSX line in your layout and every dev build and Vercel preview is pinnable. Clients and teammates drop visual feedback right on the running app — no extension, no accounts — and each pin lands in your IDE as an agent-ready work packet via MCP.

npm i pincushion-next See the full product →

Install (60 seconds)

npm i pincushion-next

Then drop the component in your root layout:

// app/layout.tsx
import { PincushionPin } from 'pincushion-next';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <PincushionPin project="pc_proj_xxx" />
      </body>
    </html>
  );
}

That's the whole integration. It renders nothing in production builds, so it's safe to leave in permanently — dev builds and Vercel preview deployments get the pin widget, production doesn't (unless you opt in with enabled="always").

Get a project id by signing in at pincushion.io or running npx pincushion-mcp setup in your repo. Register your dev and preview origins (e.g. http://localhost:3000 and your *.vercel.app preview) as project URLs — pin writes are origin-bound server-side.

Why previews are the right place for feedback

The Vercel preview deploy is already where your team and clients look at work-in-progress. Today their feedback comes back as Slack messages and annotated screenshots that you translate into prompts by hand. With the widget on the preview, the person who spots the problem pins the exact element — and your agent (Cursor, Claude Code, Codex, Windsurf) receives the CSS selector, DOM snippet, screenshot, viewport, and their comment thread in one MCP call.

The preview URL becomes the review tool. The pin becomes the prompt.

The loop

npm i pincushion-next, one JSX line, push your branch
Reviewer opens the preview URL, clicks the pin button, leaves a note on the broken element
Your agent reads the pin via the Pincushion MCP server — full work packet, no copy-pasting
Agent fixes it and calls fix_and_resolve; the pin keeps the commit, branch, and PR URL
Deploy hook resolves the pin when the fix ships; the reviewer sees it close on its own

Options

project — your Pincushion project id (required)
enabled — 'dev' (default: dev builds + Vercel previews), 'preview', 'always', or false
endpoint — optional self-hosted feedback endpoint override

Using client components and preview detection? Either enable Vercel's "Automatically expose System Environment Variables" or wrap your config with withPincushion() — details in the package README.

Pricing

Reviewers are always free — unlimited, nothing to install on their side. The developer free tier includes one project, unlimited manual pins, and 25 AI actions a month, and every signup starts a 14-day Pro trial. Pro is $19/mo: unlimited automation, realtime push to your IDE, unlimited projects, and access controls.

Not on Next.js? The same one-line install exists for Vite, and the underlying script-tag widget works on any site. Pins land in Cursor, Claude Code, VS Code, Windsurf, and Codex.

npm i pincushion-next Back to home