Svgmaker Mcp

内容 TypeScript

🚀 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

基本设置

创建 .env 文件：

SVGMAKER_API_KEY="your_api_key_here"

启动服务器：

npx svgmaker-mcp

✨ 主要特性

🎨 人工智能驱动的 SVG 生成：根据文本描述创建 SVG 图像。
✏️ 智能 SVG 编辑：使用自然语言编辑现有的 SVG 图像。
🔄 图像转 SVG 格式：将任意图像转换为可缩放的 SVG 格式。
🔒 安全的文件操作：内置路径验证和安全机制。
⚡ 实时进度反馈：操作过程中实时更新进度。
📝 类型安全：全面支持 TypeScript 并提供类型定义。

📦 安装指南

安装命令

# 使用 npm
npm install @genwave/svgmaker-mcp

# 使用 yarn
yarn add @genwave/svgmaker-mcp

基本设置

创建 .env 文件：

SVGMAKER_API_KEY="your_api_key_here"

启动服务器：

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

添加到 claude_desktop_config.json：

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

Claude 示例提示：

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

Cursor

或者手动配置：

在 Cursor 设置中配置：

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

在 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

或者手动配置：

在 settings.json 中配置：

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

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

WindSurf

在设置中配置：

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

在 WindSurf 中的使用示例：

Convert the company logo to SVG:

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

Zed

在设置中配置：

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

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

📚 详细文档

包结构

@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_API_KEY`	您的 SVGMaker API 密钥	✅ 是	-
`SVGMMAKER_RATE_LIMIT_RPM`	API 速率限制（每分钟请求数）	❌ 否	2
`SVGMAKER_BASE_URL`	自定义 SVGMaker API 基础 URL	❌ 否	`https://svgmaker.io/api`
`SVGMAKER_DEBUG`	启用调试日志记录	❌ 否	`false`

调试日志

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

启用日志记录：

# 启用调试日志记录
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

开发

本地设置

克隆项目并安装依赖：

npm install

创建包含您的 API 密钥的 .env 文件

SVGMAKER_API_KEY="your_api_key_here"

以开发模式运行：

npm run dev

测试

使用 MCP Inspector 进行测试：

npx @modelcontextprotocol/inspector node build/index.js

CI/CD 工作流

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

持续集成
- 在每次推送到主分支和拉取请求时运行。
- 执行代码检查、类型检查和构建。
- 确保代码质量和一致性。
发布新版本
- 发布补丁版本（修复 bug）：
```
npm run release:patch
```
- 发布次要版本（新增功能）：
```
npm run release:minor
```
- 发布主要版本（重大变更）：
```
npm run release:major
```
发布到 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 文件。

0 条评论
分类：内容

Svgmaker Mcp

🚀 SVGMaker MCP 服务器

🚀 快速开始

环境要求

安装

基本设置

✨ 主要特性

📦 安装指南

安装命令

基本设置

💻 使用示例

基础用法

生成 SVG

编辑 SVG

图像转 SVG

高级用法

与不同工具集成

Claude Desktop

Cursor

Visual Studio Code

WindSurf

Zed

📚 详细文档

包结构

可用工具

svgmaker_generate

svgmaker_edit

svgmaker_convert

配置

环境变量

调试日志

开发

本地设置

测试

CI/CD 工作流

安全

贡献

特性

输入格式支持

输出能力

🔧 技术细节

环境要求

安全机制

日志系统

持续集成和部署

📄 许可证

0 个评论

相似服务问题

相关AI产品

热议话题 »