Svgmaker MCP

🚀 SVGMaker MCP 服务器

SVGMaker MCP 服务器是一款强大的 MCP 服务器，借助 SVGMaker API 实现 SVG 图像的生成、编辑和转换功能。

🚀 快速开始

环境要求

• Node.js：最低版本 18.0.0

  node --version  # 版本应 >= v18.0.0
  

• npm：最低版本 7.0.0

  npm --version   # 版本应 >= 7.0.0
  

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

安装

# 使用 npm 安装
npm install @genwave/svgmaker-mcp

# 使用 yarn 安装
yarn add @genwave/svgmaker-mcp

基本设置

1. 创建 .env 文件：

SVGMAKER_API_KEY="your_api_key_here"

2. 启动服务器：

npx svgmaker-mcp

✨ 主要特性

• 🎨 人工智能驱动的 SVG 生成：根据文本描述创建 SVG 图像。
• ✏️ 智能 SVG 编辑：使用自然语言编辑现有的 SVG 图像。
• 🔄 图像转 SVG 格式：将任意图像转换为可缩放的 SVG 格式。
• 🔒 安全的文件操作：内置路径验证和安全机制。
• ⚡ 实时进度反馈：操作过程中实时更新进度。
• 📝 类型安全：全面支持 TypeScript 并提供类型定义。

📦 安装指南

安装命令

# 使用 npm
npm install @genwave/svgmaker-mcp

# 使用 yarn
yarn add @genwave/svgmaker-mcp

基本设置

1. 创建 .env 文件：

SVGMAKER_API_KEY="your_api_key_here"

2. 启动服务器：

npx svgmaker-mcp

💻 使用示例

基础用法

生成 SVG

{
  "prompt": "Modern tech illustration showing an MCP server connecting multiple AI assistants to SVG generation capabilities. Show interconnected nodes, data flow, and SVG icons. Use a clean, professional design with blue and purple gradients, geometric shapes, and modern typography elements.",
  "output_path": "./docs/mcp-capabilities-demo.svg",
  "quality": "medium",
  "aspectRatio": "landscape",
  "background": "transparent"
}

编辑 SVG

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

图像转 SVG

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

高级用法

与不同工具集成

Claude Desktop

1. 添加到 claude_desktop_config.json：

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

2. Claude 示例提示：

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>

Cursor

或者手动配置：

1. 在 Cursor 设置中配置：

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

2. 在 Cursor 中的使用示例：

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

Visual Studio Code

或者手动配置：

1. 在 settings.json 中配置：

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

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

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>

WindSurf

1. 在设置中配置：

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

2. 在 WindSurf 中的使用示例：

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

Zed

1. 在设置中配置：

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

2. 在 Zed 中的使用示例：

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

📚 详细文档

包结构

@genwave/svgmaker-mcp/
├── build/             # 编译后的 JavaScript 文件
├── docs/              # 文档
│   └── api/           # API 文档
├── src/               # 源 TypeScript 文件
│   ├── tools/         # MCP 工具实现
│   ├── services/      # API 集成
│   └── utils/         # 工具函数
└── types/             # TypeScript 声明

可用工具

svgmaker_generate

使用人工智能驱动的创造力将您的想法转化为令人惊叹的 SVG 艺术作品。

svgmaker_edit

使用自然语言编辑现有的 SVG 或图像。

svgmaker_convert

将图像转换为 SVG 格式。

配置

环境变量

调试日志

服务器包含全面的日志记录，用于调试和监控：

启用日志记录：

# 启用调试日志记录
SVGMAKER_DEBUG=true npx @genwave/svgmaker-mcp

# 或者将 NODE_ENV 设置为开发环境
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. 持续集成

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

2. 发布新版本

   • 发布补丁版本（修复 bug）：

     npm run release:patch
     

   • 发布次要版本（新增功能）：

     npm run release:minor
     

   • 发布主要版本（重大变更）：

     npm run release:major
     

3. 发布到 npm

   • 当推送新的版本标签时，自动发布到 npm。

安全

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

贡献

我们欢迎贡献！请参阅我们的 贡献指南 了解详细信息。

特性

输入格式支持

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

输出能力

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

🔧 技术细节

环境要求

• Node.js 最低版本 18.0.0，以确保服务器的兼容性和性能。
• npm 最低版本 7.0.0，用于依赖管理。
• 支持多种操作系统，包括 Linux（Ubuntu 20.04+、CentOS 8+）、macOS（10.15+）和 Windows（10+），方便不同环境下的使用。

安全机制

• 路径验证：通过内置的路径验证机制，防止目录遍历攻击，确保文件操作的安全性。
• 输入清理：对所有输入参数进行清理，防止潜在的安全漏洞。
• 环境变量保护：保护环境变量不被非法访问，确保 API 密钥等敏感信息的安全。

日志系统

• 全面的日志记录：服务器包含详细的日志记录，用于调试和监控。可以通过环境变量 SVGMAKER_DEBUG 或 NODE_ENV=development 启用调试日志。
• 日志文件位置：根据不同的操作系统，日志文件存储在不同的位置，如 macOS/Linux 的 ~/.cache/svgmaker-mcp/logs/、Windows 的 %LOCALAPPDATA%/svgmaker-mcp/logs/，如果没有合适的位置，则存储在项目目录下的 ./logs/。

持续集成和部署

• 使用 GitHub Actions 进行持续集成和部署，确保代码质量和一致性。在每次推送到主分支和拉取请求时，执行代码检查、类型检查和构建。
• 支持自动发布到 npm，当推送新的版本标签时，自动完成发布流程。

📄 许可证

本项目采用 MIT 许可证，版权归 Genwave AI 所有。详情请参阅 LICENSE 文件。