Pincushion for Vite.

One plugin line in vite.config and every dev server and preview deploy 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 -D pincushion-vite See the full product →

Install (60 seconds)

npm i -D pincushion-vite

Then add the plugin:

// vite.config.js
import { defineConfig } from 'vite';
import pincushion from 'pincushion-vite';

export default defineConfig({
  plugins: [pincushion({ project: 'pc_proj_xxx' })],
});

That's the whole integration. The widget is injected on dev-server and development builds (plus Vercel preview deployments) and left out of production builds, so the plugin is safe to keep in your config permanently — opt in to production with enabled: 'always' if you want live-site pinning too.

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:5173 and your preview host) 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 -D pincushion-vite, one plugin 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

The plugin uses Vite's transformIndexHtml hook, so it works with plain Vite, React, Vue, Svelte, SolidJS — anything that serves an index.html. 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.

On Next.js? Use pincushion-next instead, and the underlying script-tag widget works on any site. Pins land in Cursor, Claude Code, VS Code, Windsurf, and Codex.

npm i -D pincushion-vite Back to home