Skip to main content
Glama
ErneG

svgo-jsx-mcp

by ErneG
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript

svgo-jsx-mcp

An MCP (Model Context Protocol) server for SVG optimization with JSX-compatible camelCase attribute conversion. Includes a production-ready HTTP API with authentication, rate limiting, and usage tracking.

Features

  • SVG Optimization: Uses SVGO to reduce SVG file sizes

  • CamelCase Conversion: Converts kebab-case SVG attributes to camelCase for JSX/React compatibility

  • API Key Authentication: Secure access with database-backed API keys

  • Rate Limiting: Configurable per-key rate limits

  • Usage Statistics: Track optimization metrics and request history

  • Batch Processing: Optimize multiple SVGs in a single request

  • Docker Ready: Deploy to Coolify or any Docker host

Related MCP server: nakkas

Quick Start

Local Development (stdio mode)

npx svgo-jsx-mcp

HTTP Server Mode

# 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

Deployment (Coolify/Docker)

Docker Compose

# Set your API keys
export API_KEYS=your-secret-key-here

# Start services
docker-compose up -d

Coolify Deployment

  1. Create a new service from this GitHub repo

  2. Add a PostgreSQL database

  3. Set environment variables:

    • DATABASE_URL: Connection string to your PostgreSQL

    • API_KEYS: Comma-separated list of API keys

    • PORT: 3000 (default)

  4. Deploy

API Endpoints

Health Check

GET /health

No authentication required. Returns server and database status.

Optimize SVG

POST /mcp/optimize
Authorization: Bearer <api-key>

{
  "content": "<svg>...</svg>",
  "filename": "icon.svg",
  "camelCase": true
}

Batch Optimize

POST /mcp/optimize/batch
Authorization: Bearer <api-key>

{
  "items": [
    { "content": "<svg>...</svg>", "filename": "icon1.svg" },
    { "content": "<svg>...</svg>", "filename": "icon2.svg" }
  ],
  "camelCase": true
}

Usage Statistics

GET /stats
Authorization: Bearer <api-key>

Per-Key Statistics

GET /stats/:keyId
Authorization: Bearer <api-key>

Response Format

Single Optimization

{
  "success": true,
  "filename": "icon.svg",
  "optimization": {
    "originalSize": 1234,
    "optimizedSize": 567,
    "savedBytes": 667,
    "savedPercent": "54.1%",
    "ratio": "0.459"
  },
  "camelCaseApplied": true,
  "result": "<svg strokeWidth=\"2\" fillOpacity=\"0.5\">...</svg>"
}

Batch Optimization

{
  "success": true,
  "total": 5,
  "successful": 5,
  "failed": 0,
  "results": [...]
}

Authentication

Include your API key in the request header:

Authorization: Bearer <your-api-key>

Or:

X-API-Key: <your-api-key>

Environment Variables

Variable

Description

Default

DATABASE_URL

PostgreSQL connection string

(required for server mode)

API_KEYS

Comma-separated initial API keys

-

PORT

HTTP server port

3000

CORS_ORIGINS

Allowed CORS origins

*

CamelCase Conversion

When camelCase is true (default), kebab-case attributes are converted:

Original

Converted

stroke-width

strokeWidth

fill-opacity

fillOpacity

font-size

fontSize

stroke-linecap

strokeLinecap

clip-path

clipPath

Development

# 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

Scripts

Script

Description

pnpm dev

Build and run HTTP server

pnpm dev:stdio

Build and run stdio mode

pnpm build

Compile TypeScript

pnpm start:server

Run HTTP server

pnpm start:stdio

Run stdio mode

pnpm prisma:studio

Open Prisma Studio

License

MIT

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Resources

Related MCP Connectors

Related MCP Servers

  • icogenie-mcp

    albertnahas
    A
    license
    Not graded
    quality
    C
    maintenance
    AI-powered SVG icon generation MCP server. Generate production-ready SVG icons from text descriptions with customizable styles, sizes, and themes.
    41 npm
    6
    MIT

  • nakkas

    arikusi
    A
    license
    A
    quality
    A
    maintenance
    MCP server that turns AI into an SVG artist. One rendering engine with a rich JSON schema, AI controls all design parameters. Renders animated SVGs with CSS @keyframes and SMIL animations. Supports 16+ element types, parametric curves, pattern groups, gradient/filter/clip/mask definitions, and PNG preview. No external dependencies, runs locally via npx.
    3
    256 npm
    24
    MIT

  • svg2vector-mcp

    SuLG-ik
    A
    license
    A
    quality
    C
    maintenance
    MCP server for converting SVG files to Android Vector Drawable XML, enabling seamless integration with Figma MCP for Android development.
    1
    2 npm
    11
    MIT