Open source · MIT · Built for agents

Client pins. Agent edits.

An open-source feedback widget for the agent era.

Drop one script tag. Reviewers pin comments on real DOM elements. You export the lot as a clean JSON file and hand it to Claude, Cursor, or any coding agent — which has every selector, position, and comment it needs to ship the edits without you mediating. This page is the demo. The button is real.

One script tag JSON in, edits out Self-host or use ours

The widget is desktop-only (≥768px). Open this page on a wider screen to use the floating button.

01 — the loop

Client pins. You export. Agent ships.

The handoff is a JSON file. Every annotation carries a CSS selector, XPath, text snippet, and structural fingerprint — enough context for an agent to find the right component and apply the edit without you translating "the third button on the second card."

Step 1

Client pins on the live page

Floating action button, no login. Click any element, leave a comment. Reviewer never installs anything.

Step 2

You export the JSON

One click downloads every annotation with full DOM anchor, viewport position, status, and author.

Step 3

Paste it to your agent

Claude, Cursor, Copilot — any agent that reads JSON. It greps the codebase for each selector, finds the component file, ships the edit. Use our prompt ↗

{
  "message": "this CTA needs more contrast",
  "cssSelector": "main > section.hero > a.btn-primary",
  "xpath": "/html/body/main/section[1]/a",
  "elementTag": "a",
  "textSnippet": "Get started →",
  "fingerprint": "html>body>main>section>a",
  "xPct": 0.42, "yPct": 0.18,
  "status": "todo", "kind": "target"
}

The highlighted fields are what the agent uses to map the comment back to your source code. Four anchor strategies survive class renames, text edits, and small refactors.

02 — installation

Give this to your agent.

Paste this prompt into Claude Code, Cursor, or whichever agent runs your repo. The agent installs the widget, then asks whether you want cloud sync or RLS hardening and fetches those sub-prompts from GitHub itself. You only ever paste one thing.

See all agent prompts on GitHub ↗

Add the CCM Feedback widget to my site. Run this end-to-end — don't make me paste another prompt. STEP 1 — INSTALL (always) Find the global layout file (pages/_app.tsx, app/layout.tsx, app.vue, src/app.html, layouts/baseof.html, application.html.erb, base.html — whichever wraps every route). Add this right before </body>: <script src="https://ccm-feedback-582.netlify.app/w.js" defer></script> Auto-namespaces by hostname (prod and staging stay isolated). Optional attrs: data-accent="#hex", data-theme="auto", data-debug="true". Verify by running the dev server and confirming a floating button appears bottom-right on desktop (≥768px). STEP 2 — ASK ME (after install verifies green) "The widget is installed in localStorage mode. Want me to also set up: (a) Cloud sync via Supabase (multi-reviewer, multi-device)? (b) If yes to (a) — production RLS hardening?" If I say no to (a), stop and report what you changed. STEP 3 — FETCH AND EXECUTE SUB-PROMPTS YOURSELF Don't ask me to paste them. WebFetch each, read cold, execute end-to-end: (a) https://raw.githubusercontent.com/ccmdesign/ccm-feedback-tool/main/prompts/self-host-supabase.md (b) https://raw.githubusercontent.com/ccmdesign/ccm-feedback-tool/main/prompts/harden-rls.md STEP 4 — REPORT Tell me which files you edited, whether (a) and (b) ran, and any failures. Notes: widget is desktop-only. If a Supabase key is needed later, ONLY the anon/publishable key is acceptable — never the service-role key.