Blip MCP Server: Draw UI Changes for Claude Code Instead of Describing Them
What Blip Solves
The developer built Blip to address a specific communication problem when working with AI coding assistants: the back-and-forth of describing UI changes verbally. Examples from the source include: "Move the button 20px left," "No, the other button," and "The padding between the second and third section." This process often wastes more time than implementing the actual fix.
How It Works
Blip opens your running application with drawing tools overlaid on top. You can:
- Circle a button
- Draw an arrow
- Write text like "add more padding here"
After annotating the screenshot, you hit send. Claude Code receives the annotated image and writes the corresponding code to implement the changes you indicated.
Technical Details
Blip is an MCP (Model Context Protocol) server built specifically for Claude Code. The entire project was built using Claude Code over a weekend. It's free, open source under the MIT license, and runs entirely locally with no data collection.
Installation
To install:
claude mcp add blip -- npx blip-mcpProject Links
- Landing page: https://blip-chi.vercel.app
- GitHub repository: https://github.com/nebenzu/Blip
- Example screenshot: https://preview.redd.it/lo07xfhfr7qg1.png?width=2878&format=png&auto=webp&s=c8bad2090f27ec4701375aaf671a49369ce416
The developer notes this is their first open source project and they're happy to receive feedback.
📖 Read the full source: r/ClaudeAI
👀 See Also
js-notepad: A Scriptable Notepad with Built-in MCP Server for Claude Code
js-notepad is a free, open-source scriptable notepad application built with Claude Code assistance. It features a built-in MCP server, allowing Claude Code to directly interact with the app for reading/writing pages, executing scripts, creating todos, and pushing results.
Deploy Claude Design Artifacts to Live Websites with Teenyapp
Teenyapp provides a hosting service that Claude Design can use directly from chat via an agent token link, enabling autonomous deployment of artifacts with backend support.
angular-grab: Tool for Extracting Angular Component Context for AI Agents
angular-grab is a dev-only tool that lets you point at any UI element in an Angular dev server, press Cmd+C, and copy the full component stack trace with file paths and HTML to your clipboard for pasting into AI agents.
certctl: Self-hosted certificate lifecycle platform with 78 API endpoints for AI agent automation
certctl is a self-hosted certificate lifecycle platform built with Go and TypeScript that exposes 78 REST API endpoints for certificate management. The platform is issuer-agnostic and target-agnostic, with an MCP server planned to expose all functionality as native MCP tools.