Agentation Vue

See it. Point it. Fix it.

Agentation Vue turns visual feedback into structured instructions for AI coding agents. Click any element on a page, leave a comment, and copy the output as Markdown — ready to paste into Claude Code, Cursor, Copilot, or any LLM.

Unofficial Vue.js port of Agentation (agentation.dev).

HOW IT WORKS

1. Click the toolbar icon (or double-tap a modifier key) to enter inspect mode.
2. Hover over any element — it highlights automatically with full CSS path detection.
3. Click to pin a numbered marker and type your note.
4. Hit "Copy" — structured Markdown lands in your clipboard, ready for your AI tool.

KEY FEATURES

- Click-to-annotate — Pin markers on any element with a single click.
- Multi-select — Shift+drag to rubber-band multiple elements at once.
- Area select — Alt+drag to annotate a screen region.
- Text selection — Highlight specific text to annotate it.
- Vue component tree — Automatically detects the full Vue component hierarchy (works on any Vue 2.7 or Vue 3 app).
- Keyboard-first — Double-tap a modifier key to toggle; hold it to "peek" without interrupting your flow.
- Two detail levels — Standard for quick feedback, Forensic for deep debugging (bounding boxes, computed styles, accessibility attributes).
- Themes — Light, dark, or auto (follows your system preference).
- Session persistence — Annotations survive page refreshes, scoped per URL.

AI-OPTIMIZED OUTPUT

The Markdown output is designed for LLMs: each annotation includes the element tag, its CSS selector path, your comment, the Vue component chain, and nearby context. Forensic mode adds viewport dimensions, user agent, bounding boxes, CSS classes, computed styles, and accessibility info — everything an AI agent needs to locate and fix the issue.

PRIVACY

All data stays in your browser. Annotations are stored in sessionStorage — nothing is sent to any server. Works fully offline.

WHO IT'S FOR

- Developers using AI pair-programming tools (Claude Code, Cursor, Windsurf, Copilot...)
- QA teams reporting bugs with precise element context
- Designers handing off feedback on live sites
- Anyone who wants to point at a UI and tell an AI exactly what to change

OPEN SOURCE

Unofficial community-maintained Vue.js port of Agentation (agentation.dev) by Ben Taylor. Also available as an NPM package for embedding directly in your Vue app.

https://github.com/Blaked84/agentation-vue