nuxt-agentation

Visual annotation tool for AI coding agents in Nuxt projects.

Click any element on your page, add a note, and copy structured output directly into Claude Code, Cursor, or any AI coding agent.

Features

• 🔍 Click-to-annotate — click any element to capture its selector, classes, and content
• 📝 Structured output — generates markdown optimized for AI coding agents
• 🎯 Precise selectors — captures CSS selectors, classes, position and text content
• 🚀 Dev only — never included in production builds
• ⚡ Zero config — works out of the box

Installation

pnpm add -D nuxt-agentation

Setup

Add the module to your nuxt.config.ts :

export default defineNuxtConfig({
  modules: ['nuxt-agentation']
})

That's it. The annotation toolbar will appear automatically in the bottom-right corner of your app in development mode.

Usage

1. Click the 🔍 Agentation button in the bottom-right corner to activate annotation mode
2. Hover over any element — it will be highlighted
3. Click the element to open the annotation popup
4. Write your feedback or change request
5. Click Ajouter to save the annotation
6. Once done, click Copier to copy the structured markdown output
7. Paste it directly into Claude Code, Cursor, or any AI coding agent

Output example

## Annotation 1
- **Élément**: SECTION
- **Sélecteur**: #hero
- **Classes**: hero
- **Position**: x: 470, y: 371
- **Contenu**: Bienvenue sur mon site
- **Note**: Mettre un fond blanc

Configuration

export default defineNuxtConfig({
  modules: ['nuxt-agentation'],
  agentation: {
    // Coming soon
  }
})

Compatibility

• Nuxt 4+
• Node.js 18+
• Desktop browsers only

License

MIT