Back to projects
Agentic Sniper interface with a frontend application open
Desktop tool for coding agents

Agentic Sniper

Select a region from any frontend project and generate a deterministic payload with a screenshot, coordinates, and DOM context to guide precise changes by coding agents.

ElectronReactTypeScriptViteNode.jsExpressnode-ptyxtermsharpVitest

Frontend projects change quickly, yet AI-guided interface changes often start with incomplete context: an isolated screenshot does not identify which element should change, where it sits on the page, or which DOM relationships must be preserved. Agentic Sniper was created to turn that visual selection into deterministic context that coding agents can reuse.

As a desktop application, it opens a project folder and detects whether it should work with a development server or a static build, recognizing Vite, Next.js, and Create React App structures. The main process starts the environment when necessary, discovers the effective URL, and displays it in a 1:1 BrowserView so the interface remains visually accurate.

In Snipe mode, the user draws a rectangle over the desired area. The renderer combines the selection with scroll and device pixel ratio, captures the image, runs controlled extraction inside the document, and gathers the primary target, context elements, CSS selectors, classes, text, and relevant styles. This information is combined with project and page metadata into a compact payload, stored temporarily in the project and referenced from the embedded terminal.

The result is a more reproducible workflow for frontend changes: the agent receives a visual target together with coordinates and structural context, reducing guesswork before editing. The MVP also leaves room for CDP-based extraction, full-page capture, sourcemap-based source mapping, AI chat, and a plugin system.

Demo

See Agentic Sniper in action