Canvelete

# Install globally npm install -g @canveletedotcom/mcp-server # Or use with npx (no installation needed) npx -y @canveletedotcom/mcp-server start

Then configure your MCP client (Claude Desktop, Kiro, etc.) with:

You can provide the API key in two ways:

Option 1: Environment Variable(recommended for Claude Desktop)

Option 2: Tool Arguments(for programmatic use)

{ "apiKey": "your_api_key_here", "name": "My Design" }

- macOS:~/Library/Application Support/Claude/claude_desktop_config.json
- Windows:%APPDATA%\Claude\claude_desktop_config.json
- Linux:~/.config/Claude/claude_desktop_config.json

Resources provide read-only access to Canvelete data:

- add_element- Add any element type (shape, text, image, SVG, etc.)
- update_element- Modify element properties (position, style, content)
- delete_element- Remove an element from canvas
- resize_canvas- Change canvas dimensions
- clear_canvas- Remove all elements from canvas

- list_templates- Browse available design templates
- apply_template- Apply a template to an existing design
- create_template- Save a design as a reusable template

- list_assets- View user's asset library (images, fonts, etc.)
- search_stock_images- Search Pixabay for stock images
- search_icons- Search for icon assets
- search_clipart- Search for clipart images
- search_illustrations- Search for illustration assets
- list_fonts- List available fonts by category
- upload_asset- Upload a new asset to the library

- generate_design- Generate designs using AI
- chat_with_civi- Interact with Civi AI for design assistance

- rectangle- Rectangular shapes
- circle- Circular/elliptical shapes
- text- Text elements with fonts
- image- Images from URLs or assets
- line- Straight lines
- polygon- Multi-sided shapes
- star- Star shapes
- svg- SVG graphics
- bezier- Curved paths
- container- Group elements
- table- Data tables

- ✅ All logging uses stderr (never stdout) to avoid corrupting JSON-RPC messages
- ✅ Proper error handling and formatting
- ✅ Complete tool, resource, and prompt definitions
- ✅ Standard MCP server structure and initialization

# Use MCP Inspector to verify compliance npx @modelcontextprotocol/inspector canvelete-mcp start

- Generate a new API key in Canvelete Settings → API Keys
- Verify the key is set correctly in your MCP config
- Check key hasn't expired or been revoked
- Run the test script to verify:npx tsx test-auth.ts your_api_key

- Ensure API key has appropriate scopes
- Verify you own the resource you're modifying

Claude Desktop doesn't show resources

- Restart Claude Desktop
- Check the config file syntax
- Verify the server path is absolute
- Check stderr logs for errors

The MCP server supports real-time synchronization with the design editor via WebSocket. When you make changes through MCP tools, the editor will instantly update to reflect those changes.
- Start the WebSocket server (in the main Canvelete directory):
-

The WebSocket server runs on port 3001 by default. You can change this with theWS_PORTenvironment variable.

Open the design editor - you'll see a sync indicator in the top-right corner showing connection status.

# WebSocket server port (default: 3001) WS_PORT=3001 # WebSocket server URL for MCP server to connect to WS_SERVER_URL=ws://localhost:3001/ws

- Never commit API keysto version control or share them publicly
- Use environment variablesor secure configuration files
- Rotate keys regularlyif compromised or exposed
- Use separate keysfor development and production

- The MCP server accesses your Canvelete account data through API keys
- All API communication uses HTTPS encryption
- API keys have scoped permissions based on your account settings
- Review your API key permissions in Canvelete Settings → API Keys

- API keys may have rate limits based on your subscription plan
- The server respects rate limits and will return appropriate errors
- Check your subscription plan for rate limit details

The server runs locally on your machine using stdio transport, which is the standard for MCP clients like Claude Desktop, Kiro, and Cursor.

- ✅ Full control over your environment
- ✅ No network latency
- ✅ Data stays on your machine
- ✅ Simple setup and configuration
- ✅ Works offline (once API key is cached)

- Personal development
- Testing and debugging
- Privacy-sensitive workflows
- Desktop applications (Claude Desktop, Cursor, etc.)

The server can be deployed to cloud platforms using containerization or serverless functions. The stdio transport works seamlessly in cloud environments.

- ✅ Scalable and always available
- ✅ No local resource usage
- ✅ Accessible from multiple devices
- ✅ Managed infrastructure
- ✅ Easy updates and maintenance

- Docker/Containers: Deploy to any container platform (Docker, Kubernetes, etc.)
- Google Cloud Run: Serverless container platform
- Azure Functions: Serverless with custom handlers
- AWS Lambda: Serverless functions (with stdio adapter)
- Vercel/Netlify: Serverless platforms
- Any Node.js hosting: Railway, Render, Fly.io, etc.

# Docker deployment (using published package) docker build -f Dockerfile.simple -t canvelete-mcp-server . docker run -e CANVELETE_API_KEY=your_key canvelete-mcp-server # Or use docker-compose docker-compose up -d

- Docker/Containers (Dockerfile included)
- Google Cloud Run
- Azure Functions
- AWS Lambda
- Railway, Render, Fly.io
- Vercel/Netlify