Svgmaker MCP

🚀 SVGMaker MCP Server

SVGMaker MCP Serverは、SVGMaker APIを使用してSVG画像の生成、編集、変換を行う強力なMCPサーバーです。このサーバーを利用することで、テキスト記述からSVGを作成したり、既存のSVGを自然言語で編集したり、画像をSVG形式に変換することができます。

🚀 クイックスタート

このセクションでは、SVGMaker MCP Serverの基本的なセットアップと起動方法を説明します。

必要条件

• 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

✨ 主な機能

• 🎨 AIによるSVG生成: テキスト記述からSVGを作成することができます。
• ✏️ スマートなSVG編集: 自然言語を使用して既存のSVGを編集することができます。
• 🔄 画像からSVGへの変換: 任意の画像をスケーラブルなSVGに変換することができます。
• 🔒 セキュアなファイル操作: パス検証とセキュリティが組み込まれています。
• ⚡ リアルタイムの進捗状況: 操作中にリアルタイムで更新されます。
• 📝 型安全性: 型定義付きの完全なTypeScriptサポートがあります。

📦 インストール

このセクションでは、SVGMaker MCP Serverのインストール方法を説明します。

パッケージ構造

@genwave/svgmaker-mcp/
├── build/             # コンパイルされたJavaScriptファイル
├── docs/              # ドキュメント
│   └── api/           # APIドキュメント
├── src/               # ソースTypeScriptファイル
│   ├── tools/         # MCPツールの実装
│   ├── services/      # API統合
│   └── utils/         # ユーティリティ関数
└── types/             # TypeScript宣言

インストールコマンド

# npmを使用する場合
npm install @genwave/svgmaker-mcp

# yarnを使用する場合
yarn add @genwave/svgmaker-mcp

💻 使用例

基本的な使用法

このセクションでは、SVGMaker MCP Serverの基本的な使用方法を説明します。

サーバーの起動

npx svgmaker-mcp

SVGの生成

{
  "prompt": "Minimalist mountain landscape with sun",
  "output_path": "./landscape.svg",
  "quality": "high",
  "aspectRatio": "landscape"
}

高度な使用法

このセクションでは、SVGMaker MCP Serverの高度な使用方法を説明します。

LLMとの統合

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>

📚 ドキュメント

利用可能なツール

svgmaker_generate

AIの創造力を利用して、あなたのアイデアを見事な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"
}

svgmaker_edit

自然言語で既存の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"
}

svgmaker_convert

画像をSVG形式に変換します。

{
  "input_path": "/path/to/image.png",
  "output_path": "./vector.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. .envファイルを作成し、あなたのAPIキーを設定します。

SVGMAKER_API_KEY="your_api_key_here"

3. 開発モードで実行します。

npm run dev

テスト

MCPインスペクターを使用してテストします。

npx @modelcontextprotocol/inspector node build/index.js

CI/CDワークフロー

このプロジェクトは、継続的インテグレーションとデプロイメントのためにGitHub Actionsを使用しています。

1. 継続的インテグレーション
   • メインブランチへのすべてのプッシュとプルリクエストで実行されます。
   • リント、型チェック、ビルドを実行します。
   • コードの品質と一貫性を保証します。
2. 新しいバージョンのリリース
   • パッチバージョン (バグ修正) をリリースするには:

     npm run release:patch
     

   • マイナーバージョン (新機能) をリリースするには:

     npm run release:minor
     

   • メジャーバージョン (破壊的な変更) をリリースするには:

     npm run release:major
     

3. 公開
   • 新しいバージョンタグがプッシュされると、自動的にnpmに公開されます。

🔧 技術詳細

セキュリティ

• ✅ パス検証によりディレクトリトラバーサルを防止します。
• ✅ すべてのパラメーターに対して入力サニタイズを行います。
• ✅ セキュアなファイル操作を処理します。
• ✅ 環境変数を保護します。
• ✅ レート制限をサポートします。

入力形式のサポート

• SVGファイル (.svg)
• PNG画像 (.png)
• JPEG画像 (.jpg, .jpeg)
• その他の一般的な画像形式

出力機能

• クリーンで最適化されたSVG出力
• 複数のアスペクト比オプション
• 背景制御 (透明/不透明)
• 高品質のベクトル化

📄 ライセンス

このプロジェクトはMITライセンスの下で提供されています。詳細は LICENSE ファイルを参照してください。© Genwave AI