Connect your AI to SVG Lab. About two minutes.

Before you start

You need two things.

1. An SVG Lab account. Sign in at svglab.app with Google or an email link.
2. Nothing to buy to try it. Every account gets 100 free SVG Lab MCP requests, with no form to fill in. After that, choose Plus or Max, or buy a top-up (150 requests per US dollar, from 10 dollars, never expire, all purchases final), on the plans page. Accounts granted early access have it too.

Nothing needs to be open in SVG Lab, and there is no code to type in. SVG Lab runs the design engine on its own servers, so your assistant can work while the site is closed.

Pick your app

Every app below signs in the same way: add the address, and the app opens a Sign in to SVG Lab page. Sign in, check which app is asking, and press Approve.

• Claudeclaude.ai and desktop
• Claude Codeterminal
• ChatGPTdeveloper mode
• Codexapp and CLI
• Cursormcp.json
• VS CodeCopilot agent mode
• OpenCodeopencode.json
• Windsurfmcp_config.json
• Gemini CLIsettings.json
• Any MCP clientthe raw details

One connector works in claude.ai on the web and in the Claude Desktop app. Custom connectors are available on the Free, Pro, Max, Team and Enterprise plans; a Free account can add one custom connector.

1. In Claude, open Customize, then Connectors (on the web: claude.ai/customize/connectors).
2. Press +, then Add custom connector.
3. Name it SVG Lab and paste this address as the remote MCP server URL. Leave Advanced settings (OAuth Client ID and Secret) empty.
   Remote MCP server URLCopy

   https://svglab.app/mcp

4. Press Add, then Connect next to SVG Lab. Sign in to SVG Lab in the window that opens and press Approve.
5. In a chat, press + at the lower left, open Connectors and make sure SVG Lab is switched on.

On a Team or Enterprise plan, an owner adds the connector once for everyone under Organization settings, then Connectors; each person then presses Connect and signs in with their own SVG Lab account.

Claude's connector form has no field for a key, so Claude always connects by signing in.

1. Run this in your terminal:
   TerminalCopy

   claude mcp add --transport http --scope user svglab https://svglab.app/mcp

   --scope user makes SVG Lab available in every project. Leave it out to add it to the current project only.

2. Start Claude Code, type /mcp, choose svglab and pick Authenticate. Your browser opens the SVG Lab sign-in page; press Approve. From outside a session, claude mcp login svglab does the same.
3. Back in Claude Code, /mcp should show svglab as connected.

With a key instead of sign-in

claude mcp add --transport http --scope user svglab https://svglab.app/mcp --header "Authorization: Bearer svl_YOUR_KEY"

Replace svl_YOUR_KEY with your own key (see Use a key instead). Claude Code saves it in your user settings (~/.claude.json), not in your project folder.

Custom MCP servers need developer mode, available on the web for ChatGPT Plus, Pro, Business, Enterprise and Education. In a Business, Enterprise or Education workspace an admin has to allow developer mode first.

1. Open Settings, then Security and login, and turn on Developer mode.
2. Open Plugins and press the + button to create a developer mode app.
3. Fill it in:
   • Name: SVG Lab
   • Description: Design engine: app screens, icons, illustrations and charts as finished SVG
   • MCP server URL: https://svglab.app/mcp
   • Authentication: OAuth
   MCP server URLCopy

   https://svglab.app/mcp

4. Create it. When ChatGPT asks you to sign in, sign in to SVG Lab and press Approve.
5. In a chat, open the + menu, choose Developer mode and select SVG Lab.

ChatGPT renames these menus from time to time. If you cannot find Plugins, look for Apps or Connectors in Settings; the fields are the same.

Everything happens in the Codex app, no terminal needed. The app, the IDE extension and the CLI share one settings file, so you add SVG Lab once.

1. In the Codex app, open Settings, then Plugins, then the MCPs tab.
2. Press Add, then Connect to a custom MCP.
3. Name it SVG Lab, set the type to Streamable HTTP, and paste the URL https://svglab.app/mcp. Leave the bearer token and headers empty, then press Save.
4. In the Servers list, press Authenticate on the SVG Lab row (it sits next to the gear icon, before the switch). Your browser opens the SVG Lab sign-in page; press Approve. When the browser says the sign-in is complete, go back to Codex.
5. Start a new Codex thread so it loads the SVG Lab tools.

From the terminal instead

If you prefer the command line, this adds the same server:

codex mcp add svglab --url https://svglab.app/mcp

Or add it to ~/.codex/config.toml by hand:

[mcp_servers.svglab]
url = "https://svglab.app/mcp"

Then sign in with the app's Authenticate button as in step 4. codex mcp login svglab also exists, but in our testing it sometimes reported success without finishing the sign-in.

With a key instead of sign-in

Keep the key in an environment variable so it never sits in the file:

[mcp_servers.svglab]
url = "https://svglab.app/mcp"
bearer_token_env_var = "SVGLAB_MCP_KEY"

Then set SVGLAB_MCP_KEY to your svl_ key in your shell before starting Codex.

1. Open ~/.cursor/mcp.json (every project) or .cursor/mcp.json in your project folder (this project only). Create the file if it does not exist, and add:
   ~/.cursor/mcp.jsonCopy

   {
     "mcpServers": {
       "svglab": {
         "url": "https://svglab.app/mcp"
       }
     }
   }

   If the file already has other servers, add only the "svglab" entry inside the existing "mcpServers".

2. Open Cursor Settings and find svglab in the MCP list. When Cursor asks you to sign in, your browser opens the SVG Lab sign-in page; press Approve.
3. Check that svglab shows as connected, then use it from a chat in Agent mode.

With a key instead of sign-in

{
  "mcpServers": {
    "svglab": {
      "url": "https://svglab.app/mcp",
      "headers": { "Authorization": "Bearer ${env:SVGLAB_MCP_KEY}" }
    }
  }
}

Set the environment variable SVGLAB_MCP_KEY to your svl_ key before starting Cursor.

1. Create .vscode/mcp.json in your project (or run MCP: Open User Configuration from the Command Palette for every project) and add:
   .vscode/mcp.jsonCopy

   {
     "servers": {
       "svglab": {
         "type": "http",
         "url": "https://svglab.app/mcp"
       }
     }
   }

   Note the key is "servers" here, not "mcpServers". You can also run MCP: Add Server, choose HTTP and paste https://svglab.app/mcp.

2. Start the server (the Start link above the entry, or MCP: List Servers). VS Code opens your browser for the SVG Lab sign-in on the first connection; press Approve.
3. Open Copilot Chat in Agent mode and check that the SVG Lab tools are listed under the tools button.

With a key instead of sign-in

{
  "inputs": [
    { "type": "promptString", "id": "svglab-key", "description": "SVG Lab MCP key (svl_...)", "password": true }
  ],
  "servers": {
    "svglab": {
      "type": "http",
      "url": "https://svglab.app/mcp",
      "headers": { "Authorization": "Bearer ${input:svglab-key}" }
    }
  }
}

VS Code asks for the key once and stores it securely.

1. Open your OpenCode config: ~/.config/opencode/opencode.json for every project (on Windows C:\Users\YOU\.config\opencode\opencode.json), or opencode.json in your project folder. The file may also be named opencode.jsonc; edit the one that exists. Use the global file unless you want SVG Lab in one project only. Add the "svglab" entry inside "mcp":
   opencode.jsonCopy

   {
     "$schema": "https://opencode.ai/config.json",
     "mcp": {
       "svglab": {
         "type": "remote",
         "url": "https://svglab.app/mcp",
         "enabled": true
       }
     }
   }

   If the file already has an "mcp" section, add only the "svglab" entry to it and keep everything else.

2. Sign in from a terminal:
   TerminalCopy

   opencode mcp auth svglab

   Your browser opens the SVG Lab sign-in page; press Approve. The command waits until you do. OpenCode also offers the sign-in by itself the first time it connects. In the OpenCode desktop app you can sign in from the MCP list in the session header instead.

3. Restart OpenCode (or start a new session) and run opencode mcp list to see svglab connected. The SVG Lab design tools then appear in your next session.

With a key instead of sign-in

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "svglab": {
      "type": "remote",
      "url": "https://svglab.app/mcp",
      "enabled": true,
      "oauth": false,
      "headers": { "Authorization": "Bearer {env:SVGLAB_MCP_KEY}" }
    }
  }
}

Set the environment variable SVGLAB_MCP_KEY to your svl_ key before starting OpenCode, so the key never sits in the file. OpenCode writes an environment variable as {env:NAME}, with no $ (Cursor and Windsurf use ${env:NAME}). "oauth": false tells OpenCode to use the key and skip the sign-in.

Windsurf's editor is now called Devin Desktop. These steps are for its Cascade panel.

1. In the Cascade panel, open the ... menu at the top right and choose Open MCP config file. (The file is ~/.config/devin/mcp_config.json on macOS and Linux and %APPDATA%\devin\mcp_config.json on Windows; older Windsurf versions use ~/.codeium/windsurf/mcp_config.json.)
2. Add the "svglab" entry:
   mcp_config.jsonCopy

   {
     "mcpServers": {
       "svglab": {
         "serverUrl": "https://svglab.app/mcp"
       }
     }
   }

3. Save, then refresh the MCP list in Cascade. When it asks you to sign in, sign in to SVG Lab and press Approve.

In a company workspace an admin may need to switch MCP servers on, or add https://svglab.app/mcp to the team's allowed list.

With a key instead of sign-in

{
  "mcpServers": {
    "svglab": {
      "serverUrl": "https://svglab.app/mcp",
      "headers": { "Authorization": "Bearer ${env:SVGLAB_MCP_KEY}" }
    }
  }
}

1. Run this in your terminal:
   TerminalCopy

   gemini mcp add --transport http --scope user svglab https://svglab.app/mcp

   Or add it to ~/.gemini/settings.json by hand. Use httpUrl, not url: in Gemini CLI, url means the older SSE transport.

   ~/.gemini/settings.jsonCopy

   {
     "mcpServers": {
       "svglab": {
         "httpUrl": "https://svglab.app/mcp"
       }
     }
   }

2. Start Gemini CLI. It notices that SVG Lab needs a sign-in and opens your browser; press Approve. To start the sign-in yourself, type /mcp auth svglab.
3. Type /mcp to check that svglab is connected.

With a key instead of sign-in

gemini mcp add --transport http --scope user -H "Authorization: Bearer svl_YOUR_KEY" svglab https://svglab.app/mcp

Any other MCP client

Any app that can add a remote MCP server over streamable HTTP can use SVG Lab. These are the details it will ask for:

• Server URL: https://svglab.app/mcp
• Transport: streamable HTTP (sometimes shown as "HTTP" or "remote"). Not SSE, and not a local command.
• Authentication: OAuth. The app finds everything it needs from the address itself: SVG Lab supports automatic app registration and PKCE, so leave any client ID and secret fields empty.
• Or a header: Authorization: Bearer svl_YOUR_KEY if the app has no sign-in support.

Most apps that use a JSON file accept this shape:

{
  "mcpServers": {
    "svglab": {
      "url": "https://svglab.app/mcp"
    }
  }
}

Use a key instead of signing in

Signing in is the recommended way for every app. A key is useful for command line apps, scripts, or a machine with no browser. It works until you regenerate or revoke it.

1. Sign in at svglab.app.
2. Open the account menu (your email, top right) and choose SVG Lab MCP.
3. Open Use a key instead of signing in, press Generate key and copy it straight away. SVG Lab shows it only once. Keys start with svl_.
4. Send it as a header with every request:
   HTTP headerCopy

   Authorization: Bearer svl_YOUR_KEY

Where an app reads the key from an environment variable such as SVGLAB_MCP_KEY, set it in your system or user environment variables (or your shell profile), so an app started from the desktop sees it too. Treat the key like a password: anyone holding it can use SVG Lab as you. Lost it? Press Regenerate (the old key stops working) and update your apps. Revoke switches it off.

Check it works

Start a new chat in your AI app and paste this prompt:

Use the SVG Lab MCP server (svglab). First check my SVG Lab account status and tell me which account you are connected to and whether design access is on. Then create a new SVG Lab project called "Setup test", design a simple 64 by 64 paper plane icon in it, and give me the link to the project.

What you should see:

1. Your assistant says it is connected to SVG Lab and names your account.
2. It designs the icon. The first design step can take 10 to 30 seconds while SVG Lab starts your design engine; later steps are quick.
3. It gives you a link. The new project is also in My Projects when you open SVG Lab, ready to edit or export as SVG, PNG or PDF.

If your assistant says it has no SVG Lab tools, or that it can only check your account, see Troubleshooting.

Troubleshooting

Still stuck? Email support@svglab.app with the app you use and the exact message you see.

For AI assistants setting this up

If you are an AI assistant configuring SVG Lab for a user, this section is for you. A plain text copy of this whole page is served to any request with the header Accept: text/markdown on https://svglab.app/mcp-setup.

name:              svglab
server_url:        https://svglab.app/mcp
transport:         streamable HTTP (remote). Not SSE, not stdio. Nothing to install.
auth:              OAuth 2.1, authorization code with PKCE (S256), dynamic client registration
resource_metadata: https://svglab.app/.well-known/oauth-protected-resource/mcp
auth_server_meta:  https://svglab.app/.well-known/oauth-authorization-server
registration:      https://svglab.app/oauth/register
scope:             mcp
client_id:         not needed; leave client ID and client secret empty
no_credentials:    POST /mcp answers 401 with a WWW-Authenticate header pointing at resource_metadata
key_alternative:   header "Authorization: Bearer svl_KEY" (the user creates the key at svglab.app:
                   account menu, SVG Lab MCP, Generate key). Never invent a key.
access:            every account gets 100 free requests once to try it, no form; then the Plus or Max plan, or top-ups: https://svglab.app/billing
cost:              100 free requests once per account, then Plus and Max (monthly request allowance) or top-ups (never expire); 1 tool call = 1 request, failed calls free
browser_tab:       not needed; the server runs the design engine and saves to the user's My Projects
first_call:        can take 10 to 30 seconds while the design engine starts
sessions:          up to 2 AI sessions per SVG Lab account at once, each in its own artboard group

FAQ