# Show HN: Spotnote – Vite plugin for UI feedback to coding agents

> Source: <https://github.com/harukikuri/spotnote>
> Published: 2026-10-19 14:34:38+00:00

**[Spotnote](https://spotnote-weld.vercel.app)** 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

- **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](https://spotnote-weld.vercel.app/guides/staging) you turn it on for.
- **Everything is local.** No account, no cloud.

- Vite 5 or later
- Node 22 or later

```
npm install -D spotnote
python
// 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](https://spotnote-weld.vercel.app/reference/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](https://spotnote-weld.vercel.app/guides/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](https://spotnote-weld.vercel.app/guides/staging).

## staging-demo.mp4

*On a [staging build](https://spotnote-weld.vercel.app/guides/staging): 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](https://spotnote-weld.vercel.app/guides/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.*

Full documentation is [here](https://spotnote-weld.vercel.app)

MIT