# Placeholder Image Generator MCP Server

A Model Context Protocol (MCP) server that generates customizable placeholder images using HTML5 Canvas.

## Features

- **Flexible Dimensions**: Generate images from 1x1 to 4096x4096 pixels
- **Custom Colors**: Support for hex, RGB, and named colors
- **Smart Text Rendering**: Automatic font sizing and line wrapping
- **Contrast Detection**: Automatically chooses contrasting text colors
- **Multiple Formats**: Outputs PNG and JPEG images
- **Error Validation**: Comprehensive input validation with helpful error messages

## Installation

```bash
npm install
npm run build
```

## Usage

This is an MCP server designed to be used with MCP-compatible clients like Claude for Desktop.

### Tool: generate-placeholder-image

Generate a placeholder image with the following parameters:

- `filename` (string): Output filename with extension (.png, .jpg, .jpeg)
- `width` (number): Image width in pixels (1-4096)
- `height` (number): Image height in pixels (1-4096)
- `color` (string): Background color (hex like #FF0000, rgb like rgb(255,0,0), or named colors like 'red')
- `text` (string): Text to display on the image

### Example

```typescript
{
  "filename": "placeholder.png",
  "width": 800,
  "height": 600,
  "color": "#3498db",
  "text": "Sample Placeholder"
}
```

## Configuration for Claude for Desktop

Add the following to your Claude for Desktop configuration:

### Windows
```json
{
  "mcpServers": {
    "placeholder-generator": {
      "command": "node",
      "args": ["D:\\path\\to\\generate-placeholder\\build\\index.js"]
    }
  }
}
```

### macOS/Linux
```json
{
  "mcpServers": {
    "placeholder-generator": {
      "command": "node",
      "args": ["/absolute/path/to/generate-placeholder/build/index.js"]
    }
  }
}
```

## Development

```bash
# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev
```

## Technical Details

- Built with TypeScript and the MCP SDK
- Uses the `canvas` library for server-side image generation
- Implements stdio transport for MCP communication
- Automatic text scaling based on image dimensions
- Multi-line text support with word wrapping

## Supported Color Formats

- **Hex**: `#FF0000`, `#f00`
- **RGB**: `rgb(255, 0, 0)`
- **RGBA**: `rgba(255, 0, 0, 0.5)`
- **Named**: `red`, `blue`, `green`, `yellow`, `orange`, `purple`, `pink`, `brown`, `black`, `white`, `gray`

## License

ISC