spotpatch

How the element to source flow works

SpotPatch turns rendered React UI into precise, reusable development context. You select one or more elements in the browser, and the tool traces each target to its JSX or TSX source, including the file, line, and column. It then lets you inspect the component and its proven data flow, open the exact location in Cursor or VS Code, copy a structured prompt, run a guarded built in AI workflow, or hand the request to a connected external agent. The project is local first and development only, which means production builds keep no SpotPatch runtime, no source markers, and no local protocol endpoints. The supported entry point is the @spotpatch/vite package, which works with React 18.2 through 18.3 and Vite 5, 6, or 7, on Node.js 20.19 or newer. Setup is a single command, npx @spotpatch/vite@latest setup, that detects npm or pnpm, installs the matching version, and safely updates a supported vite.config file. Pressing Mod+Shift+S or clicking Select element starts the picker, and you can keep a separate instruction and context for up to eight targets by default. The page opens in Review mode, and a safe local TypeScript check can optionally expose a faster trusted mode while still protecting the review boundary.

Data flow inspection and external agents

An optional Beta inspector reports the proven component data flow for a selected element. It shows HTTP method and path, parameter keys and positions, the response fields the source actually consumes, and the proven React state, Zustand, storage, or callback destinations. The README states that runtime observation is dispatch only: SpotPatch does not read or clone response bodies, and query values are never retained. The current adapters cover supported direct and component service fetch, Axios, React Query or TanStack Query callback forms, and an experimental tRPC logical procedure path. A separate external agent handoff publishes reviewed targets to a generic MCP inbox, or actively dispatches them through narrow Claude Code and Codex adapters when those hosts are connected. The README is careful to say this integration remains local validation, not stable host support, and that automated two handoff tests pass while some real flows and the full cross platform matrix remain unverified. Commands are project root scoped so discovery cannot silently attach to another repository, and the running Node process must satisfy the 20.19 or newer requirement. The supported browsers are Chromium based, with automated interaction coverage running through Playwright during testing. The data flow Beta reports a relationship only when stable component, source, callsite, and invocation evidence agree, so unsupported or ambiguous traffic stays partial, unknown, or unassigned.

Guarded AI runs and security

AI in SpotPatch is disabled unless a complete provider configuration is present. The smallest setup uses a git ignored .env.local file with a base URL, a model name, and an API key, and the keys stay in the Vite Node process and must never use a VITE_ prefix or be committed. A guarded run prepares changes in an isolated Git worktree, runs bounded tools, and then shows a TypeScript check, a diff, and an Apply or Revert action. The default mode is Review, which is protected by a discovered local TypeScript project check, while an explicit Trusted direct mode skips host checks after one session scoped consent. The project states it does not commit, push, publish, or deploy application code, and it bans arbitrary shell commands. On the security side, the browser receives random file identifiers rather than absolute source paths, source reads are limited to files registered by the active session and kept inside the project root, and passwords, tokens, cookies, and authorization data are sanitized. Loopback host and origin checks are the default, and enabling Vite LAN access explicitly expands the trust boundary. The Next.js adapter is a 0.x public preview and is not yet part of the supported public matrix, so React with Vite remains the documented entry point.

Editorial conclusion

SpotPatch is released under the MIT license and, at the time of writing, the repository recorded 79 stars and was last updated on 2026-08-24.