I built Noktiq to make UI changes easier to explain to coding agents

Creating a user-friendly way to describe UI modifications for coding agents proved challenging, as explaining complex details often consumed valuable time. To simplify this process, I developed Noktiq, a visual feedback tool for React and Vue applications. By pointing out the specific element to modify, jotting down a brief description, and copying the resulting request into your current coding agent, Noktiq streamlines the entire workflow.

This tool reveals the source file location, line number, column, selector, and page context associated with the selected element, providing a clear pathway for the coding agent to make the necessary adjustments.

When using Noktiq, the request generated is more precise than mere descriptions of element positions. For instance, instead of attempting to remember where an element resides, you can provide a request such as: "Source: components/sections/About/About.tsx:148:17 Page: http://localhost:3000/tr Selector: #about a Visible text: View my CV Requested change: Change the text to Download my CV."

This method significantly reduces ambiguity, as the exact source code location is provided. While the source code location doesn't directly indicate any CSS rules or translation files that might need updating, it still guides the agent toward the right area.

Noktiq supports various types of selections within React and Vue applications, including individual elements, text, multiple elements, and entire areas, all with number pins, target status indicators, and rebinding notes. Users can copy individual notes or export them all, choose between compact, standard, and detailed output options, and utilize a draggable mascot and local browser note storage for convenience.

Supported integrations encompass Next.js, Nuxt, Vite, and Webpack, although compatibility depends on the specific framework version and project setup. The source code is available on GitHub under the PolyForm Shield 1.0.0 license. The tool does not require an AI account or API key, and it does not transmit any notes to an AI service; instead, users simply review and copy the generated request into their existing coding tools.

The developer's primary motivation behind Noktiq is to minimize unnecessary explanations and code searches when making visual changes, potentially also reducing token usage in the process. While a structured request may be longer than a short prompt, the benefit lies in eliminating the need for clarification and correction rounds later on.

Noktiq is currently available on npm and its source code can be found on GitHub. Feedback and suggestions on how to enhance its usefulness in various workflows are welcome.