Professional MCP server for annotating screenshots with markers, arrows, callouts, and more. Works seamlessly with Playwright MCP for documentation workflows.

• Multiple Annotation Types: Markers, arrows, callouts, rectangles, circles, labels, highlights, blur, connectors, and icons
• Professional Styling: Gradient markers with shadows, customizable colors and themes
• Theme Support: Pre-built themes for documentation, tutorials, bug reports, and highlights
• 6 MCP Tools: Different tools for different use cases

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "image-annotator": {
      "command": "node",
      "args": ["/path/to/.mcp-servers/image-annotator/server.js"]
    }
  }
}

cd image-annotator
npm install

Add multiple annotations to a screenshot image.

Annotation Types:

• marker - Numbered circles (1, 2, 3...) with gradient and shadow
• arrow - Straight arrows with customizable heads
• curved-arrow - Smooth curved arrows
• callout - Text boxes with pointers (speech bubbles)
• rect - Rectangle highlights
• circle - Circle highlights
• label - Text labels with optional backgrounds
• highlight - Semi-transparent overlays
• blur - Blur sensitive content
• connector - Dashed lines between elements
• icon - Icon badges (check, x, warning, info, question)

Themes: documentation, tutorial, bugReport, highlight

Colors: red, orange, yellow, green, blue, purple, pink, cyan, teal, white, black, gray, lightGray, darkGray, success, warning, error, info, primary, secondary, accent

Get width, height, and format of an image. Essential for calculating annotation coordinates.

Create a numbered step-by-step guide on a screenshot. Automatically places numbered markers with labels and connecting arrows.

Quickly highlight a specific area with a shape (circle, rect, highlight) and optional label.

Add a callout (speech bubble) pointing to a specific location.

Blur a rectangular area to hide sensitive information.

{
  "input_path": "/path/to/screenshot.png",
  "annotations": [
    {"type": "marker", "x": 100, "y": 100, "number": 1, "color": "primary", "size": 28},
    {"type": "arrow", "from": [130, 100], "to": [200, 150], "color": "red", "strokeWidth": 3},
    {"type": "label", "x": 210, "y": 155, "text": "Click here!", "background": "white", "shadow": true},
    {"type": "callout", "x": 300, "y": 200, "text": "Important!", "pointer": "left", "color": "orange"},
    {"type": "rect", "x": 50, "y": 250, "width": 200, "height": 100, "color": "green", "style": "dashed"},
    {"type": "icon", "x": 400, "y": 100, "icon": "check", "color": "success"}
  ]
}

For accurate annotation positioning, use Playwright to get real element coordinates:

browser_navigate → browser_take_screenshot

Use browser_evaluate to get bounding boxes:

() => {
  const el = document.querySelector('[role="tab"]');
  const rect = el.getBoundingClientRect();
  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
}

If screenshot is at 2x scale, multiply coordinates by 2.

{
  "input_path": "/path/to/screenshot.png",
  "annotations": [
    {"type": "marker", "x": 1010, "y": 630, "number": 1, "color": "primary"},
    {"type": "callout", "x": 1010, "y": 500, "text": "Click here", "pointer": "bottom"}
  ]
}

Upload annotated image to Basecamp: basecamp_comment_with_file

# Annotate an image
node annotate.js input.png output.png --annotations '[{"type":"marker","x":100,"y":100,"number":1}]'

# Get image dimensions
node annotate.js --dimensions input.png

MIT License - see LICENSE file.

Varun Dubey varun@wbcomdesigns.com