SVG Lab

為你的AI提供設計引擎：讓Claude、ChatGPT、Codex或Cursor生成應用程式畫面、圖示和插圖，SVG Lab會在畫布上將它們建構成乾淨的SVG，並處理間距、對齊和排版。遠端伺服器位於https://svglab.app/mcp，支援OAuth登入，無需金鑰。

造訪 svglab.app試用此 MCP贊助

託管 MCP 伺服器

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

可安裝到 Claude Code、Codex、Cursor 等客戶端

文件

The SVG Lab MCP server

SVG Lab (svglab.app) has a remote MCP server, the SVG Lab MCP, that houses SVG Lab's Design Engine: the Design Engine for AI. 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: In the Codex app: Settings, Plugins, MCPs, Add, Connect to a custom MCP. Name SVG Lab, type Streamable HTTP, URL https://svglab.app/mcp, Save. Then press Authenticate on the SVG Lab row and approve in the browser.
  • 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

Every SVG Lab account gets 100 free requests to try the SVG Lab MCP, once, with no form to fill in. After that, the Plus and Max plans include a monthly allowance of requests, and top-ups add requests that never expire. One tool call is one request, and calls that fail are not counted. Plans and top-ups: https://svglab.app/billing. 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 .