📇 ☁️ - Generate and edit SVGs via natural language, with real-time updates and secure file handling
SVGMaker MCP Server
以下摘录自该仓库的 README(片段) · 在 GitHub 读完整 README →
A powerful MCP server for generating, editing, and converting SVG images using SVGMaker API.
🎨 MCP Server in Action
*This very illustration came to life through our own SVGMaker MCP server—a living example of AI assistants and vector graphics working in perfect harmony via the Model Context Protocol.*
🌟 Highlights
- **🎨 AI-Powered SVG Generation**: Create SVGs from text descriptions
- **✏️ Smart SVG Editing**: Edit existing SVGs with natural language
- **🖼️ Raster Mode**: Skip vectorization and get a quick PNG instead of SVG
- **🔄 Image-to-SVG Conversion**: Convert any image to scalable SVG
- **🪄 Background Removal**: Isolate the foreground subject and get a clean SVG with transparency
- **👁️ Inline Image Preview**: Preview generations and gallery items directly in chat
- **🔒 Secure File Operations**: Built-in path validation and security
- **⚡ Real-Time Progress**: Live updates during operations
- **📝 Type Safety**: Full TypeScript support with type definitions
📋 Table of Contents
- Requirements
- Installation
- Quick Start
- LLM Integrations
- Available Tools
- Configuration
- Development
- Contributing
💻 Requirements
- Node.js: Minimum version 20.9.0
- npm: Minimum version 7.0.0
- Operating Systems:
- Linux (Ubuntu 20.04+, CentOS 8+)
- macOS (10.15+)
- Windows (10+)
- SVGMaker API key (Get one here)
📦 Package Structure
🚀 Installation
Basic Setup
1. Create .env file:
2. Start the server:
🔌 LLM Integrations
Every client below can run the server two ways:
- **stdio** — the server runs on your machine with your API key. Local file paths work, and output_path saves the result to disk.
- **HTTPS** — the server runs in the cloud at https://mcp.svgmaker.io/mcp and you sign in through the browser. The cloud server cannot see your disk, so output_path is not offered and results come back as hosted SVGMaker URLs. Local files must go through svgmaker_upload first.
The example prompts in each section are given in both shapes. Use the one that matches your setup.
🔌 Claude Desktop
1. Add to claude_desktop_config.json.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
Claude Desktop connects to remote servers from the UI, not from the config file: **Settings → Connectors → Add custom connector**, then enter https://mcp.svgmaker.io/mcp and complete the browser login.
2. Example usage in Claude Desktop:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🔌 Claude Code
1. Add the server with the Claude Code CLI.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
Then run /mcp inside Claude Code, select **svgmaker**, and complete the browser login.
2. Example usage in Claude Code:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🔌 Cursor
Or configure manually:
1. Configure in cursor settings.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
2. Example usage in Cursor:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
For a logo that only exists on your machine, call svgmaker_upload first and pass the returned upl_… id as input.
🔌 Visual Studio Code
Or configure manually:
1. Configure in settings.json.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
2. Example usage in VS Code:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🔌 WindSurf
1. Configure in ~/.codeium/windsurf/mcp_config.json.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
2. Example usage in WindSurf:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🔌 Zed
1. Configure in settings.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
You can also add it from the UI: **Settings → AI → General → MCP Servers → Add Server → Add Remote MCP Server**.
2. Example usage in Zed:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🔌 Codex
1. Add the server with the Codex CLI.
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
2. Example usage in Codex:
**stdio (API key):**
**HTTPS (OAuth browser login — no API key):**
🛠️ Available Tools
Unless a block is marked otherwise, the JSON examples below show the **stdio** call shape. Over HTTPS, drop output_path — it is not part of the schema there — and use the hosted URL that comes back in the result.