원문 캡처 · github.com
원문 캡처 · github.com

Spotnote는 실행 중인 앱에서 수정할 요소를 클릭해 메모를 남기면 소스 파일과 줄·열 위치를 코딩 에이전트에 전달하는 Vite 플러그인이다. Vite 5 이상과 Node 22 이상이 필요하며, 계정이나 클라우드 없이 로컬에서 동작한다고 안내한다.

개발 의존성으로 설치한다.

bash
npm install -D spotnote

Vite 설정에 플러그인을 추가한 뒤 개발 서버를 실행한다. 앱 코드에 별도 import를 추가할 필요는 없다.

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

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

앱 왼쪽 아래의 실행 버튼을 눌러 요소를 선택하고 원하는 변경 사항을 입력한 뒤 Enter를 누르면, 파일·줄·열과 요소 정보가 담긴 프롬프트가 클립보드에 복사된다. 이를 Claude Code, Cursor, Codex 또는 채팅 도구에 붙여 넣을 수 있다. React, Vue, Svelte, Solid, Astro 등 Vite 기반 프레임워크를 지원한다.

복사·붙여넣기 대신 로컬 에이전트가 메모를 가져오도록 MCP를 연결할 수도 있다.

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

연결한 뒤 에이전트에 Watch my Spotnote notes.라고 요청하는 방식이다. 원문은 Codex, Cursor, Gemini CLI도 언급한다. MCP 안내에 자세한 내용이 있다.

스테이징 빌드에만 플러그인을 포함하려면 다음처럼 설정한다. vite build --mode staging에는 Spotnote가 포함되고 일반 vite build에는 포함되지 않는다. 각 프롬프트에는 빌드가 만들어진 커밋도 표시된다.

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

메모를 팀 채팅이나 이슈 추적 도구로 보내려면 웹훅 URL을 설정할 수 있다. 메모는 텍스트, 페이지, 파일과 줄, 커밋, 프롬프트를 담은 JSON으로 전송된다.

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

스테이징 빌드 안내와 웹훅 안내에서 설정을 확인할 수 있다. Spotnote는 vite dev에서 실행되며, 스테이징 빌드는 설정으로 활성화할 때만 포함된다.