# How Vynix Works - Visual Feedback to AI Agent Fixes > Point at any element, leave a note, and Vynix captures the page, DOM, console and network context, then hands it to your AI agent over Markdown or MCP. How it works # From a click to a committed fix No screenshots. No selector hunting. No follow-up questions. Here is the whole loop, start to finish. [Try the live demo](/demo/)[Install in 2 minutes](/install/) app.acme.io/dashboard Acme DashboardPublish Feedback A live site with Vynix installed 1. Point at an element 2. Leave a note 3. Context captured 4. Markdown or MCP 5. AI agent fixes it 6. PR on GitHub 7. Status syncs back How it works ## From a click to a committed fix Four steps. No screenshots, no selector hunting, no follow-up questions. 01 ### Point at anything Click an element or drag a region on your live site. The hovered element highlights and names itself (button, link, input, image) so you always hit the right target. 02 ### Leave a note Describe the change in plain language and set a type and priority. Vynix silently records the surrounding context as you write. 03 ### Capture the context Page, CSS selector, XPath, DOM snippet, computed styles, viewport, plus recent console errors and failed network requests, attached automatically. 04 ### Ship the fix Copy a clean Markdown report or let your agent read it live over MCP. It already knows the element, the intent, and the evidence. The problem ## Vague feedback is expensive “Make this bigger” sends a human (or an agent) on a guessing expedition. Vynix replaces the back-and-forth with exact, actionable context. Without Vynix - “Make this button bigger.” Which button? Which page? What size? Cue a screenshot exchange. - “This looks broken on mobile.” No element, no viewport, no console error, just a feeling. - “The checkout feels off.” The agent guesses the selector and edits the wrong component. With Vynix - Exact element: CSS selector, XPath and DOM snippet attached. - The page, viewport and computed styles, captured automatically. - Console errors and failed requests, so “broken” comes with proof. - A clean Markdown report, or live access over MCP. What gets captured ## Context that reads like a perfect bug report Every annotation arrives with the technical detail an agent would otherwise have to ask for, assembled silently as you type. Page - URL & title - Viewport size - Browser & device - Captured timestamp Element - CSS selector - XPath - Tag, id & classes - Inner text - Box & position Appearance - Computed styles - DOM snippet - Nearest landmark - Region screenshot bounds Runtime - Console errors - Failed requests - Status codes - Request timing Privacy-safe: metadata only, query strings stripped vynix-feedback.md \## Vynix feedback: acme.store \### #1 · Headline · High \> Tighten this headline and raise contrast, fails AA. \- url: / \- selector: h1.hero\_\_title \- xpath: /html/body/header/h1 \- viewport: 1440×900 \- styles: color #94a3b8; font-size 28px \- console: TypeError: cannot read 'focus' of null (hero.js:42) GitHub handoff ## Turn a pin into a tracked issue Push one note (or a whole batch) straight to GitHub. Each issue arrives with the selector, intent and evidence in the body, then assigns itself to Copilot or a teammate so the fix starts itself. - Create issues from a single note or an entire batch at once. - Auto-assign to GitHub Copilot, a teammate, or leave it for triage. - Selector, computed styles and console errors land in the issue body. - Status syncs back to Vynix as the issue moves and closes. github · acme/store $ vynix push --batch checkout-pass ✔ opened #412 Make the primary CTA larger label: bug · selector: section.hero button.cta ✔ opened #413 Fix overlapping footer on tablet ✔ opened #414 Tighten hero headline contrast ● assigned @copilot to 3 issues ✔ Copilot started a branch on #412 › Start to finish ## From “too small to tap” to merged One real pass through the loop: one message, zero screenshots, zero follow-up questions. 1. 1Reviewer ### Sarah taps the Pay button and types one sentence Reviewing checkout on her phone, she clicks the button and writes: “Too small to tap. Raise it to 48px and use the primary color.” Type: bug. Priority: high. 2. 2Vynix ### The context assembles itself While she types, Vynix records the exact element and the evidence around it. Nobody takes a screenshot, nobody opens DevTools. selector: section.checkout button.pay · height: 34px · viewport: 390x844 · console: clean 3. 3AI agent ### Claude Code reads the note over MCP and ships the fix The agent pulls the annotation live, opens the component, raises the tap target and switches the variant, then opens a pull request with the evidence as its description. edited Button.tsx · min-h-12 · variant="primary" · PR #218 opened 4. 4Vynix ### Resolved, with no follow-up thread When the fix lands, the annotation flips to Resolved for the whole team. Sarah never wrote a second message. No code, any site ## Vynix lives in your browser Pin the extension and point-and-capture on any page: your own app, a staging build, a client’s site, even one you do not own. No snippet, no deploy. - Works on any website, the moment you click the icon. - Nothing to add to your site. Perfect for QA and agencies. - The same agent-ready capture as the embedded widget. [Add to Chrome](https://chromewebstore.google.com/detail/hgddehkmjibbhkhapihlpocoefdjeibf)Free · Works in Chrome, Edge & Brave app.acme.io/checkout Checkout 1 #1 button.checkout “make this primary and a larger tap target” ## Stop describing bugs. Point at them. Add one script tag and give your AI agent the context it has been missing. Free while we grow. [Get started free](/register)[Read the install guide](/install/) --- Source: https://www.vynix.in/how-it-works/ | Markdown version for AI agents. Full site index: https://www.vynix.in/llms.txt