<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

```bash
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`:

```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`):

```json
{
  "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

```bash
# 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

```bash
pnpm start
```

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

### Configure MCP

Add to your MCP settings:

```json
{
  "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

```bash
# 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](https://github.com/excalidraw/excalidraw) - Beautiful hand-drawn canvas
- [Model Context Protocol](https://modelcontextprotocol.io/) - Protocol for AI tool integration
- [Express](https://expressjs.com/) - Fast, minimalist web framework
- [Vite](https://vitejs.dev/) - Next generation frontend tooling
- [React](https://react.dev/) - JavaScript library for building user interfaces

---

## Contributing

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

---

## License

MIT