Show HN: Spotnote – click an element, hand your coding agent its file:line

Spotnote is a Vite plugin for UI feedback to coding agents. Click any element in your running app, write what should change, and hand your agent its exact file, line and column.

solo-demo.mp4

Features

Exact spot. Your UI feedback points to the exact file, line and column in your source code, so your agent doesn't have to search for it.

Any Vite framework. React, Vue, Svelte, Solid, Astro, and so on.

Zero imports. Nothing to import in your app code.

Production stays clean. Spotnote runs only in vite dev, and in staging builds you turn it on for.

Everything is local. No account, no cloud.

Requirements

Vite 5 or later

Node 22 or later

Install

npm install -D spotnote

Usage

// vite.config.ts import spotnote from "spotnote";

export default defineConfig({ plugins: [react(), spotnote()], });

Start your dev server and click the launcher in the bottom-left corner. Click an element, type what should change and press Enter. The prompt is on your clipboard: paste it into Claude Code, Cursor, Codex or any chat.

The prompt Spotnote copies for a note, ready to paste into your agent:

Request

Make the padding bigger

Target

• file: components/ProductCard.jsx
• line: 7, column: 5
• used at: pages/Products.jsx:68 (<ProductCard> in Products)
• element: <div class="product">
• text: "shoes Aero Runner $120"
• instance: 1 of 12 rendered from this line (by DOM order) — target the one matching the text above

Source path (outer → inner)

App > Products > ProductCard

Current computed styles

padding: 16px margin: 0px color: rgb(26, 26, 26) background: rgba(0, 0, 0, 0) font-size: 16px font-weight: 400 border-radius: 12px

Every field is explained in Prompt Format.

Skip the copy and paste: your agent picks up notes as you write them.

claude mcp add --scope user spotnote -- npx -y spotnote-mcp

Then ask your agent: Watch my Spotnote notes. Codex, Cursor and Gemini CLI.

demo.mp4

With MCP connected: click a button, ask for a pill shape, and Claude Code picks up the note, makes the change and replies on it. You never leave the browser.

Let designers and reviewers write notes on a staging or preview deploy, and paste them to your team:

spotnote({ build: ["staging"] })

vite build --mode staging then includes Spotnote, and vite build still doesn't. Each prompt also names the commit the build was made from. See Staging Builds.

staging-demo.mp4

On a staging build: the designer writes a note and pastes it to the team chat, and the developer's agent goes straight to the file and line.

Send each note to a URL of yours as it's written: to post it to your team's chat or issue tracker, without the copy and paste.

spotnote({ build: ["staging"], webhook: "https://feedback.example.com/spotnote" })

Each note arrives as JSON, with its text, page, file and line, commit, and prompt. See Webhook.

demo-webhook.mp4

On a staging build with a webhook: press Enter, and the note lands in your team's chat, with its file and line.