Set up PinDrop. Add a project, connect your agent over MCP, close the loop.
The whole setup: get your live page into PinDrop, share the link, and wire Claude Code, Cursor, or Codex to the MCP server so your agent can read and resolve pins. MCP and the REST API are on every tier, including Free.
- Add a project: drop the PinDrop script in your site's
<head>. - Share the link. Reviewers drop pins with no signup.
- Mint an API key in Settings → MCP (shown once).
- Register the MCP server in your IDE.
- Say
fix pin 4. Your agent reads, fixes, and resolves.
1. Add a project
Add the PinDrop script to your site. One tag in the <head>, loaded on every page. It tracks client-side route changes too, so a pin on /pricing stays on /pricing. Works with Next.js, Vite, React Router, Webflow, Shopify, or WordPress.
<script
src="https://www.pindrop.page/embed.js"
data-pindrop-origin="https://www.pindrop.page"
defer
></script>Next.js → app/layout.tsx head · Vite/HTML → index.html · Webflow → Custom Code → Head · Shopify → theme.liquid · copy your exact snippet from the project's install panel
2. Share the link
Each project gives you one share link. Send it in Slack, email, or a text. Reviewers open it, click the spot that's wrong, and comment. No account, no extension, no signup. Every pin captures the route, viewport, exact element, pixel coordinates, and a screenshot, and gets a number anyone can point to, like pin 4.
3. Connect the MCP server
PinDrop exposes a remote, streamable-HTTP MCP server. First mint an API key under Settings → MCP in your account. The pdp_… secret is shown once, so copy it. The server URL and key are both on that page; the examples below use placeholders.
claude mcp add --transport http pindrop \
https://your-app.convex.site/mcp \
--header "Authorization: Bearer pdp_…"Verify with claude mcp list.
export PINDROP_API_KEY="pdp_…"
codex mcp add pindrop \
--url "https://your-app.convex.site/mcp" \
--bearer-token-env-var PINDROP_API_KEYRestart Codex, then run /mcp to confirm pindrop is listed.
Point any MCP client at the same remote server: name pindrop, transport HTTP, https://your-app.convex.site/mcp, header Authorization: Bearer pdp_…. Or paste those details into the agent and let it register the server itself.
Once connected, your agent has five tools. Pins are numbered and project-scoped, so you reference the number you see in the UI, not a UUID:
pindrop_list_projects- every project the key can see
pindrop_list_open_pins- open pins across your projects, with full context
pindrop_get_pin_context- route, viewport, coordinates, screenshot, DOM snapshot, thread
pindrop_add_pin_comment- reply on a pin as the agent
pindrop_resolve_pin- close a pin once the fix ships
4. Close the loop
In your IDE, say fix pin 4. The agent lists the open pins, reads the one you named with its full context, edits the code, and calls pindrop_resolve_pin with a short note. The reviewer watches it flip to resolved in real time. You can also work pins by hand from the project: reply, assign, filter, mark done.
REST API
Prefer scripts or CI over MCP? The same API key works against a plain JSON API. Base URL is your deployment's https://your-app.convex.site; authenticate with Authorization: Bearer pdp_… on every request.
GET /api/v1/projects- list your projects
GET /api/v1/pins?project=<id>- open pins; add &projectHint=<repo> or &limit=<n>
GET /api/v1/pin?project=<id>&pinNumber=4- full context for one pin (or ?pinId=<id>)
POST /api/v1/comments- reply on a pin · body { project, pinNumber, body }
POST /api/v1/resolve- close a pin · body { project, pinNumber, resolved?, comment? }
curl https://your-app.convex.site/api/v1/pins?project=<id> \
-H "Authorization: Bearer pdp_…"- MCP and the REST API are on every tier, including Free.
- Reviewers never need an account, on any tier.
- Up to 5 active API keys; revoke and rotate anytime.
- Sessions never expire; pins stay anchored.
Paste a URL and get your first pin.
no signup to share · free MCP with a free account · $15/mo when you outgrow it