UI Annotator FAQs

Question 1

What are the prerequisites for running UI Annotator?

Accepted Answer

To use UI Annotator, you need Node.js 18+ for the MCP server, Google Chrome (or any Chromium-based browser) for the extension, and Claude Code installed with MCP support available (i.e., the `claude mcp` command).

Question 2

What is UI Annotator and what problem does it solve?

Accepted Answer

UI Annotator is a local developer tool that bridges visual UI feedback and AI-assisted code changes. It allows you to annotate UI issues directly on your localhost development site, capture detailed feedback (screenshots, element data), and send it straight to Claude Code, streamlining the bug-fixing process without manual context transfer.

Question 3

How does UI Annotator integrate with Claude Code?

Accepted Answer

It features native integration with Claude Code via the Model Context Protocol (MCP). A Chrome extension captures your annotations and sends them to a local MCP server, which then exposes a `get_ui_feedback()` tool that Claude Code can call. This ensures Claude receives structured, actionable feedback instantly.

Question 4

What are the main benefits of using UI Annotator for developers?

Accepted Answer

Developers love its zero-friction, entirely local operation (no cloud, auth, or uploads), compatibility with any web stack on localhost (React, Vue, Next.js, etc.), and its ability to provide structured feedback (annotated screenshots + element-specific JSON) directly to AI for precise code changes.

Question 5

Does UI Annotator require any build steps or complex setup?

Accepted Answer

No, the Chrome extension uses vanilla JavaScript directly from source and requires no build step. After a simple clone, `npm install`, and loading the unpacked extension in Chrome, you just connect it to Claude Code via an `mcp add` command. Everything is designed for minimal setup and local operation.

UI Annotator

UI Annotator

主要功能

使用案例

主要功能

使用案例