VibeQuill lets you point at a page element and hand it to your coding agent

The 'this one, not that one' problem

When you ask an AI coding agent to change a web page, your instruction really has two parts: what should change, and where. The first part is easy to type. The second is surprisingly slippery, because the agent works with source code while you are looking at a rendered page.

A page can have several buttons, cards or headings that look alike. Saying 'make this one bigger' means nothing to a tool that cannot see what you are pointing at. A screenshot helps with how things look, the author argues, but page context is what helps identify the element itself.

As dev.to reported, a developer is building a tool called VibeQuill to bridge that gap.

What VibeQuill actually sends

VibeQuill is a Chrome extension. You open your website preview, then select or annotate an element on the page and describe the change you want in plain words.

The extension then packages that request with several details about the element and the page:

• the element's selector, which is a code-level address that identifies a specific piece of a page;
• the element's text and its position;
• the page URL;
• the viewport, meaning the size of the visible browser window.

All of this travels through a local service that uses MCP, the Model Context Protocol, a standard way of plugging tools into AI agents. Because the service is local, the handoff happens between your browser and the agent on your own machine, according to the post's description. The goal is to give the agent both the requested change and a pointer to the part of the page it concerns.

Connected is not the same as listening

The post stresses one setup detail that is easy to miss. Connecting an MCP service does not start a coding conversation by itself. In the workflow where the agent watches for requests, the coding chat has to be open and actively waiting.

The author frames it as a division of labor. The browser selection supplies context. The coding agent does the real work in the source code. If nothing is listening on the agent side, a selection sent from the browser has nowhere useful to go.

The post says VibeQuill supports workflows with four coding tools: Cursor, Claude Code, Codex and Antigravity. It does not go into how each one is set up.

Who it is for, and what is still unknown

This is a niche tool. It mainly suits people who build or tweak web interfaces with an AI agent and spend time correcting misunderstandings about which element to change. If you never edit page layouts through a coding assistant, you can safely skip it.

It is also an early-stage project described by its own builder. The post does not state a price. It also offers no test results, so we cannot say how well the element reference works on complicated pages. The author notes the post was drafted with AI assistance, which is worth knowing when weighing its claims.

What the author does ask for is useful. They want concrete experiences rather than praise, and they pose a direct question: is the hard part identifying the element, describing the change, or checking the result afterward? They also want to know whether screenshots and file paths already work well enough for you. There is an optional 1-minute survey for those who prefer a short form.

Questions worth asking before you try it

Any tool that reads a page and passes details to an agent deserves a quick privacy check. The post lists what it sends: selector, text, position, URL and viewport. Page text could include private content if you point it at an internal tool or a staging site with real customer data.

So before using it on anything sensitive, check what it stores, and confirm that the connection really stays on your machine. The post does not cover storage, so that is something to verify yourself rather than assume.