SVGMaker MCP Server

SVGMaker MCP Server

SVGMaker API を使用して SVG 画像を生成、編集、変換する高機能な MCP サーバーです。

🎨 MCP サーバーの動作例

このイラストは、私たちのSVGMaker MCPサーバーを使って実際に作成しました。Model Context Protocolを通じて、AIアシスタントとベクターグラフィックスが見事に連携することを示す実例です。

🌟 特長

• 🎨 AI による SVG 生成：テキストの説明から SVG を作成します
• ✏️ スマートな SVG 編集：自然言語で既存の SVG を編集します
• 🖼️ ラスターモード：ベクター化を省略し、SVG の代わりに手早く PNG を取得します
• 🔄 画像から 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 連携

以下の各クライアントでは、サーバーを次の 2 つの方法で実行できます。

• 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 では、設定ファイルではなく UI からリモートサーバーに接続します。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 を省略してください。HTTPS のスキーマには含まれていません。また、結果で返されるホスト 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 またはギャラリー ID）	✅ svgmaker_edit と svgmaker_remove_background のみ	✅ 同様

svgmaker_convert は生成 ID を受け付けません。すでにお持ちの SVG の縮小プレビューを API がベクター化することになり、元の画像より確実に品質が低下するためです。Convert にはファイルパス、https:// URL、またはアップロード ID を指定してください。

URL の場合、MCP サーバーが画像をダウンロードすることはありません。URL を SVGMaker API に渡し、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 は引き続き 3 つのツールすべてで input の別名として受け付けられ、generation_id は svgmaker_edit と svgmaker_remove_background で引き続き受け付けられます。そのため、既存の設定もそのまま動作します。入力元は 1 つだけ指定してください。新しいコードでは input を使用してください。別名は互換性のためにのみ残されています。

svgmaker_upload

HTTPS トランスポート専用 — ローカルパスをそのまま使用できる stdio では、ツール一覧に表示されません。

ローカルファイルをクラウドサーバーで使用できるように、短時間有効なアップロード URL を発行します。バイトデータが MCP サーバーを経由することはありません。アップロードはエージェント自身が実行します。

{
  "filename": "panda.png"
}

パラメーター	型	説明
filename	string	必須です。panda.png のように、拡張子を含む名前を指定します。報告用にのみ保持されます。保存されるオブジェクト名はサーバー側で生成され、画像の種類はファイルのバイトデータから検出されます。

レスポンスには upload_url と expires_in が含まれます。ファイルをマルチパートフォームデータとして POST してください。

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

この手順を完了するには、エージェントがシェルコマンドを実行できる必要があります。 ターミナルを備えたクライアント（Claude Code、Cursor、VS Code、WindSurf、Zed、Codex）は、自身で curl を実行できます。HTTPS 経由で接続された Claude Desktop にはシェルがないため、アップロードを完了できません。その場合は、代わりに 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 分で、1 回のみ使用できます。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 を設定すると、ベクター化をスキップしてSVGの代わりにPNGを取得できます。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の場合、SVGの代わりにラスターPNGを返します（ベクター化をスキップします）。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や画像を編集します。generateと同じスタイルパラメーターに対応しています。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"
}

ラスター形式 — generateと同様に、raster: true を設定すると、SVGの代わりにPNGを取得できます。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の場合、SVGの代わりにラスターPNGを返します（ベクター化をスキップします）。stdioでは、出力パスに .png を指定してください。storage とは併用できません。
storage	boolean	trueの場合、編集した画像をクラウドストレージに永続的に保存します。raster とは併用できません。raster が設定されていない場合のデフォルトはtrueです。

svgmaker_convert

AI によるベクター化を使用して、ラスター画像を SVG に変換します。input にはローカルファイルパス、https:// URL、または upl_ アップロード 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	string	画像ソース：ローカルファイルパス（stdio のみ）、https:// URL、または upl_ アップロード ID。生成 ID は指定できません。必須です。
input_path	string	input の別名として指定できます。ローカルファイルパスに限ります。
output_path	string	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	string	画像ソース：ローカルファイルパス（stdio のみ）、https:// URL、upl_ アップロード ID、または生成 ID。必須です。
input_path	string	input の別名として指定できます。ローカルファイルパスに限ります。
generation_id	string	input の別名として指定できます。生成 ID またはギャラリー ID に限ります。
output_path	string	stdio のみ — HTTPS では指定できません。結果を保存する任意の絶対パス（.svg で終わる必要があります）。省略すると、代わりにホストされた URL が返されます。
storage	boolean	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 としてチャットコンテキストに直接返し、生成をプレビューします。LLM が画像を確認して説明できるため、続けて編集を依頼できます。

{
  "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 では0クレジットを消費します。

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 では、パスの代わりに ID を指定する svgmaker_generations_preview または svgmaker_gallery_preview を使用してください。

ローカルの画像ファイルをチャットコンテキストに直接返してプレビューします。PNG、SVG、WebP、SVGZ 形式に対応しています。

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

パラメーター	型	説明
input	string	ローカル画像ファイルの絶対パスです。必須です。
file_path	string	input の別名として使用できます。どちらか一方のみを指定してください。

⚙️ 設定

環境変数

変数	説明	必須	デフォルト
SVGMAKER_API_KEY	SVGMaker API キー	✅ はい	-
SVGMAKER_RATE_LIMIT_RPM	API のレート制限（1分あたりのリクエスト数）	❌ いいえ	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 ファイルをご覧ください。