claude-monet-mcp

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.

Related MCP server: Overboard Studio

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"]
    }
  }
}

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

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?"

Perfect for:

• Explaining UI layouts visually

• Sketching architecture diagrams

• Wireframing ideas quickly

• Visual communication with Claude

MCP Tools

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