MCP Server

MCP Server

The Canvelete (opens in a new tab) MCP (Model Context Protocol) server enables AI assistants like Claude, Kiro, and other MCP-compatible clients to create and manipulate designs programmatically.

Installation

Global Installation

npm install -g @canveletedotcom/mcp-server

NPX (No Installation)

npx -y @canveletedotcom/mcp-server start

Configuration

Claude Desktop

Add to your Claude Desktop config file:

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

{
  "mcpServers": {
    "canvelete-mcp-server": {
      "command": "canvelete-mcp",
      "args": ["start"],
      "env": {
        "CANVELETE_API_KEY": "your_api_key_here"
      }
    }
  }
}

Kiro

Add to ~/.kiro/settings/mcp.json:

{
  "mcpServers": {
    "canvelete-mcp-server": {
      "command": "canvelete-mcp",
      "args": ["start"],
      "env": {
        "CANVELETE_API_KEY": "your_api_key_here"
      }
    }
  }
}

Authentication

Get your API key from canvelete.com/settings/api-keys (opens in a new tab).

Available Tools

Design Management

ToolDescription
list_designsList all designs with pagination
get_designGet design details
create_designCreate a new design
update_designUpdate design properties
delete_designDelete a design
duplicate_designCopy an existing design
export_designExport to PNG, JPG, PDF, SVG

Canvas Manipulation

ToolDescription
add_elementAdd element (shape, text, image, QR, barcode)
update_elementModify element properties
delete_elementRemove element from canvas
resize_canvasChange canvas dimensions
clear_canvasRemove all elements

Element Types

The MCP server supports 13 element types:

  • Shapes: rectangle, circle, polygon, star, line
  • Content: text, image, svg
  • Data: qr, barcode, table
  • Layout: container, bezier

Templates

ToolDescription
list_templatesBrowse available templates
apply_templateApply template to design
create_templateSave design as template

Assets

ToolDescription
list_assetsView asset library
search_stock_imagesSearch Pixabay (2.7M+ images)
search_iconsSearch Iconify (200K+ icons)
search_clipartSearch clipart graphics
list_fontsList available fonts

AI Integration

ToolDescription
generate_designGenerate design with AI
chat_with_civiInteract with Civi AI

Example Conversations

Once configured, ask your AI assistant:

  • "Create a 1080x1080 Instagram post design"
  • "Add a text element that says 'Hello World'"
  • "Export design_123 as PNG"
  • "Search for stock images of mountains"
  • "List all my designs"

Quick Example

// 1. Create design
create_design({
  name: "Social Post",
  width: 1080,
  height: 1080
})
 
// 2. Add background
add_element({
  designId: "design_id",
  element: {
    type: "rectangle",
    x: 0, y: 0,
    width: 1080, height: 1080,
    fill: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  }
})
 
// 3. Add text
add_element({
  designId: "design_id",
  element: {
    type: "text",
    text: "HELLO WORLD",
    x: 100, y: 400,
    width: 880, height: 150,
    fontSize: 72,
    fontFamily: "Poppins",
    fill: "#FFFFFF",
    fontWeight: "bold"
  }
})
 
// 4. Export
export_design({
  designId: "design_id",
  format: "png"
})

Available Resources

Resources provide read-only access to Canvelete data:

URIDescription
canvelete://api/designs/listList user designs
canvelete://api/design/{id}Get design details
canvelete://api/canvas/{id}Get canvas state
canvelete://api/assets/libraryUser assets
canvelete://api/assets/fontsAvailable fonts
canvelete://api/user/profileUser profile

Prompts

Built-in prompts for common tasks:

  • create_social_post — Create social media posts
  • create_presentation_slide — Create presentation slides
  • add_text_element — Add styled text elements

Troubleshooting

"Invalid API key"

"Permission denied"

  • Ensure API key has appropriate scopes
  • Verify you own the resource

Claude Desktop doesn't show resources

  • Restart Claude Desktop
  • Check config file syntax
  • Verify server path is correct

Support

Custom IntegrationsPerformance Optimization