DEV Community

Cover image for I built Noktiq to make UI changes easier to explain to coding agents
Duran Gezer
Duran Gezer

Posted on

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

#showdev #react #vue #ai

A small UI change should be simple to explain. But when working with coding agents, I kept spending time describing which button, heading, or card I meant.

That’s why I built Noktiq, a visual feedback tool for React and Vue.

Point. Note. Paste.

Noktiq runs on your development website:

  1. Select the element you want to change.
  2. Write a note describing the change.
  3. Copy the request into your existing coding agent.

When available, the request includes the source file, line, and column, alongside a selector and page context.

Noktiq gathers the context. Your coding agent makes the code changes.

Noktiq selection and annotation workflow

What does the copied request look like?

Instead of describing an element’s position from memory, you can give your agent something like this:

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."
Enter fullscreen mode Exit fullscreen mode

This is a shortened example. Actual selectors may be more specific, especially when similar elements appear more than once.

Source locations point to the code that renders the element. They don't necessarily identify the CSS rule, translation file, or event handler that needs editing, so the agent still needs to verify the target.

React and Vue, the same workflow

Noktiq supports:

  • Individual elements, selected text, multiple elements, and area selection.
  • Numbered pins, target status, and rebinding notes to another element.
  • Copying individual notes or all notes together.
  • Compact, Standard, and Detailed output.
  • A draggable mascot and local browser note storage.

Documented integrations include Next.js, Nuxt, Vite, and Webpack. Compatibility depends on the framework version and project setup; the repository includes tested configurations and limitations.

Getting started 

npm install -D noktiq
Enter fullscreen mode Exit fullscreen mode

Installation alone doesn't display the toolbar. Add the React or Vue component and configure the source integration using the setup guide.

Keep the documented development condition so the toolbar stays hidden in production.

Noktiq doesn't require an AI account or API key, and it doesn't send your notes to an AI service. You review and copy the request into the coding tool you already use.

Why I’m building it

My goal is to reduce repeated explanations and unnecessary code searches when making visual changes.

That could also reduce token usage across a task, but I haven't measured the savings yet. A structured request can be longer than a short prompt—the potential benefit comes from avoiding clarification and correction rounds afterward.

Noktiq is available on npm, and the source code is on GitHub under the PolyForm Shield 1.0.0 license.

I'd love to hear your feedback. Would this fit into your workflow, and what would make it more useful?

Top comments (0)