claude-monet-mcp

<p align="center"> <img src="src/public/claude-monet-mcp-bg.webp" alt="Claude Monet MCP" width="400"> </p>

<p align="center"> <em>Let your ideas flow in strokes, not keystrokes.</em> </p>

<p align="center"> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"></a> <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node.js-18+-green.svg" alt="Node.js"></a> <a href="https://modelcontextprotocol.io/"><img src="https://img.shields.io/badge/MCP-Compatible-purple.svg" alt="MCP Compatible"></a> </p>

---

What is this?

• 🎨 Visual thinking, amplified - Some ideas are easier to draw than describe. Sketch freely and let AI see what you mean.
• ✨ Beautifully simple - A lightweight canvas that does one thing well: bridge your imagination to AI understanding.
• 🔄 Instant connection - Your strokes flow to AI in real-time via MCP. No exports, no uploads—just draw.

<p align="center"> <img src="src/public/demo.gif" alt="Claude Monet MCP Demo" width="800"> </p>

---

Quick Add

<img src="https://cdn.simpleicons.org/anthropic/D97757" height="20" align="center"> Claude Code

claude mcp add claude-monet -- npx -y claude-monet-mcp

<img src="https://cdn.simpleicons.org/anthropic/D97757" height="20" align="center"> Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "claude-monet": {
      "command": "npx",
      "args": ["-y", "claude-monet-mcp"]
    }
  }
}

<img src="https://cdn.simpleicons.org/cursor/000000" height="20" align="center"> Cursor

Add to your Cursor MCP settings (Cursor Settings → Features → Model Context Protocol):

{
  "mcpServers": {
    "claude-monet": {
      "command": "npx",
      "args": ["-y", "claude-monet-mcp"]
    }
  }
}

[!TIP] After adding the server, restart Claude Desktop/Code/Cursor to load the MCP tools.

---

Manual Installation

If you prefer to run from source:

Prerequisites

• Node.js 18+
• pnpm (or npm)

Install and Build

# Clone the repository
git clone https://github.com/yahavfuchs/claude-monet-mcp.git
cd claude-monet-mcp

# Install dependencies
pnpm install

# Build the React app
pnpm run build

[!IMPORTANT] Run pnpm run build before starting the server for the first time.

Start the Server

pnpm start

The web interface will be available at http://localhost:51423

Configure MCP

Add to your MCP settings:

{
  "mcpServers": {
    "claude-monet": {
      "command": "node",
      "args": ["/path/to/claude-monet-mcp/server.js"]
    }
  }
}

---

Usage

1. Start the server - Run pnpm start or use npx claude-monet-mcp
2. Open the canvas - Navigate to http://localhost:51423 in your browser
3. Draw your idea - Use Excalidraw tools to sketch rectangles, circles, arrows, text, or freehand
4. Ask Claude - "Can you see my sketch? What do you think?"

[!TIP] Keep the browser tab open while chatting with Claude. Your drawings sync in real-time.

Perfect for:

• Explaining UI layouts visually
• Sketching architecture diagrams
• Wireframing ideas quickly
• Visual communication with Claude

---

MCP Tools

Tool	Description
get_sketch	Returns the current sketch as SVG text
clear_sketch	Clears the canvas to start fresh

Example:

Claude receives SVG like:
<svg>
  <rect x="100" y="50" width="200" height="100"/>
  <text x="150" y="100">Header</text>
</svg>

Claude understands: "A rectangle labeled 'Header' - this is a header component"

---

Why SVG instead of images?

1. Text-based - Claude reads SVG paths directly, no vision model needed
2. Smaller - No base64 encoding overhead
3. Accurate - Exact coordinates, no compression artifacts
4. Simpler - Just strings, no blob conversion

---

Development

# Development mode (Vite dev server)
pnpm run dev

# Build for production
pnpm run build

# Start MCP server
pnpm start

# Build and start together
pnpm run dev:full

---

Project Structure

claude-monet-mcp/
├── server.js           # MCP server + Express (~104 lines)
├── src/
│   ├── App.jsx         # Excalidraw React app (~80 lines)
│   ├── App.css         # Styling (~28 lines)
│   ├── main.jsx        # React entry point
│   ├── index.html      # HTML template
│   └── public/         # Logo assets
├── dist/               # Built output (from Vite)
├── vite.config.js      # Build configuration
└── package.json

---

Why build this?

Existing Excalidraw MCP servers are complex (~2000+ lines) and focused on "Claude creates diagrams". This tool is minimal and focused on "user sketches → Claude reads".

---

Acknowledgements

Built with excellent open-source technologies:

• Excalidraw - Beautiful hand-drawn canvas
• Model Context Protocol - Protocol for AI tool integration
• Express - Fast, minimalist web framework
• Vite - Next generation frontend tooling
• React - JavaScript library for building user interfaces

---

Contributing

Contributions welcome! This project is intentionally simple to encourage contributions.

---

License

MIT