svgo jsx mcp
用于SVG优化的MCP(模型上下文协议)服务器,具有JSX兼容的camelCase属性转换功能。包括可用于生产的HTTP API,具有身份验证、速率限制和使用情况跟踪功能。
特性
- SVG优化:用途 SVGO 减小SVG文件大小
- CamelCase转换:将烤肉串大小写SVG属性转换为camelCase,以实现JSX/React兼容性
- API密钥验证:使用数据库支持的API密钥进行安全访问
- 速率限制:可配置每个密钥的速率限制
- 使用统计:跟踪优化指标和请求历史
- 批处理:在单个请求中优化多个SVG
- Docker就绪:部署到Coolify或任何Docker主机
快速开始
本地开发(标准模式)
npx svgo-jsx-mcpHTTP服务器模式
# Clone and install
git clone https://github.com/your-username/svgo-jsx-mcp
cd svgo-jsx-mcp
pnpm install
# Set up database
cp .env.example .env
# Edit .env with your DATABASE_URL and API_KEYS
# Run migrations and start
pnpm prisma migrate dev
pnpm dev部署(Coolify/Docker)
Docker Compose
# Set your API keys
export API_KEYS=your-secret-key-here
# Start services
docker-compose up -d冷却部署
- 从此GitHub仓库创建新服务
- 添加PostgreSQL数据库
- 设置环境变量:
- DATABASE_URL:PostgreSQL的连接字符串 - API_KEYS:API密钥的逗号分隔列表 - PORT:3000(默认值)
- 部署
API终点
健康检查
GET /health无需身份验证。返回服务器和数据库状态。
优化SVG
POST /mcp/optimize
Authorization: Bearer
{
"content": "...",
"filename": "icon.svg",
"camelCase": true
}批量优化
POST /mcp/optimize/batch
Authorization: Bearer
{
"items": [
{ "content": "...", "filename": "icon1.svg" },
{ "content": "...", "filename": "icon2.svg" }
],
"camelCase": true
}使用统计
GET /stats
Authorization: Bearer 按关键统计数据
GET /stats/:keyId
Authorization: Bearer 响应格式
单一优化
{
"success": true,
"filename": "icon.svg",
"optimization": {
"originalSize": 1234,
"optimizedSize": 567,
"savedBytes": 667,
"savedPercent": "54.1%",
"ratio": "0.459"
},
"camelCaseApplied": true,
"result": "..."
}批量优化
{
"success": true,
"total": 5,
"successful": 5,
"failed": 0,
"results": [...]
}认证
在请求头中包含您的API密钥:
Authorization: Bearer 或者:
X-API-Key: 环境变量
| 变量 | 描述 | 默认值 |
|---|---|---|
DATABASE_URL | PostgreSQL连接字符串 | (服务器模式需要) |
API_KEYS | 逗号分隔的API初始密钥 | - |
PORT | HTTP服务器端口 | 3000 |
CORS_ORIGINS | 允许的CORS来源 | \* |
CamelCase转换
当 camelCase 是 true (默认),转换烤肉串案例属性:
| 原始 | 已转换 |
|---|---|
stroke-width | strokeWidth |
fill-opacity | fillOpacity |
font-size | fontSize |
stroke-linecap | strokeLinecap |
clip-path | clipPath |
发展
# Install dependencies
pnpm install
# Generate Prisma client
pnpm prisma generate
# Run database migrations
pnpm prisma migrate dev
# Start HTTP server
pnpm dev
# Start stdio mode (for MCP clients)
pnpm dev:stdio
# Build
pnpm build脚本
| 脚本 | 描述 |
|---|---|
pnpm dev | 构建并运行HTTP服务器 |
pnpm dev:stdio | 构建并运行stdio模式 |
pnpm build | 编译TypeScript |
pnpm start:server | 运行HTTP服务器 |
pnpm start:stdio | 运行stdio模式 |
pnpm prisma:studio | Open Prisma工作室 |
许可证
麻省理工学院
