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

npm install -g @ingcreators/annot-mcp

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

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

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

• AI agents overview — composition with @playwright/mcp, agent transcripts, friendly errors.
• Tools reference — full input schema per tool.
• Recipe: agent bug-report autopilot
• Annotation DSL — the typed shape the tools accept.