Built to make feedback actionable
Vynix captures the technical context an AI agent needs, isolates itself from your app, and connects directly to your tools.
Everything an agent needs, nothing it doesn’t
Vynix is built for one job: turning a point-and-click into context a coding agent can act on immediately.
Two ways to capture
Click an element or drag to select a region. Each mode lands a precise, numbered pin, and the hovered element shows its name and selector so you always hit the right target.
Live element inspector
As you annotate, Vynix shows the resolved CSS selector, the React or Vue component behind the element, and its computed styles, so you see exactly what your agent will receive.
Structured context, not screenshots
CSS selector, XPath, tag, classes, inner text, dimensions and computed styles: the things an agent can actually grep and act on.
One-click GitHub issues
Turn any note (or a whole batch) into GitHub issues, and auto-assign them to Copilot or a teammate with the selector, intent and evidence already in the body.
AI diagnosis on demand
Ask Vynix to diagnose a note: it reads the captured page, element, DOM and runtime errors and returns ranked root causes, a confidence score, a suggested fix, and the files it most likely lives in.
Share without an account
Send a read-only review link to a client or stakeholder. They see every annotation in full context, no login required, and reporter emails stay private. Revoke any time.
Runtime diagnostics
Recent console errors and failed network requests ride along with each note, so “it’s broken” comes with the actual evidence.
Native MCP server
Your agent reads, clarifies, and resolves annotations live. No copy-paste, just “address my feedback” or “fix annotation 3.”
Secure by default
Optional two-factor authentication, verified email sign-up, social login, and provider keys encrypted at rest. Your account and your AI keys stay yours.
Many notes, one handoff
Drop pins across several pages, review and edit them as one numbered list, then send the whole batch (to the dashboard, a Markdown report, or GitHub) in a single click.
Three export formats
The same notes render as a human-readable Markdown report, an imperative AI prompt, or structured JSON: pick what your workflow needs from the toolbar.
Privacy by design
Diagnostics are metadata only: no request bodies, no headers, and every URL is stripped to its path. Opt out with one attribute.
Isolated by Shadow DOM
The widget renders in a Shadow DOM, so it never inherits or leaks your styles. It looks the same on every stack.
Light, dark & reduced-motion
The widget matches your site automatically and honors prefers-reduced-motion. Freeze animations to annotate a single frame.
Feather-light
Under 16KB gzipped with zero runtime dependencies. It loads with defer and never blocks your page.
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
## 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)
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.
$ 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 ›
$ what feedback do I have on acme.store? ● 3 open annotations in this batch #1 headline · #2 CTA button · #3 pricing card $ fix annotation 2 ● #2 button.cta: “make primary, larger tap target” ✔ edited Button.tsx (min-h-12, variant=primary) ✔ marked annotation resolved ›
Your agent reads the feedback directly
Vynix ships a first-party MCP server. Connect it once and your agent can list, clarify, and resolve annotations without a single copy-paste.
- Ask “what feedback do I have?” and get the full batch with context.
- Say “fix annotation 3” and the agent acts on the exact element.
- Resolve annotations in place. The dashboard stays in sync.
One capture, every format you need
Pick how feedback leaves the page. The same notes render three ways: copy them, prompt your agent, or pipe the JSON into your own tooling.
A human-readable report to paste into a PR, ticket, or chat.
## Vynix feedback: acme.store (2) ### #1 · Make the primary CTA larger (bug · high) > Hard to tap on mobile; raise the tap target. - page: /pricing - selector: section.hero button.cta - component: <PricingHero> - styles: font-size 14px; min-height 32px - console: TypeError: cannot read 'focus' of null ### #2 · Fix overlapping footer (layout · medium) - page: /pricing - selector: footer.site-footer .columns
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.