Skip to content
Annot

Install annot-mcp

The MCP server is the entry point for driving Annot from an AI agent. If you’re writing Playwright tests, start with annot-playwright instead — the MCP server is for runtime agents (Claude Desktop / Claude Code / Cursor), not for embedding in test code.

Install

Section titled “Install”
Terminal window
npm install -g @ingcreators/annot-mcp


# Chromium runtime for `_url` tools — one-time, ~150 MB.
npx playwright install chromium

Wire into Claude Desktop

Section titled “Wire into Claude Desktop”
// ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "annot": {
      "command": "npx",
      "args": ["@ingcreators/annot-mcp"]
    }
  }
}

Restart Claude Desktop. The annot_* tools become available.

What ships

Section titled “What ships”
Tool Use case
annot_annotate_screenshot Overlay annotations on a captured PNG
annot_annotate_url Capture + annotate via Playwright locator strings
annot_redact_screenshot Destructively burn redactions on a PNG
annot_redact_url Live-capture + redact via locator strings
annot_compare_screenshots Pixel-perfect visual diff
annot_aria_snapshot Capture Playwright AI-mode aria snapshot of a URL
annot_draft_screen_spec Living product docs: draft an MDX screen spec from an aria snapshot
annot_propose_drift_fixes Living product docs: propose patches for detected drift
annot_translate_screen_spec Living product docs: translate a screen spec across locales

Next steps

Section titled “Next steps”