SVGMaker MCP Server

SVGMaker MCP 服务

一个功能强大的 MCP 服务，可通过 SVGMaker API 生成、编辑和转换 SVG 图像。

🎨 MCP 服务实战演示

这幅插图正是通过我们自己的 SVGMaker MCP 服务创作而成，是 AI 助手与矢量图形通过 Model Context Protocol 完美协作的生动示例。

🌟 亮点

• 🎨 AI 驱动的 SVG 生成：根据文本描述创建 SVG
• ✏️ 智能 SVG 编辑：使用自然语言编辑现有 SVG
• 🖼️ 光栅模式：跳过矢量化，直接生成 PNG，而不是 SVG
• 🔄 图像转 SVG：将任意图像转换为可缩放的 SVG
• 🪄 背景移除：分离前景主体，并生成透明背景的干净 SVG
• 👁️ 内嵌图像预览：直接在聊天中预览生成结果和图库项目
• 🔒 安全的文件操作：内置路径验证和安全防护
• ⚡ 实时进度：操作期间实时更新
• 📝 类型安全：全面支持 TypeScript，并提供类型定义

📋 目录

• 要求
• 安装
• 快速开始
• LLM 集成
• 可用工具
• 配置
• 开发
• 贡献

💻 要求

• Node.js：最低版本 20.9.0

  node --version  # Should be >= v20.9.0
  

• npm：最低版本 7.0.0

  npm --version   # Should be >= 7.0.0
  

• 操作系统：
  • Linux（Ubuntu 20.04+、CentOS 8+）
  • macOS（10.15+）
  • Windows（10+）
• SVGMaker API 密钥（在此获取）

📦 包结构

@genwave/svgmaker-mcp/
├── build/             # Compiled JavaScript files
├── docs/              # Documentation
│   └── api/           # API documentation
├── src/               # Source TypeScript files
│   ├── tools/         # MCP tool implementations
│   ├── services/      # API integration
│   └── utils/         # Utility functions
└── types/             # TypeScript declarations

🚀 安装

# Using npm
npm install @genwave/svgmaker-mcp

# Using yarn
yarn add @genwave/svgmaker-mcp

基本设置

1. 创建 .env 文件：

SVGMAKER_API_KEY="your_api_key_here"

2. 启动服务：

npx svgmaker-mcp

🔌 LLM 集成

以下每个客户端都可以通过两种方式运行服务：

• stdio — 服务使用你的 API 密钥在本机运行。可使用本地文件路径，output_path 会将结果保存到磁盘。
• HTTPS — 服务在云端的 https://mcp.svgmaker.io/mcp 运行，你需要通过浏览器登录。云端服务无法访问你的磁盘，因此不提供 output_path，结果会以托管的 SVGMaker URL 返回。本地文件必须先通过 svgmaker_upload 上传。

每个部分中的示例提示词都提供了这两种形式。请根据你的设置选择相应形式。

🔌 Claude Desktop

1. 添加到 claude_desktop_config.json。

   stdio（API 密钥）：

   {
     "mcpServers": {
       "svgmaker": {
         "command": "npx",
         "args": ["@genwave/svgmaker-mcp"],
         "transport": "stdio",
         "env": {
           "SVGMAKER_API_KEY": "your_api_key_here"
         }
       }
     }
   }
   

   HTTPS（通过浏览器使用 OAuth 登录 — 无需 API 密钥）：

   Claude Desktop 通过界面而非配置文件连接远程服务：依次选择 Settings → Connectors → Add custom connector，然后输入 https://mcp.svgmaker.io/mcp 并完成浏览器登录。

2. Claude Desktop 中的使用示例：

   stdio（API 密钥）：

   Generate an SVG of a minimalist mountain landscape:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Minimalist mountain landscape with sun",
       "output_path": "./landscape.svg",
       "quality": "high",
       "aspectRatio": "landscape"
     }
   }
   </mcp>
   

   HTTPS（通过浏览器使用 OAuth 登录 — 无需 API 密钥）：

   Generate an SVG of a minimalist mountain landscape and give me the hosted URL:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Minimalist mountain landscape with sun",
       "quality": "high",
       "aspectRatio": "landscape"
     }
   }
   </mcp>
   

🔌 Claude Code

1. 使用 Claude Code CLI 添加服务。

   stdio（API 密钥）：

   claude mcp add svgmaker --env SVGMAKER_API_KEY=your_api_key_here -- npx -y @genwave/svgmaker-mcp
   

   HTTPS（通过浏览器使用 OAuth 登录 — 无需 API 密钥）：

   claude mcp add --transport http svgmaker https://mcp.svgmaker.io/mcp
   

   然后在 Claude Code 中运行 /mcp，选择 svgmaker，并完成浏览器登录。

2. Claude Code 中的使用示例：

   stdio（API 密钥）：

   Generate an SVG of a minimalist mountain landscape and save it to ./landscape.svg
   

   HTTPS（通过浏览器使用 OAuth 登录 — 无需 API 密钥）：

   Generate an SVG of a minimalist mountain landscape and give me the hosted URL of the result
   

🔌 Cursor

或手动配置：

1. 在 Cursor 设置中进行配置。

   stdio（API 密钥）：

   {
     "mcpServers": {
       "svgmaker": {
         "type": "local",
         "command": "npx",
         "args": ["@genwave/svgmaker-mcp"],
         "transport": "stdio",
         "env": {
           "SVGMAKER_API_KEY": "your_api_key_here"
         }
       }
     }
   }
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   {
     "mcpServers": {
       "svgmaker": {
         "url": "https://mcp.svgmaker.io/mcp"
       }
     }
   }
   

2. 在 Cursor 中的使用示例：

   stdio（API 密钥）：

   Use svgmaker to edit the logo.svg file and make it more modern:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_edit",
     "arguments": {
       "input": "./logo.svg",
       "prompt": "Make it more modern and minimalist",
       "output_path": "./modern_logo.svg",
       "quality": "high"
     }
   }
   </mcp>
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   Use svgmaker to modernize the logo, then give me the hosted URL:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_edit",
     "arguments": {
       "input": "https://example.com/logo.svg",
       "prompt": "Make it more modern and minimalist",
       "quality": "high"
     }
   }
   </mcp>
   

   对于仅存在于本机上的徽标，请先调用 svgmaker_upload，并将返回的 upl_… ID 作为 input 传入。

🔌 Visual Studio Code

或手动配置：

1. 在 settings.json 中进行配置。

   stdio（API 密钥）：

   {
     "servers": {
       "svgmaker": {
         "type": "stdio",
         "command": "npx",
         "args": ["-y", "@genwave/svgmaker-mcp"],
         "env": {
           "SVGMAKER_API_KEY": "<your_api_key>"
         }
       }
     }
   }
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   {
     "servers": {
       "svgmaker": {
         "type": "http",
         "url": "https://mcp.svgmaker.io/mcp"
       }
     }
   }
   

2. 在 VS Code 中的使用示例：

   stdio（API 密钥）：

   Generate a new icon for my app:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Modern app icon with abstract geometric shapes",
       "output_path": "./assets/icon.svg",
       "quality": "high",
       "aspectRatio": "square"
     }
   }
   </mcp>
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   Generate a new icon for my app and give me the hosted URL:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Modern app icon with abstract geometric shapes",
       "quality": "high",
       "aspectRatio": "square"
     }
   }
   </mcp>
   

🔌 WindSurf

1. 在 ~/.codeium/windsurf/mcp_config.json 中进行配置。

   stdio（API 密钥）：

   {
     "mcpServers": {
       "svgmaker": {
         "command": "npx",
         "args": ["-y", "@genwave/svgmaker-mcp"],
         "env": {
           "SVGMAKER_API_KEY": "<your_api_key>"
         }
       }
     }
   }
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   {
     "mcpServers": {
       "svgmaker": {
         "serverUrl": "https://mcp.svgmaker.io/mcp"
       }
     }
   }
   

2. 在 WindSurf 中的使用示例：

   stdio（API 密钥）：

   Convert the company logo to SVG:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_convert",
     "arguments": {
       "input": "./branding/logo.png",
       "output_path": "./branding/vector_logo.svg"
     }
   }
   </mcp>
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   Upload ./branding/logo.png with svgmaker_upload, then convert it to SVG:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_convert",
     "arguments": {
       "input": "upl_2f1c8a4e-6b3d-4c9a-8e7f-0a1b2c3d4e5f"
     }
   }
   </mcp>
   

🔌 Zed

1. 在设置中进行配置。

   stdio（API 密钥）：

   {
     "context_servers": {
       "svgmaker": {
         "command": {
           "path": "npx",
           "args": ["-y", "@genwave/svgmaker-mcp"],
           "env": {
             "SVGMAKER_API_KEY": "<your_api_key>"
           }
         },
         "settings": {}
       }
     }
   }
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   {
     "context_servers": {
       "svgmaker": {
         "url": "https://mcp.svgmaker.io/mcp"
       }
     }
   }
   

   也可以通过 UI 添加：Settings → AI → General → MCP Servers → Add Server → Add Remote MCP Server。

2. 在 Zed 中的使用示例：

   stdio（API 密钥）：

   Edit an existing SVG file:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_edit",
     "arguments": {
       "input": "./diagrams/flowchart.svg",
       "prompt": "Add rounded corners and smooth gradients",
       "output_path": "./diagrams/enhanced_flowchart.svg",
       "quality": "high"
     }
   }
   </mcp>
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   Edit one of my earlier generations and give me the hosted URL:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_edit",
     "arguments": {
       "input": "gen_abc123",
       "prompt": "Add rounded corners and smooth gradients",
       "quality": "high"
     }
   }
   </mcp>
   

🔌 Codex

1. 使用 Codex CLI 添加服务。

   stdio（API 密钥）：

   codex mcp add svgmaker --env SVGMAKER_API_KEY=your_api_key_here -- npx -y @genwave/svgmaker-mcp
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   codex mcp add svgmaker --url https://mcp.svgmaker.io/mcp
   

2. 在 Codex 中的使用示例：

   stdio（API 密钥）：

   Generate an SVG of a minimalist mountain landscape and save it to ./landscape.svg:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Minimalist mountain landscape with sun",
       "output_path": "./landscape.svg",
       "quality": "high",
       "aspectRatio": "landscape"
     }
   }
   </mcp>
   

   HTTPS（OAuth 浏览器登录 — 无需 API 密钥）：

   Generate an SVG of a minimalist mountain landscape and give me the hosted URL:
   <mcp>
   {
     "server": "svgmaker",
     "tool": "svgmaker_generate",
     "arguments": {
       "prompt": "Minimalist mountain landscape with sun",
       "quality": "high",
       "aspectRatio": "landscape"
     }
   }
   </mcp>
   

🛠️ 可用工具

除非某个代码块另有标注，下面的 JSON 示例展示的都是 stdio 调用格式。使用 HTTPS 时，请移除 output_path — 它不属于该场景下的架构 — 并使用结果中返回的托管 URL。

按传输方式处理图像输入和输出

svgmaker_edit、svgmaker_convert 和 svgmaker_remove_background 从单个 input 参数获取图像。input 可以包含什么，取决于服务的运行方式。

input 值	stdio（本地服务）	HTTPS（mcp.svgmaker.io）
/Users/me/panda.png、file:///Users/me/panda.png	✅ 从磁盘读取	❌ 服务位于云端，无法访问你的磁盘——请先调用 svgmaker_upload
https://example.com/logo.png	✅	✅
upl_2f1c8a4e…（来自 svgmaker_upload 的上传 ID）	✅	✅
gen_abc123（生成或图库 ID）	✅ 仅限 svgmaker_edit 和 svgmaker_remove_background	✅ 同上

svgmaker_convert 不接受生成 ID：API 会对你已有的 SVG 缩小后的预览图进行矢量化，因此结果会比原图差得多。Convert 接受文件路径、https:// URL 或上传 ID。

对于 URL，MCP 服务绝不会下载图像——它会将 URL 交给 SVGMaker API，由后者获取图像。生成 ID 会原样传递，并在服务端解析。

输出也遵循相同的区分：

	stdio	HTTPS
output_path	✅ 可用——文件会写入指定路径	完全不提供：工具架构中没有此参数，因为云端服务无法访问你的磁盘
不使用 output_path 时的结果	返回托管的 SVGMaker URL	返回托管的 SVGMaker URL

通过 HTTPS 时，服务绝不会公布它无法处理的参数。仍发送 output_path 的过时客户端会收到错误提示，指向托管 URL，因此不会损失额度。

svgmaker_preview 同样不通过 HTTPS 提供——它会读取本地磁盘。请改用 svgmaker_generations_preview 或 svgmaker_gallery_preview。

这三个工具仍都接受 input_path 作为 input 的别名；svgmaker_edit 和 svgmaker_remove_background 仍接受 generation_id，因此现有配置可以继续使用。请仅提供一个来源。新代码中优先使用 input——这些别名仅为兼容性而保留。

svgmaker_upload

仅支持 HTTPS 传输——stdio 下不会显示此工具，因为本地路径已可直接使用。

该工具会生成一个短期有效的上传 URL，以便通过云端服务使用本地文件。文件数据不会经过 MCP 服务；由你的 Agent 自行上传。

{
  "filename": "panda.png"
}

参数	类型	说明
filename	string	必填。包含扩展名的名称，例如 panda.png。此名称仅用于报告——存储对象名称由服务端生成，图像类型则根据文件字节检测。

响应会返回 upload_url 和 expires_in。请将文件作为 multipart 表单数据 POST 到该 URL：

curl -X POST -F "file=@/Users/me/panda.png" "<upload_url>"

你的 Agent 必须能够运行 shell 命令才能完成此步骤。 带终端的客户端——Claude Code、Cursor、VS Code、WindSurf、Zed、Codex——可以自行运行 curl。通过 HTTPS 连接的 Claude Desktop 没有 shell，因此无法完成上传；请改用 https:// 图像 URL 或生成 ID。

响应中包含上传 ID：

{ "success": true, "data": { "upload_id": "upl_2f1c8a4e-6b3d-4c9a-8e7f-0a1b2c3d4e5f" } }

将该 ID 作为 input 传给 svgmaker_edit、svgmaker_convert 或 svgmaker_remove_background。

上传 URL 会在 5 分钟后过期，且只能使用一次。超过 25 MB 的文件以及字节内容不属于受支持图像的文件都会被拒绝。上传不消耗额度，文件为私有，并会在 24 小时后清理。

svgmaker_generate

根据文本提示词生成 SVG 图像。支持样式参数，可精细控制输出效果。

stdio：

{
  "prompt": "A minimalist mountain landscape with sun",
  "output_path": "/path/to/landscape.svg",
  "quality": "medium",
  "style": "flat",
  "color_mode": "few_colors",
  "composition": "full_scene",
  "background": "transparent"
}

HTTPS — 不使用 output_path；结果为托管的 SVGMaker URL：

{
  "prompt": "A minimalist mountain landscape with sun",
  "quality": "medium",
  "style": "flat",
  "color_mode": "few_colors",
  "composition": "full_scene",
  "background": "transparent"
}

栅格模式 — 设置 raster: true 可跳过矢量化，生成 PNG 而非 SVG。使用 stdio 时，output_path 请使用 .png 扩展名；使用 HTTPS 时，PNG 会以托管 URL 的形式返回。不能与 storage 同时使用（栅格结果为临时文件）。

{
  "prompt": "A minimalist mountain landscape with sun",
  "output_path": "/path/to/landscape.png",
  "quality": "medium",
  "raster": true
}

参数	类型	描述
raster	boolean	为 true 时，返回栅格 PNG 而非 SVG（跳过矢量化）。使用 stdio 时，请使用 .png 输出路径。不能与 storage 同时使用。
storage	boolean	为 true 时，将生成的图像永久存储在云存储中。不能与 raster 同时使用。未设置 raster 时，默认为 true。

样式参数（生成和编辑）

以下参数均为可选参数，由 svgmaker_generate 和 svgmaker_edit 共用。仅指定用户明确要求的参数。

参数	值	默认值	描述
quality	low、medium、high	medium	细节程度与速度之间的取舍。high 会强制使用正方形纵横比。
aspectRatio	square、portrait、landscape	自动（取决于质量）	输出形状。quality 为 high 时会忽略此项（强制为正方形）。
background	auto、transparent、opaque	auto	背景样式。transparent 适用于叠加图。
style	flat、line_art、engraving、linocut、silhouette、isometric、cartoon、ghibli	—	艺术风格。
color_mode	full_color、monochrome、few_colors	full_color	配色方案。
image_complexity	icon、illustration、scene	—	构图的细节程度。
composition	centered_object、repeating_pattern、full_scene、objects_in_grid	—	布局方式。
text_style	only_title、embedded_text	—	设计中处理文本的方式。

svgmaker_edit

使用自然语言编辑现有 SVG 或图像。支持与生成相同的样式参数。input 接受本地文件路径、https:// URL、upl_ 上传 ID 或生成 ID（适用于你自己的生成内容和公共图库项目）——参见输入矩阵。

stdio：

{
  "input": "/path/to/input.svg",
  "prompt": "Add a gradient background and make it more vibrant",
  "output_path": "/path/to/enhanced.svg",
  "quality": "high",
  "style": "cartoon",
  "background": "opaque"
}

HTTPS — 源可以是生成 ID、https:// URL 或 upl_ 上传 ID，结果为托管 URL：

{
  "input": "gen_abc123",
  "prompt": "Add a gradient background and make it more vibrant",
  "quality": "high"
}

如果不想使用本地文件，此格式也适用于 stdio：

{
  "input": "gen_abc123",
  "prompt": "Make the background blue"
}

栅格模式 — 与生成操作一样，设置 raster: true 可生成 PNG 而非 SVG。使用 stdio 时，output_path 请使用 .png 扩展名。不能与 storage 同时使用。

{
  "input": "/path/to/input.svg",
  "prompt": "Make it more vibrant",
  "output_path": "/path/to/edited.png",
  "raster": true
}

参数	类型	描述
input	string	图像来源：本地文件路径（仅限 stdio）、https:// URL、upl_ 上传 ID 或生成 ID。必填。
input_path	string	input 的可接受别名，仅限本地文件路径。
generation_id	string	input 的可接受别名，仅限生成 ID 或图库 ID。
raster	boolean	为 true 时，返回栅格 PNG 而非 SVG（跳过矢量化）。使用 stdio 时，请使用 .png 输出路径。不能与 storage 同时使用。
storage	boolean	为 true 时，将编辑后的图像永久存储在云存储中。不能与 raster 同时使用。未设置 raster 时，默认为 true。

svgmaker_convert

使用 AI 矢量化将栅格图像转换为 SVG。input 接受本地文件路径、https:// URL 或 upl_ 上传 ID——请参阅输入矩阵。不接受生成 ID，因为转换生成 ID 会对已有 SVG 的缩小预览图重新进行矢量化。

stdio：

{
  "input": "/path/to/image.png",
  "output_path": "/path/to/vector.svg"
}

HTTPS — 不提供 output_path，且来源为 URL 或上传 ID：

{
  "input": "https://example.com/logo.png"
}

参数	类型	描述
input	字符串	图像来源：本地文件路径（仅限 stdio）、https:// URL 或 upl_ 上传 ID。不接受生成 ID。必填。
input_path	字符串	input 的可用别名，仅接受本地文件路径。
output_path	字符串	仅限 stdio — HTTPS 不提供此参数。可选的绝对路径（必须以 .svg 结尾），用于保存结果。省略时，将改为返回托管 URL。

svgmaker_remove_background

移除图像背景，并将结果作为带透明背景的干净 SVG 获取。AI 会分离前景主体、移除背景并将结果矢量化。接受栅格格式（PNG、JPEG、WebP、GIF、TIFF、AVIF）和 SVG。input 接受本地文件路径、https:// URL、upl_ 上传 ID 或生成 ID——请参阅输入矩阵。

stdio — 提供带 .svg 扩展名的 output_path，将 SVG 保存到本地：

{
  "input": "/path/to/photo.png",
  "output_path": "/path/to/cutout.svg"
}

HTTPS — 不提供 output_path；结果将以 SVGMaker 托管 URL 的形式返回。在 stdio 中省略此参数也会返回相同结果：

{
  "input": "gen_abc123"
}

参数	类型	描述
input	字符串	图像来源：本地文件路径（仅限 stdio）、https:// URL、upl_ 上传 ID 或生成 ID。必填。
input_path	字符串	input 的可用别名，仅接受本地文件路径。
generation_id	字符串	input 的可用别名，仅接受生成 ID 或图库 ID。
output_path	字符串	仅限 stdio — HTTPS 不提供此参数。可选的绝对路径（必须以 .svg 结尾），用于保存结果。省略时，将改为返回托管 URL。
storage	布尔值	为 true 时，将生成的 SVG 永久存储在云存储中（显示在你的生成记录中）。为 false 时，返回临时托管 URL。默认为 true。

svgmaker_account_info

获取账户信息，包括电子邮件、显示名称、账户类型和可用额度。无需参数。

{}

svgmaker_account_usage

获取 API 使用统计信息，可选按日期筛选。

{
  "days": 30
}

也可以使用日期范围：

{
  "start": "2026-01-01",
  "end": "2026-01-31"
}

svgmaker_generations_list

列出你的 SVG 生成记录，可选进行筛选和分页。

{
  "page": 1,
  "limit": 20,
  "type": "generate",
  "query": "mountain"
}

svgmaker_generations_get

获取特定生成记录的详细信息。

{
  "generation_id": "gen_abc123"
}

svgmaker_generations_delete

删除一条生成记录及其关联文件。需要付费账户。

{
  "generation_id": "gen_abc123"
}

svgmaker_generations_share

公开一条生成记录以供他人访问。

{
  "generation_id": "gen_abc123"
}

svgmaker_generations_download

以多种格式下载一条生成记录。需要付费账户。

stdio — output_path 用于将文件保存到本地：

{
  "generation_id": "gen_abc123",
  "output_path": "/path/to/output.svg",
  "format": "svg"
}

HTTPS — 不提供 output_path；工具会返回托管下载 URL：

{
  "generation_id": "gen_abc123",
  "format": "svg"
}

svgmaker_generations_preview

预览一条生成记录：直接在聊天上下文中以 PNG 图像形式返回。大模型可以查看并描述图像，从而支持后续编辑。

{
  "generation_id": "gen_abc123"
}

svgmaker_gallery_list

浏览 SVGMaker 公共图库，可选进行筛选和分页。

{
  "page": 1,
  "limit": 20,
  "type": "generate",
  "query": "landscape",
  "pro": "true"
}

svgmaker_gallery_get

获取特定图库项目的详细信息。

{
  "generation_id": "gal_abc123"
}

svgmaker_gallery_download

以多种格式下载图库项目。SVG 格式消耗 1 个积分，WebP/PNG 不消耗积分。

stdio — output_path 用于将文件保存到本地：

{
  "generation_id": "gal_abc123",
  "output_path": "/path/to/output.svg",
  "format": "svg"
}

HTTPS — 不提供 output_path；工具会返回托管下载 URL：

{
  "generation_id": "gal_abc123",
  "format": "svg"
}

svgmaker_gallery_preview

预览图库项目：直接在聊天上下文中返回 PNG 图像。

{
  "generation_id": "gal_abc123"
}

svgmaker_preview

仅支持 stdio 传输 — 此工具完全不支持 HTTPS，因为它会读取本地磁盘，而云端服务无法访问您的文件。通过 HTTPS 使用 svgmaker_generations_preview 或 svgmaker_gallery_preview，这两个工具使用 ID 而非路径。

预览本地图像文件，并直接在聊天上下文中返回。支持 PNG、SVG、WebP 和 SVGZ 格式。

{
  "input": "/path/to/image.svg"
}

参数	类型	描述
input	字符串	本地图像文件的绝对路径。必填。
file_path	字符串	input 的可用别名。请恰好提供其中一个。

⚙️ 配置

环境变量

变量	描述	必填	默认值
SVGMAKER_API_KEY	您的 SVGMaker API 密钥	✅ 是	-
SVGMAKER_RATE_LIMIT_RPM	API 速率限制（每分钟请求数）	❌ 否	2
SVGMAKER_BASE_URL	自定义 SVGMaker API 基础 URL	❌ 否	https://api.svgmaker.io
SVGMAKER_DEBUG	启用调试日志记录	❌ 否	false

调试日志记录

该服务包含全面的日志记录功能，便于调试和监控：

启用日志记录：

# Enable debug logging
SVGMAKER_DEBUG=true npx @genwave/svgmaker-mcp

# Or set NODE_ENV to development
NODE_ENV=development npx @genwave/svgmaker-mcp

日志文件位置：

• macOS/Linux：~/.cache/svgmaker-mcp/logs/
• Windows：%LOCALAPPDATA%/svgmaker-mcp/logs/
• 备用位置：./logs/（项目目录中）

日志文件格式：

mcp-debug-2025-06-04T10-30-45-123Z.log

🔍 开发

本地设置

1. 克隆并安装依赖项：

npm install

2. 创建包含 API 密钥的 .env 文件

SVGMAKER_API_KEY="your_api_key_here"

3. 在开发模式下运行：

npm run dev

测试

使用 MCP Inspector 进行测试：

npx @modelcontextprotocol/inspector node build/index.js

CI/CD 工作流

本项目使用 GitHub Actions 进行持续集成和部署：

1. 持续集成

   • 在每次推送到 main 分支以及收到拉取请求时运行
   • 执行代码检查、类型检查和构建
   • 确保代码质量和一致性

2. 更新版本

   • 对于补丁版本（错误修复）：

     npm run version:patch
     

   • 对于次要版本（新功能）：

     npm run version:minor
     

   • 对于主要版本（存在破坏性变更）：

     npm run version:major
     

3. 发布

   • 版本更新合并到 main 后，自动发布到 npm

🔐 安全

• ✅ 路径验证可防止目录遍历
• ✅ 对所有参数进行输入清理
• ✅ 安全处理文件操作
• ✅ 保护环境变量
• ✅ 支持速率限制

🤝 贡献

欢迎贡献！详情请参阅我们的贡献指南。

⭐ 功能

输入格式支持

• SVG 文件（.svg）
• PNG 图像（.png）
• JPEG 图像（.jpg、.jpeg）
• 其他常见图像格式

输出功能

• 简洁、经过优化的 SVG 输出
• 多种宽高比选项
• 背景控制（透明/不透明）
• 高质量矢量化

📝 许可证

MIT © Genwave AI — 详情请参阅 LICENSE 文件。