SVGMaker MCP Server

SVGMaker MCP服务器

功能强大的MCP服务器，用于使用SVGMaker API生成、编辑和转换SVG图像。

🎨 MCP服务器正在运行

*这个例子是通过我们自己的SVGMaker MCP服务器实现的，这是一个人工智能助手和矢量图形通过模型上下文协议完美协调工作的活生生的例子。*

🌟 亮点

• 🎨 AI驱动的SVG生成：根据文本描述创建SVG
• ✏️ 智能SVG编辑：用自然语言编辑现有的SVG
• 🔄 图像到SVG的转换：将任何图像转换为可缩放的SVG
• 🔒 安全文件操作：内置路径验证和安全性
• ⚡ 实时进度：运营期间的实时更新
• 📝 类型安全：完全支持TypeScript和类型定义

📋 目录

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

💻 需求

• Node.js：最低版本18.0.0

  node --version  # Should be >= v18.0.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"

1. 启动服务器：

npx svgmaker-mcp

🔌 LLM集成

🔌 克劳德桌面版

1. 添加到claude_desktop_config.json：

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

1. 克劳德提示示例：

Generate an SVG of a minimalist mountain landscape:

{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "Minimalist mountain landscape with sun",
    "output_path": "./landscape.svg",
    "quality": "high",
    "aspectRatio": "landscape"
  }
}

🔌 光标

或手动配置：

1. 在光标设置中配置：

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

1. Cursor中的示例用法：

Use svgmaker to edit the logo.svg file and make it more modern:

{
  "server": "svgmaker",
  "tool": "svgmaker_edit",
  "arguments": {
    "input_path": "./logo.svg",
    "prompt": "Make it more modern and minimalist",
    "output_path": "./modern_logo.svg",
    "quality": "high"
  }
}

🔌 Visual Studio Code

或手动配置：

1. 在settings.json中配置：

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

1. VS Code中的示例用法：

Generate a new icon for my app:

{
  "server": "svgmaker",
  "tool": "svgmaker_generate",
  "arguments": {
    "prompt": "Modern app icon with abstract geometric shapes",
    "output_path": "./assets/icon.svg",
    "quality": "high",
    "aspectRatio": "square"
  }
}

🔌 风帆

1. 在设置中配置：

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

1. WindSurf中的示例用法：

Convert the company logo to SVG:

{
  "server": "svgmaker",
  "tool": "svgmaker_convert",
  "arguments": {
    "input_path": "./branding/logo.png",
    "output_path": "./branding/vector_logo.svg"
  }
}

🔌 泽德

1. 在设置中配置：

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

1. Zed中的示例用法：

Edit an existing SVG file:

{
  "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"
  }
}

🛠️ 可用工具

svgmaker_generate

根据文本提示生成SVG图像。支持样式参数，以便对输出进行细粒度控制。

{
  "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"
}

svgmaker_编辑

使用自然语言编辑现有的SVG或图像。支持与generate相同的样式参数。

{
  "input_path": "/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"
}

svgmaker_convert

使用AI驱动的矢量化将光栅图像转换为SVG。

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

⚙️ 配置

环境变量

调试日志记录

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

启用日志记录：

# 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/
• 视窗: %LOCALAPPDATA%/svgmaker-mcp/logs/
• 后备方案: ./logs/ （在项目目录中）

日志文件格式：

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

🔍 发展

本地设置

1. 克隆和安装依赖关系：

npm install

1. 使用API密钥创建.env文件

SVGMAKER_API_KEY="your_api_key_here"

1. 在开发模式下运行：

npm run dev

测试

使用MCP检查器进行测试：

npx @modelcontextprotocol/inspector node build/index.js

CI/CD工作流程

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

1. 持续集成

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

1. 发布新版本

- 要发布补丁版本（错误修复）：

     npm run release:patch

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

     npm run release:minor

- 要发布主要版本（突破性更改）：

     npm run release:major

1. 出版

- 推送新版本标签时自动发布到npm

🔐 安全

• ✅ 路径验证阻止目录遍历
• ✅ 所有参数的输入净化
• ✅ 安全的文件操作处理
• ✅ 环境变量保护
• ✅ 速率限制支持

🤝 贡献

我们欢迎捐款！请查看我们的 贡献指南 了解详情。

⭐ 特性

输入格式支持

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

输出能力

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

📝 许可证