tomreinert/claude-annotate

Claude Annotate is a plugin for Claude Code, Anthropic's command line coding assistant, that lets you draw directly on a running web page and send that visual feedback straight into your conversation with Claude. Instead of writing out a description of a bug or a design tweak in words, you can point at the exact spot on the screen and mark it up. The plugin works by opening your local web app inside a Playwright controlled browser, Playwright being a tool for automating and testing websites. Once that browser window is open, an annotation toolbar appears on top of your app. You draw shapes, arrows, or notes over whatever you want changed, then press Send. Claude receives a screenshot of your app with your annotations included and uses that as context to make the code changes you asked for. You can keep drawing and sending as many rounds of feedback as you like, and simply say stop reviewing when you are finished. To use it, you first need the Playwright MCP tool connected to Claude Code, since that is what lets Claude control a real browser. After that, you install the Claude Annotate plugin itself from its marketplace listing, and launch Claude Code with a special flag that turns on an experimental plugin channel. From there, typing the command slash annotate starts the whole flow. Everything runs locally on your own machine, nothing is sent to an outside cloud service beyond your normal conversation with Claude. The author describes it as a work in progress that they are still actively testing, and notes it has mainly been tried against a local app running on port 3000, so results in other setups may vary. They are actively looking for feedback and bug reports from anyone who tries it. This tool has 24 stars and is aimed at developers already using Claude Code who want a faster, more visual way to give feedback on frontend changes instead of typing detailed descriptions.