Stop describing UI changes. Start drawing them.
Visual annotation MCP server for Claude Code.
Blip adds a drawing overlay to any web page you're working on. Circle what needs changing, add arrows, highlight sections, write text labels -- then send the annotated screenshot straight back to Claude. Claude sees exactly what you mean and updates the code.
claude mcp add blip -- npx blip-mcpThat's it. Requires Claude Code and Node.js 18+.
Just tell Claude "blip" during any conversation:
You: blip
⏺ blip - annotate (MCP)
Opening browser with overlay on http://localhost:3000...
Waiting for annotation...
⏺ [Annotated screenshot received]
The user has annotated a screenshot with visual feedback.
- RED circles/rectangles = elements that need changes
- ARROWS = point to specific areas or show movement
- TEXT labels = direct instructions
Claude: I can see your annotations. Let me make those changes:
1. Moving the search bar to the header (circled area)
2. Swapping the two cards (arrow indication)
3. Making the sidebar collapsible (highlighted region)
You can also pass a URL directly: "blip http://localhost:3000"
- Pen -- freehand drawing
- Arrow -- point to elements or show direction
- Circle -- highlight specific elements
- Rectangle -- mark regions
- Highlight -- semi-transparent marker
- Text -- add labels and instructions
- Blip runs as an MCP server alongside Claude Code
- When invoked, it opens your page in a browser with a drawing overlay injected
- You draw annotations directly on the live page
- Click "Send to Claude" -- the screenshot (page + annotations) returns to your chat
- Claude interprets the visual feedback and implements the changes
git clone https://github.com/nebenzu/Blip.git
cd Blip && npm install && npm run buildnpm run dev # Watch mode
npm run serve # Dev server on port 4460
npm start # Run MCP server directlyMIT