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.

Quick Add

Claude Code

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

Claude Desktop

Add to your claude_desktop_config.json:

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

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