SVG Lab

Gives your AI a design engine: ask Claude, ChatGPT, Codex or Cursor for app screens, icons and illustrations, and SVG Lab builds them as clean SVG on a canvas, with spacing, alignment and typography handled. Remote server at https://svglab.app/mcp with OAuth sign-in, no key needed.

View on svglab.appTry this MCPSponsored

Hosted MCP Server

npx add-mcp 'https://svglab.app/mcp'

Installs into Claude Code, Codex, Cursor and more

Documentation

The SVG Lab MCP server

SVG Lab (svglab.app) has a remote MCP server that gives AI apps a design engine. The AI brings the idea (content, palette, direction); SVG Lab guarantees the structure (spacing, alignment, sizing, type, valid vector geometry). Everything it makes is saved to the user's SVG Lab projects as finished designs that export as SVG, PNG or PDF. It runs on SVG Lab's servers, so nothing needs to be open in SVG Lab and there is no pairing code.

What it makes

  • App and web screens with real layout, components and type
  • Icons and icon sets
  • Illustrations and human figures
  • Layouts with real photography
  • Charts
  • Slides, social posts and posters

How to connect

Server URL: https://svglab.app/mcp (remote MCP, streamable HTTP, OAuth 2.1 sign-in).

  • Claude (claude.ai, Claude Desktop): Customize, Connectors, +, Add custom connector. Paste https://svglab.app/mcp, press Add, then Connect, sign in to SVG Lab and approve.
  • Claude Code: Run: claude mcp add --transport http --scope user svglab https://svglab.app/mcp . Then open /mcp in Claude Code and authenticate.
  • ChatGPT: Settings, Security and login, turn on Developer mode. Then Plugins, +, create a developer mode app with the MCP server URL https://svglab.app/mcp and OAuth, and sign in to SVG Lab.
  • Codex: Run: codex mcp add svglab --url https://svglab.app/mcp . Then press Authenticate next to svglab in the Codex app's MCP settings.
  • Cursor: Add to ~/.cursor/mcp.json: { "mcpServers": { "svglab": { "url": "https://svglab.app/mcp" } } }, then sign in when Cursor asks.
  • OpenCode: Add to opencode.json under "mcp": "svglab": { "type": "remote", "url": "https://svglab.app/mcp", "enabled": true }, then run: opencode mcp auth svglab .
  • Other MCP clients: Any client that supports remote MCP over streamable HTTP with OAuth: server URL https://svglab.app/mcp . Full setup for every app: https://svglab.app/mcp-setup .

Step by step setup for every app (Claude, Claude Code, ChatGPT, Codex, Cursor, VS Code, OpenCode, Windsurf, Gemini CLI), with copy-paste configs, a test prompt and troubleshooting: https://svglab.app/mcp-setup (send Accept: text/markdown for the Markdown version).

Access

The SVG Lab MCP is included in the Plus and Max plans, each with a monthly allowance of requests. One tool call is one request, and calls that fail are not counted. Choose a plan at https://svglab.app/billing, then connect. Plus is $20 a month with 5,000 requests a month; Max is $40 a month with 15,000 requests a month.

More: https://svglab.app/mcp-server . Plans: https://svglab.app/billing .