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 文件。