Install the widget

Find your project key (proj_...) on your project's settings page, then drop the snippet into your app. Replaceproj_YOURKEY with it.

<!-- Just before </body> -->
<script src="https://devpin.app/v1/widget.js" data-project="proj_YOURKEY" defer></script>

Optional: skip the sign-in popup

If your app already knows who the user is, hand their identity to the widget so reviewers never see a sign-in prompt. Set this before the widget script runs.

<script>
  window.__pinit = { userEmail: 'user@example.com', userName: 'Jane Doe' };
</script>
<script src="https://devpin.app/v1/widget.js" data-project="proj_YOURKEY" defer></script>

Connect your AI coding tool

For AI-assisted projects, connect Claude Code, Cursor, Codex, or Windsurf to read feedback and make the changes without leaving your editor. Create an API token in your project settings, then add the DevPin MCP server:

{
  "mcpServers": {
    "DevPin": {
      "command": "npx",
      "args": ["-y", "@devpin/mcp"],
      "env": { "DEVPIN_TOKEN": "devpin_yourtoken" }
    }
  }
}

Then ask your agent to "fix the open DevPin feedback" , it reads each pin (page, element, geometry, screenshot, the reviewer's words), makes the change, and marks it resolved. Prefer the terminal? Pipe it into any agent:

export DEVPIN_TOKEN=devpin_yourtoken
npx @devpin/cli pull | claude -p "address this feedback"

The agent runs in your environment with your own credentials, DevPin never sees your code or AI keys. On the issue-tracker side, exporting a pin can also tag the Claude Code GitHub Action to open a PR automatically.

Content Security Policy

If your app sends a CSP header, allow our origin in two directives, otherwise the browser will block the widget:

Content-Security-Policy:
  script-src 'self' https://devpin.app;
  connect-src 'self' https://devpin.app;

• script-src lets the browser load widget.js.
• connect-src lets the widget call our API to save pins.
• The widget captures screenshots with an inline canvas, so no img-src change is needed.