# Vynix Features - AI Website Annotation & Bug Capture

> Structured element capture, runtime diagnostics, a native MCP server, Shadow-DOM isolation and more: everything an AI coding agent needs from visual feedback.

Features

# 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.

[Get started free](/register)[Install guide](/install/)

Features

## 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.

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)

Outputs & integration

## 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.

MarkdownAI promptJSON

A human-readable report to paste into a PR, ticket, or chat.

report.md

\## 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

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
›

claude code: vynix mcp

$ 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
›

Model Context Protocol

## 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.
    

Claude CodeCursorGitHub CopilotWindsurfGeminiAny MCP client

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”

Keep reading

## Go deeper in the Vynix resources

[The Vynix blog

Product notes and deep dives on agent-native feedback.

](/blog/)[Integrations

Connect Vynix to Cursor, Claude Code, Copilot and Windsurf over MCP.

](/integrations/)[Vynix vs other tools

How Vynix compares on the closed feedback loop.

](/compare/)[Buyer guides

The best feedback, bug and issue tools, compared.

](/best/)

## 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/features/ | Markdown version for AI agents. Full site index: https://www.vynix.in/llms.txt