claude-annotator-plugin

Claude Annotator Plugin (Archived)

Claude Code plugin for vite-plugin-ai-annotator - enables AI-human collaboration through visual element selection and annotation.

Overview

This plugin provides Claude Code with knowledge about AI Annotator, a tool that bridges the gap between AI assistants and web development by allowing:

• Visual element selection in the browser
• Adding comments/annotations to selected elements
• Capturing screenshots
• Injecting CSS/JS for testing
• Real-time collaboration between AI and humans

Installation

Install the Plugin

In Claude Code, first add the marketplace, then install the plugin:

/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 will handle everything!

Alternative: Local Development

git clone https://github.com/nguyenvanduocit/claude-annotator-plugin.git
claude --plugin-dir ./claude-annotator-plugin

Installation Scopes

# User scope (default) - available across all projects
/plugin install claude-annotator-plugin@claude-annotator-plugin --scope user

# Project scope - shared with team via version control
/plugin install claude-annotator-plugin@claude-annotator-plugin --scope project

What the Plugin Does

When you ask Claude to set up ai-annotator, it will:

1. Install vite-plugin-ai-annotator as a dev dependency
2. Configure your vite.config.ts with the annotator plugin
3. Set up the MCP server connection in Claude Code settings
4. Guide you through using all features

Framework Support:

• 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

Skill: annotator

The annotator skill provides comprehensive guidance on:

• Setting up AI Annotator in your project
• Configuring the MCP server
• Using all available MCP tools
• Best practices for AI-human collaboration

Trigger phrases:

• "Set up ai-annotator"
• "How do I use annotator?"
• "Select elements in browser"
• "Capture screenshot from browser"

MCP Tools Reference

Tool	Description
annotator_list_sessions	List connected browser sessions
annotator_get_page_context	Get current page URL, title, selection count
annotator_select_feedback	Enter inspect mode or select by CSS/XPath
annotator_get_feedback	Get data about selected elements
annotator_capture_screenshot	Capture viewport or element screenshot
annotator_clear_feedback	Clear all selections
annotator_inject_css	Inject CSS styles into page
annotator_inject_js	Execute JavaScript in page context
annotator_get_console	Get captured console logs

Note: All tools (except annotator_list_sessions) accept an optional sessionId parameter. If only one browser is connected, it auto-selects.

License

MIT