{"slug": "show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents", "title": "Show HN: Spotnote – Vite plugin for UI feedback to coding agents", "summary": "Spotnote, a new MIT-licensed Vite plugin, lets developers click any element in a running app, type the desired change, and copy a prompt containing the exact file, line and column for coding agents such as Claude Code, Cursor and Codex. Spotnote requires Vite 5 or later and Node 22 or later, runs only in `vite dev` or explicitly enabled staging builds, and offers an MCP server (`npx -y spotnote-mcp`) so agents can pick up notes directly, plus a webhook option that posts each note as JSON to a user-supplied URL.", "body_md": "**[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.\n\n## solo-demo.mp4\n\n- **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.\n- **Any Vite framework.** React, Vue, Svelte, Solid, Astro, and so on.\n- **Zero imports.** Nothing to import in your app code.\n- **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.\n- **Everything is local.** No account, no cloud.\n\n- Vite 5 or later\n- Node 22 or later\n\n```\nnpm install -D spotnote\npython\n// vite.config.ts\nimport spotnote from \"spotnote\";\n\nexport default defineConfig({\n  plugins: [react(), spotnote()],\n});\n```\n\nStart 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.\n\nThe prompt Spotnote copies for a note, ready to paste into your agent:\n\n```\n## Request\nMake the padding bigger\n\n## Target\n- file: components/ProductCard.jsx\n- line: 7, column: 5\n- used at: pages/Products.jsx:68 (<ProductCard> in Products)\n- element: <div class=\"product\">\n- text: \"shoes Aero Runner $120\"\n- instance: 1 of 12 rendered from this line (by DOM order) — target the one matching the text above\n\n## Source path (outer → inner)\nApp > Products > ProductCard\n\n## Current computed styles\n  padding: 16px\n  margin: 0px\n  color: rgb(26, 26, 26)\n  background: rgba(0, 0, 0, 0)\n  font-size: 16px\n  font-weight: 400\n  border-radius: 12px\n```\n\nEvery field is explained in [Prompt Format](https://spotnote-weld.vercel.app/reference/prompt-format).\n\nSkip the copy and paste: your agent picks up notes as you write them.\n\n```\nclaude mcp add --scope user spotnote -- npx -y spotnote-mcp\n```\n\nThen ask your agent: `Watch my Spotnote notes.` Codex, Cursor and Gemini CLI.\n\n## demo.mp4\n\n*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.*\n\nLet designers and reviewers write notes on a staging or preview deploy, and paste them to your team:\n\n```\nspotnote({ build: [\"staging\"] })\n```\n\n`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).\n\n## staging-demo.mp4\n\n*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**.*\n\nSend 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.\n\n```\nspotnote({ build: [\"staging\"], webhook: \"https://feedback.example.com/spotnote\" })\n```\n\nEach note arrives as JSON, with its text, page, file and line, commit, and prompt. See [Webhook](https://spotnote-weld.vercel.app/guides/webhook).\n\n## demo-webhook.mp4\n\n*On a staging build with a webhook: press Enter, and **the note lands in your team's chat**, with its file and line.*\n\nFull documentation is [here](https://spotnote-weld.vercel.app)\n\nMIT", "url": "https://wpnews.pro/news/show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents", "canonical_source": "https://github.com/harukikuri/spotnote", "published_at": "2026-10-19 14:34:38+00:00", "updated_at": "2026-10-19 14:46:02.803150+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "agent-protocols", "ai-products"], "entities": ["Spotnote", "Vite", "Claude Code", "Cursor", "Codex", "Gemini CLI", "React", "Astro"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents", "markdown": "https://wpnews.pro/news/show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents.md", "text": "https://wpnews.pro/news/show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents.txt", "jsonld": "https://wpnews.pro/news/show-hn-spotnote-vite-plugin-for-ui-feedback-to-coding-agents.jsonld"}}