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 credits (up to 24 app screens), with no form to fill in (a tool call costs 1 credit). After that, choose a plan, or buy a top-up (10 US dollars for 5,000 credits, up to 1,200 app screens, 25 for 10,000 credits, up to 2,400 app screens, 50 for 25,000 credits, up to 6,100 app screens; they never expire, all purchases final), on the plans page.

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

ChatGPT and Codex install the SVG Lab plugin in one click: no address to paste and no developer mode. Every other app below adds the address. Either way 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
• ChatGPTone-click plugin
• Codexone-click plugin
• 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.

Add to ClaudeOne click: Claude opens Add custom connector with SVG Lab filled in. Press Add, then Connect, sign in to SVG Lab and press Approve. Or follow the steps below.

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.

Your Claude organization's members can have SVG Lab connected when they log in to Claude, with no Connect button and no sign-in window. Claude calls this Managed authorization. It needs a Claude Team or Enterprise plan and an SVG Lab team.

1. As a Claude owner, add SVG Lab as a connector for the organization (the steps above), with the address https://svglab.app/mcp.
2. Open the SVG Lab connector, find Managed authorization under Authentication and press Set up. Under Identity source, choose Claude-issued. Copy the Issuer URL it shows.
3. In SVG Lab, open My Projects, choose your team and open the Team panel. As the team's owner or an admin, paste the Issuer URL under Claude auto-connect and press Turn on. Then copy the team's Tenant ID shown there into Claude's Tenant ID (optional) field: it ties sign-ins to this exact team.
4. Back in Claude, press Run test under Connection status.

Who gets connected: a person who is a member of your SVG Lab team and whose confirmed SVG Lab email is the same as their Claude email. Anyone else still presses Connect and signs in as usual. SVG Lab never creates an account from Claude's sign-in.

Turning it off in the Team panel stops new connections at once. A connection already made lasts up to one hour. Someone removed from your Claude organization stops getting new connections, and keeps one already made for up to one hour.

Identity providers (Okta and others) are not supported yet: choose Claude-issued.

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.

SVG Lab is a plugin in ChatGPT. Install it in one click: no developer mode, no address to paste.

Install in ChatGPTOpens the SVG Lab plugin in ChatGPT. Press + to install it, then sign in to SVG Lab and press Approve.

1. Open the SVG Lab plugin, or open Plugins in ChatGPT (on the web or in the desktop app) and search for SVG Lab.
2. Press + to install it.
3. When ChatGPT asks you to connect, sign in to SVG Lab and press Approve.
4. Start a new chat and ask for what you want, for example: Design a welcome screen for my plant care app in SVG Lab.

You used to need developer mode and a custom app for this. You don't any more: if you added SVG Lab that way before, you can remove it and install the plugin instead.

Codex installs the same SVG Lab plugin as ChatGPT: no MCP to add by hand.

1. In the Codex app (or the ChatGPT desktop app), open Plugins and search for SVG Lab. In the Codex CLI, type /plugins instead.
2. Press + to install it.
3. When it asks you to connect, sign in to SVG Lab and press Approve.
4. Start a new Codex thread so it loads SVG Lab.

In the IDE extension, or to add it by hand

The Codex IDE extension has no plugins. There, or if you prefer to add the server yourself, this adds SVG Lab as an MCP server (the app, the IDE extension and the CLI share one settings file):

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, in the Codex app, open Settings, Plugins, MCPs and press Authenticate on the SVG Lab row; your browser opens the SVG Lab sign-in page, press Approve. 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.

Add to CursorOne click if Cursor is installed: Cursor asks to install SVG Lab; press Install, then sign in to SVG Lab and press Approve. Or add it by hand:

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.

Add to VS CodeOne click if VS Code is installed: press Install on the page it opens, then sign in to SVG Lab and press Approve. Or add it by hand:

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 credits (up to 24 app screens) once to try it, no form; then a plan (Starter, Plus, Max or Ultra) or top-ups: https://svglab.app/billing
cost:              credits: 1 a tool call, 2 a reference search, failed calls free; 100 free once per account, then monthly plan credits or top-up credits (never expire)
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