MCP 服务器

claude-monet-mcp

A lightweight sketch canvas that lets users draw ideas and sync them in real-time to AI via MCP, enabling visual communication without exports.

README

Let your ideas flow in strokes, not keystrokes.

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

<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

Start the server - Run pnpm start or use npx claude-monet-mcp
Open the canvas - Navigate to http://localhost:51423 in your browser
Draw your idea - Use Excalidraw tools to sketch rectangles, circles, arrows, text, or freehand
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?

Text-based - Claude reads SVG paths directly, no vision model needed
Smaller - No base64 encoding overhead
Accurate - Exact coordinates, no compression artifacts
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".