Vite Plugin Ai Annotator

vite-plugin-ai-annotator

AI-powered element annotator for Vite - Pick elements and get instant AI code modifications.

[](https://youtu.be/OuKnfCbmfTg)

📺 **[Watch the Tutorial Video](https://youtu.be/OuKnfCbmfTg)** - See the plugin in action!

What is this?

Point at any element on your webapp, type a request, and AI modifies your code instantly.

• Point directly at any element on your webapp
• Type a short request like "make it bigger", "center it", "change color to blue"
• Wait for AI to modify your code - it automatically finds and updates the source files
• See instant results - your changes appear immediately in the browser

Save cognitive load, because it's precious.

Why use it?

Traditional workflow: inspect element → find source file → locate the code → make changes → check results.

With this plugin: point → describe → done.

Works with all Vite-supported frameworks:

• ⚛️ React - Detects components, props, and state
• 🟢 Vue - Understands composition/options API
• 🅰️ Angular - Recognizes components and directives
• 🟠 Svelte - Identifies components and stores
• 📄 Vanilla JS - Works with plain HTML/CSS/JS
• 🟦 Nuxt.js - Full support via Nuxt module (Nuxt 4+)

Installation

Option 1: Automatic Setup (Recommended)

Install the **Claude Code plugin** and let AI set everything up for you:

/plugin marketplace add nguyenvanduocit/claude-annotator-plugin
/plugin install claude-annotator-plugin@claude-annotator-plugin

Then ask Claude: *"Set up ai-annotator for my project"* - it handles the rest!

Option 2: Manual Setup

For Vite Projects

Step 1: Install the package

bun add -d vite-plugin-ai-annotator

Step 2: Add to your Vite config

import { defineConfig } from 'vite';
import annotator from 'vite-plugin-ai-annotator';

export default defineConfig({
  plugins: [