claude-annotate
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.
Install with your AI
Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.
Install and set up claude-annotate (claude-plugin project) into my current project. Found on https://claudeers.com/claude-annotate Repo: https://github.com/tomreinert/claude-annotate Homepage/docs: — Detected install method: claude-plugin → /plugin install claude-annotate@tomreinert/claude-annotate Category: plugins. Platforms: cli, web. Read the repo's README for exact setup and env vars, then install it and wire it into my project. Claudeers Health Verdict: slowing; community-verified: false. Confirm the source before running anything.
/plugin marketplace add tomreinert/claude-annotate /plugin install claude-annotate@tomreinert/claude-annotate
git clone https://github.com/tomreinert/claude-annotate
// compatibility
| Platforms | cli, web |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | — |
| Pricing | open-source |
| Language | JavaScript |
Claude Annotate
Draw your feedback onto your frontend and send it straight to Claude.
🧪 Work in progress, I'm still testing this as I build. Feedback welcome!
Install
You need the Playwright MCP connected:
claude mcp add playwright npx @playwright/mcp@latest
Then install the plugin:
claude plugin marketplace add tomreinert/claude-annotate
claude plugin install annotate@claude-annotate --scope user
Use
Launch Claude Code with the channel turned on:
claude --dangerously-load-development-channels plugin:annotate@claude-annotate
- Type
/annotate. Claude launches a Playwright browser with the annotation toolbar. - Draw your feedback and hit Send. Claude makes the changes.
- Profit!
Keep drawing and sending as often as you like. Say "stop reviewing" when you are done.
See the full guide for the toolbar shortcuts and FAQ (including why the
--dangerously-load-development-channels flag is safe and how to skip it).
Notes
This works quite well in my local setup with an app running on localhost:3000. Many moving parts though, so I'm curious how it works in different enviroments.
Looking forward to feedback and issues!
// faq
What is claude-annotate?
Claude Code plugin: draw on a live frontend in the Playwright browser, annotated screenshot flows back into the session. Local, no cloud.. It is open-source on GitHub.
Is claude-annotate free to use?
claude-annotate is open-source, so it is free to use.
What category does claude-annotate belong to?
claude-annotate is listed under plugins in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/claude-annotate)
// retro hit counter
[](https://claudeers.com/claude-annotate)
// reviews
// guestbook
// related in Claude Plugins
🔓A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
🔓Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explainin…
🔓"CLI-Anything: Making ALL Software Agent-Native" -- CLI-Hub: https://clianything.cc/
🔓financial-services — a Claude ecosystem project on GitHub.