SVG Lab

มอบเครื่องมือออกแบบให้ AI ของคุณ: ขอให้ Claude, ChatGPT, Codex หรือ Cursor สร้างหน้าจอแอป ไอคอน และภาพประกอบ แล้ว SVG Lab จะสร้างเป็น SVG ที่สะอาดบนผืนผ้าใบ พร้อมจัดการระยะห่าง การจัดวาง และการพิมพ์ เซิร์ฟเวอร์ระยะไกลที่ https://svglab.app/mcp พร้อมเข้าสู่ระบบด้วย OAuth ไม่ต้องใช้คีย์

เซิร์ฟเวอร์ 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 .