CORE_SYS v0.0.0-LOADING ↓ ---/wk ↓ ---/mo

/aiocean /duocnv

terminal main_hero_process.sh

 █████╗ ██╗      █████╗ ███╗   ██╗███╗   ██╗ ██████╗ ████████╗ █████╗ ████████╗ ██████╗ ██████╗
██╔══██╗██║     ██╔══██╗████╗  ██║████╗  ██║██╔═══██╗╚══██╔══╝██╔══██╗╚══██╔══╝██╔═══██╗██╔══██╗
███████║██║     ███████║██╔██╗ ██║██╔██╗ ██║██║   ██║   ██║   ███████║   ██║   ██║   ██║██████╔╝
██╔══██║██║     ██╔══██║██║╚██╗██║██║╚██╗██║██║   ██║   ██║   ██╔══██║   ██║   ██║   ██║██╔══██╗
██║  ██║██║     ██║  ██║██║ ╚████║██║ ╚████║╚██████╔╝   ██║   ██║  ██║   ██║   ╚██████╔╝██║  ██║
╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═══╝ ╚═════╝    ╚═╝   ╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝

What you see
is what AI Get

Click any element in your browser. AI instantly receives the selector, source file location, and context — so it can edit the right code without guessing.

account_tree data_flow.viz

language

01_BROWSER

User selects element

INIT

stylus_note

02_ANNOTATOR

Captures context + location

PROC

03_CLAUDE_CODE

Edits exact file:line

EXEC

analytics sys_stats.log

10x

Faster

-90%

Grep/Search

↑

Accuracy

visibility user_view.browser WHAT USER SEES

https://your-app.com/dashboard

#1 DIV

claude_code.cli WHAT AI SEES

Claude

Waiting for user feedback...▊

○ No elements selected

○ Select an element in browser to start

Claude

I will use the tool get_feedback.

get_feedback

{

"tagName": "DIV",

"cssSelector": "div.card-component",

"sourceFile": "Dashboard.tsx:42:8",

"comment": "Move this below header"

}

→ Reading file Dashboard.tsx

→ Found component at line 42

✓ AI knows exact location to edit

inventory_2 modules_catalog.json

download

0x01_INSTALL_PKG

Install via bun or npm

# bun (recommended)
bun add -d vite-plugin-ai-annotator

# npm
npm install -D vite-plugin-ai-annotator

settings

0x02_CONFIG_VITE

Add plugin to vite.config.ts

// vite.config.ts
import annotator from 'vite-plugin-ai-annotator';

plugins: [annotator({port: 7318})]

auto_fix_high

0x03_SKILL

Skill is added automatically

# skill auto-registered on install
# use in Claude Code with:
/ai-annotator

info project_readme.md

WHAT_IS_THIS

Point at any element in your running app → describe what you want → AI modifies your source code instantly.

$ VISUAL_SELECT # Click any element in your running app

$ AI_CONTEXT # AI receives exact file:line + component info

$ INSTANT_EDIT # Code changes appear immediately

$ ZERO_CONFIG # Works with any Vite project

React Vue Angular Svelte Nuxt Vanilla JS

VIEW_SOURCE →

coffee

BUY_ME_A_COFFEE

Support the development of AI-Annotator. Every coffee helps fuel more features.