Canvelete MCP Server

Canvelete MCP服务器

](https://lobehub.com/mcp/canvelete-mcp-server)

模型上下文协议（MCP）服务器 坎韦莱特 设计平台。此服务器将Canvelete的设计功能暴露给AI助手和其他MCP兼容客户端，从而实现程序化设计创建和操作。

🔗 链接：

• Canvelete平台 -在线创建设计
• 文档 -完整的API和平台文档
• 获取API密钥 -生成API密钥

📚 MCP服务器文档：

• 元素类型指南 -所有13种元素类型（包括二维码和条形码）、其功能和样式限制的完整指南
• 资产搜索指南 -如何搜索和使用外部资产（Pixabay、Unsplash、Iconify、剪贴画、插图）
• 例子 -实例和用例
• MCP设置指南 -配置和使用说明

快速开始

# Install globally
npm install -g @canveletedotcom/mcp-server

# Or use with npx (no installation needed)
npx -y @canveletedotcom/mcp-server start

然后配置您的MCP客户端（Claude Desktop、Kiro等）：

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

特性

资源（只读数据访问）

• 设计：访问用户设计，浏览模板
• 画布：查看画布状态和元素
• 资产：浏览用户的资源库和可用字体
• 用户：访问配置文件和首选项
• 元数据：完整的元素功能、样式限制和设计系统文档

工具（动作）

• 设计管理：创建、更新、删除、复制和导出设计
• 画布操作：添加、更新、删除元素；调整画布大小；透明帆布

- 13种元素类型：矩形、圆形、文本、图像、svg、直线、多边形、星形、qr、条形码、表格、容器、bezier - QR码：为URL、vCard、WiFi等生成二维码 - 条形码：支持CODE128、EAN13、UPC和其他7种格式

• 模板：列出、应用和创建模板
• 资产：跨多个来源的全面资产搜索

- Pixabay：270多万张免费库存照片和插图 - Unsplash：3M+高品质精选照片 - 图标化：150多个图标集中的200K多个图标 - 剪贴画：10K+精选剪贴画图形 - 插图：5K+艺术插图

• 字体：30多种专业字体，带有元数据和配对建议
• 形状：来自8个类别的70多个SVG形状（基本、箭头、星星、标注、自然、符号、几何、额外）
• 人工智能集成：访问Civi AI进行设计生成

可用提示

提示为常见设计任务提供了指导模板：

• create_social_post -创建社交媒体帖子（Instagram、Facebook、Twitter等）
• create_presentation_slide -创建带有标题和内容的演示幻灯片
• add_text_element -在设计中添加样式化文本元素

提示帮助AI助手自动创建具有适当结构和样式的设计。

安装

方法1：全局安装（推荐）

全局安装软件包以使用 canvelete-mcp 命令：

npm install -g @canveletedotcom/mcp-server

方法2:NPX（无需安装）

使用npx运行而不安装：

npx -y @canveletedotcom/mcp-server start

方法3：地方发展

对于开发或自定义构建：

git clone https://github.com/canvelete/canvelete.git
cd canvelete/mcp-server
npm install
npm run build

然后在MCP配置中使用本地构建路径。

配置

环境变量

创建 .env mcp服务器目录中的文件：

# Required: Canvelete API Key
CANVELETE_API_KEY =your_api_key_here

# Optional: Canvelete API URL (defaults to https://www.canvelete.com)
CANVELETE_API_URL=https://www.canvelete.com

# Optional: For AI generation features (if using Civi AI directly)
GEMINI_API_KEY=your_gemini_api_key

认证

您需要Canvelete API密钥才能使用MCP服务器：

1. 登录到您的 Canvelete账户
2. 首选 设置→ API密钥
3. 生成新的API密钥
4. 安全地保存密钥

有关API的详细文档，请参阅 docs.canvelete.com.

您可以通过两种方式提供API密钥：

选项1：环境变量 （建议用于Claude Desktop）

CANVELETE_API_KEY=your_api_key_here

选项2：工具参数 （用于程序化使用）

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

配置

克劳德桌面版

1. 查找您的Claude Desktop配置文件：

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

1. 添加Canvelete服务器配置：

选项A：使用全局安装

{
  "mcpServers": {
    "canvelete-mcp-server": {
      "command": "canvelete-mcp",
      "args": ["start"],
      "env": {
        "CANVELETE_API_KEY": "your_api_key_here",
        "CANVELETE_API_URL": "https://www.canvelete.com"
      }
    }
  }
}

选项B：使用NPX（无需安装）

{
  "mcpServers": {
    "canvelete-mcp-server": {
      "command": "npx",
      "args": ["-y", "@canveletedotcom/mcp-server", "start"],
      "env": {
        "CANVELETE_API_KEY": "your_api_key_here",
        "CANVELETE_API_URL": "https://www.canvelete.com"
      }
    }
  }
}

选项C：使用本地构建

{
  "mcpServers": {
    "canvelete-mcp-server": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-server/dist/index.cjs", "start"],
      "env": {
        "CANVELETE_API_KEY": "your_api_key_here",
        "CANVELETE_API_URL": "https://www.canvelete.com"
      }
    }
  }
}

1. 重新启动克劳德桌面

基罗

1. 查找您的Kiro配置文件： ~/.kiro/settings/mcp.json

1. 添加与上述相同的配置

1. 重新启动Kiro

其他MCP客户端

任何兼容MCP的客户端都可以使用此服务器。将其配置为运行：

• 命令： canvelete-mcp （如果全局安装）或 npx -y @canveletedotcom/mcp-server
• Args： ["start"]
• 环境：设置 CANVELETE_API_KEY 并且可选 CANVELETE_API_URL

使用示例

对话示例

配置后，您可以询问您的AI助手：

• “我在Canvelete有什么设计？”
• “创建一个名为“夏季促销”的1080x1080 Instagram新帖子设计”
• “在设计{id}中添加一个文本元素，表示‘Hello World’”
• “将设计｛id｝导出为PNG”
• “列出我上传的所有资产”
• “将模板｛template id｝应用于设计｛design id｝”
• “创建标题为“欢迎”、副标题为“简介”的演示幻灯片”
• “搜索山脉的库存图像”

快速示例：创建社交媒体帖子

// 1. Create a design
create_design({
  name: "Summer Sale 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: "SUMMER SALE",
    x: 100, y: 400,
    width: 880, height: 150,
    fontSize: 96,
    fontFamily: "Poppins",
    fill: "#FFFFFF",
    fontWeight: "bold"
  }
})

// 4. Export
export_design({
  designId: "{design-id}",
  format: "png",
  quality: 100
})

看 示例.md 查看更详细的示例。有关API完整文档，请访问 docs.canvelete.com.

可用资源

资源提供对Canvelete数据的只读访问：

可用工具

设计管理工具

• list_designs -列出所有用户的设计，并进行分页和搜索
• get_design -获取包括画布数据在内的详细设计信息
• create_design -使用自定义尺寸创建新设计
• update_design -更新设计属性（名称、描述、可见性）
• delete_design -永久删除设计
• duplicate_design -分叉/复制现有设计
• export_design -将设计导出为PNG、JPG、PDF或SVG格式

画布操作工具

• add_element -添加任何元素类型（形状、文本、图像、SVG等）
• update_element -修改元素属性（位置、样式、内容）
• delete_element -从画布中删除元素
• resize_canvas -更改画布尺寸
• clear_canvas -从画布中删除所有元素

模板工具

• list_templates -浏览可用的设计模板
• apply_template -将模板应用于现有设计
• create_template -将设计另存为可重用模板

资产管理工具

• list_assets -查看用户的资产库（图像、字体等）
• search_stock_images -在Pixabay中搜索库存图片
• search_icons -搜索图标资源
• search_clipart -搜索剪贴画图像
• search_illustrations -搜索插图资源
• list_fonts -按类别列出可用字体
• upload_asset -将新资产上传到库

AI工具

• generate_design -使用AI生成设计
• chat_with_civi -与Civi AI互动以获得设计协助

元素类型

支持的画布元素类型：

• 矩形 -矩形形状
• 圆圈 -圆形/椭圆形
• 文本 -带字体的文本元素
• 图像 -来自URL或资源的图像
• 线 -直线
• 多边形 -多面形状
• 星 -星形
• 可缩放矢量图形 -SVG图形
• 贝塞尔 -弯道
• 容器 -组元素
• 桌子 -数据表

发展

构建

npm run build

在开发中运行

npm run dev

类型检查

npm run type-check

清洁建筑

npm run clean
npm run build

MCP协议合规性

此服务器遵循 MCP协议规范（2025-11-25）.

合规文件：

• MCP_合作.md -实施最佳实践和协议合规性
• 规格_合作.md -详细符合官方MCP规范（2025-11-25）

主要合规特征：

• ✅ 所有日志记录都使用stderr（从不使用stdout）来避免损坏JSON-RPC消息
• ✅ 正确的错误处理和格式化
• ✅ 完整的工具、资源和提示定义
• ✅ 标准MCP服务器结构和初始化

测试合规性：

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

故障排除

“API密钥无效”

• 在Canvelete设置中生成新的API密钥→ API密钥
• 验证MCP配置中的密钥设置是否正确
• 检查密钥未过期或被吊销
• 运行测试脚本以验证： npx tsx test-auth.ts your_api_key

“权限被拒绝”

• 确保API密钥具有适当的作用域
• 验证您拥有正在修改的资源

“无法连接到API”

• 检查 CANVELETE_API_URL 正确（默认值：https://www.canvelete.com)
• 验证Canvelete API的网络连接
• 对于本地开发，确保Canvelete应用程序正在运行

Claude Desktop不显示资源

• 重新启动克劳德桌面
• 检查配置文件语法
• 验证服务器路径是否为绝对路径
• 检查stderr日志中的错误

实时同步

MCP服务器支持通过WebSocket与设计编辑器进行实时同步。当您通过MCP工具进行更改时，编辑器将立即更新以反映这些更改。

设置

1. 启动WebSocket服务器（在Canvelete主目录中）：

pnpm ws

1. 默认情况下，WebSocket服务器在端口3001上运行。你可以用 WS_PORT 环境变量。

1. 打开设计编辑器-您将在右上角看到一个同步指示器，显示连接状态。

运作原理

• 当MCP工具修改设计（添加/更新/删除元素、调整画布大小等）时，更改将通过WebSocket广播
• 订阅该设计的所有连接编辑器客户端都会收到即时更新
• 编辑器在连接时显示“实时”指示器，并显示接收到的更新计数

环境变量

# WebSocket server port (default: 3001)
WS_PORT=3001

# WebSocket server URL for MCP server to connect to
WS_SERVER_URL=ws://localhost:3001/ws

安全与隐私

API密钥安全

• 永远不要提交API密钥 进行版本控制或公开共享
• 使用环境变量 或安全配置文件
• 定期旋转按键 如果受到损害或暴露
• 使用单独的密钥 用于开发和生产

数据隐私

• MCP服务器通过API密钥访问您的Canvelete帐户数据
• 所有API通信都使用HTTPS加密
• API密钥具有基于您的帐户设置的范围权限
• 在Canvelete设置中查看您的API密钥权限→ API密钥

速率限制

• API密钥可能有基于您的订阅计划的费率限制
• 服务器遵守速率限制，并将返回适当的错误
• 查看您的订阅计划以了解费率限制详细信息

最佳实践

• 仅使用您自己帐户中的受信任的API密钥
• 不要与不受信任的方共享API密钥
• 在Canvelete仪表板中监控您的API使用情况
• 向报告安全问题security@canvelete.com（不公开问题）

部署模式

Canvelete MCP服务器同时支持这两种功能 本地 和 云 部署。看 部署.md 了解详细的部署说明。

本地部署（默认）

服务器使用stdio传输在您的机器上本地运行，这是Claude Desktop、Kiro和Cursor等MCP客户端的标准。

优势：

• ✅ 完全控制您的环境
• ✅ 无网络延迟
• ✅ 数据保留在您的机器上
• ✅ 简单的设置和配置
• ✅ 脱机工作（缓存API密钥后）

使用案例：

• 个人发展
• 测试和调试
• 隐私敏感工作流
• 桌面应用程序（克劳德桌面、光标等）

云部署

服务器可以使用容器化或无服务器功能部署到云平台。stdio传输在云环境中无缝工作。

优势：

• ✅ 可扩展且始终可用
• ✅ 无本地资源使用
• ✅ 可从多个设备访问
• ✅ 托管基础设施
• ✅ 易于更新和维护

支持的平台：

• Docker/容器：部署到任何容器平台（Docker、Kubernetes等）
• 谷歌云运行：无服务器容器平台
• Azure功能：带有自定义处理程序的无服务器
• AWS Lambda：无服务器功能（带stdio适配器）
• Vercel/Netlify：无服务器平台
• 任何Node.js主机：铁路、渲染、Fly.io等。

快速云示例：

# 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

看 部署.md 有关以下内容的完整部署指南：

• Docker/容器（包括Dockerfile）
• 谷歌云运行
• Azure功能
• AWS Lambda
• 铁路，渲染，Fly.io
• Vercel/Netlify

需求

• Node.js: >= 18.0.0
• Canvelete账户：注册地址： canvelete.com
• Canvelete API密钥：从以下位置获取一个 Canvelete设置→ API密钥
• 文档：参见 docs.canvelete.com 供API参考

贡献

欢迎投稿！请看 贡献.md 作为指导方针。

快速步骤：

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add some amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

有关详细的贡献指南、代码标准和开发设置，请参阅 贡献.md.

更新日志

看 更改日志.md 查看更改和版本历史的详细列表。

许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

支持

对于问题和疑问：

• GitHub问题: canvelete/canvelete/问题
• 平台文档: docs.canvelete.com
• Canvelete平台: canvelete.com
• API 文档: docs.canvelete.com/api
• 获取帮助：参观 canvelete.com/support 或 docs.canvelete.com/help

部署架构

运作原理

MCP服务器使用 stdio传输 默认情况下，它在本地和云环境中都有效：

1. 本地模式：MCP客户端（Claude Desktop等）生成服务器进程并通过stdin/stdout进行通信
2. 云模式：云平台在容器/函数中运行服务器，并通过其基础设施处理stdio通信

数据流

┌─────────────┐         ┌──────────────┐         ┌─────────────┐
│ MCP Client  │ ◄──────► │ MCP Server   │ ◄──────► │ Canvelete   │
│ (Claude)    │  stdio  │ (This Server)│  HTTPS  │    API      │
└─────────────┘         └──────────────┘         └─────────────┘

• MCP协议：基于stdio（本地）或HTTP/SSE（云）的JSON-RPC
• Canvelete API公司：始终使用HTTPS https://canvelete.com

选择部署模式

在以下情况下使用本地部署：

• 您正在使用Claude Desktop、Cursor或其他桌面MCP客户端
• 你想要最大的隐私和控制
• 您正在开发或测试
• 您只有一个用户/机器

在以下情况下使用云部署：

• 您需要全天候的可用性
• 您想在多个设备之间共享访问权限
• 您需要为多个用户提供可扩展性
• 您更喜欢托管基础架构

相关链接

Canvelete资源

• Canvelete平台 -在线创建和编辑设计
• 文档 -完整的平台和API文档
• API 参考 -API详细文件
• 入门指南 -平台入门指南

MCP资源

• MCP服务器目录
• 模型上下文协议文档
• MCP云部署指南