svglab-mcp

# SVG Lab MCP

**SVG Lab MCP** is the remote MCP server of [SVG Lab (svglab.app)](https://svglab.app/mcp-server). It houses SVG Lab's Design Engine: the Design Engine for AI. Connect Claude, ChatGPT, Codex, Cursor or any other MCP client and the Design Engine does the design work (layout, spacing, type, colour and drawing), checked before it hands you finished app screens, icons, illustrations and charts as clean SVG, saved to your SVG Lab projects and ready to export as SVG, PNG or PDF.

The AI brings the idea (content, palette, direction); SVG Lab guarantees the structure (spacing, alignment, sizing, type, valid vector geometry). It runs on SVG Lab's servers, so there is nothing to install and no browser tab needs to stay open.

```text
https://svglab.app/mcp
```

Streamable HTTP, OAuth sign-in, no key needed.

This repository holds documentation, ready-made client configs and an agent skill. It contains no server code. The full, always current setup guide is at [svglab.app/mcp-setup](https://svglab.app/mcp-setup).

## Contents

- [For AI agents](#for-ai-agents)
- [Before you start](#before-you-start)
- [Quick setup](#quick-setup): [Claude](#claude-claudeai-and-claude-desktop) · [Claude Code](#claude-code) · [ChatGPT](#chatgpt) · [Codex](#codex) · [Cursor](#cursor) · [VS Code](#vs-code-github-copilot-agent-mode) · [OpenCode](#opencode) · [Windsurf](#windsurf-devin-desktop) · [Gemini CLI](#gemini-cli) · [Any MCP client](#any-other-mcp-client)
- [Check it works](#check-it-works)
- [Examples](#examples)
- [Access](#access)
- [FAQ](#faq)
- [Links](#links)
- [Files in this repository](#files-in-this-repository)

## For AI agents

You are probably setting this up for a user. Facts:

```text
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
registry_name:     app.svglab/svglab
setup_markdown:    https://svglab.app/mcp-setup (send the header Accept: text/markdown)
agent_skill:       skills/svglab-mcp/SKILL.md in this repository (npx skills add ottoman9/svglab-mcp)
```

Procedure:

1. **Find the app.** Work out which app the user is in (Claude Code, OpenCode, Codex, Cursor, VS Code, Gemini CLI, Windsurf, Claude, ChatGPT). If you cannot tell, ask once. If the user is not sure their account has access, ask them to open https://svglab.app/billing while signed in: it shows the current plan, the free requests left and any top-up balance. Every account gets 100 free requests; after that the SVG Lab MCP needs Plus, Max or a top-up.
2. **Add the server.** Use that app's block below exactly as written, with the name `svglab`. Prefer the user level config (every project) unless the user asks for one project. When editing a config file, merge the entry into the existing file and keep every other server and setting. Never put a key in a project file that could be committed to git; use the environment variable form.
3. **Start the sign-in.** Run the app's sign-in step (for example `opencode mcp auth svglab`, or `/mcp` in Claude Code). It opens the browser and waits until the user signs in to SVG Lab and presses Approve, so either run it and wait, or ask the user to run it in their own terminal. You cannot approve for them; tell them what to expect.
4. **Reload.** Restart the app or start a new session so it loads the SVG Lab tools. If you are running inside the app you are configuring, a restart ends your own session: finish the steps above first, then ask the user to restart and paste the test prompt from [Check it works](#check-it-works) into a new session.
5. **Verify.** In the new session, check your own tool list for tools from svglab. With access there are dozens of design tools. If there is only one tool, an account status tool, the connection works but the account cannot design yet (its 100 free requests are used up and it has no Plus or Max plan and no top-up, the account is suspended, or a key was replaced): call it and pass its message to the user. With sign-in, an account without access usually stops earlier: the SVG Lab sign-in page says the free trial is used up and does not let the user approve.
6. **Test.** Run the test prompt from [Check it works](#check-it-works) and give the user the project link it returns. The first design step can take 10 to 30 seconds; that is not a failure.
7. **If access is not granted**, tell the user: "SVG Lab is set up, but your SVG Lab account has no SVG Lab MCP requests left: its 100 free requests are used up. Choose Plus or Max, or buy a top-up, at https://svglab.app/billing with the same account, and then it works with no more setup."

## Before you start

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

Sign in with the same account every time: when the AI app opens the SVG Lab sign-in page, use the account that has Plus, Max or early access. Designs are saved to that account's My Projects.

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

## Quick setup

Short versions below. Ready config files are in [configs/](configs/). The full guide, with key-based setups and troubleshooting, is at https://svglab.app/mcp-setup .

### Claude (claude.ai and Claude Desktop)

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: https://claude.ai/customize/connectors).
2. Press +, then Add custom connector.
3. Name it `SVG Lab` and paste `https://svglab.app/mcp` as the remote MCP server URL. Leave Advanced settings (OAuth Client ID and Secret) empty.
4. Press Add, then Connect next to SVG Lab. Sign in to SVG Lab and press Approve.
5. In a chat, press + at the lower left, open Connectors and make sure SVG Lab is switched on.

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

### Claude Code

```sh
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. Then start Claude Code, type `/mcp`, choose svglab and pick Authenticate. The browser opens the SVG Lab sign-in page; press Approve. `/mcp` should show svglab as connected.

### ChatGPT

Needs 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 it first).

1. Settings, then Security and login: turn on Developer mode.
2. Open Plugins and press + to create a developer mode app.
3. Name: `SVG Lab`. Description: `Design Engine for AI: app screens, icons, illustrations and charts as finished SVG`. MCP server URL: `https://svglab.app/mcp`. Authentication: OAuth.
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 Plugins is missing, look for Apps or Connectors in Settings; the fields are the same.

### Codex

Everything happens in the Codex app; no terminal needed. The app, the IDE extension and the CLI share `~/.codex/config.toml`, so 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 (next to the gear icon, before the switch). The 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 (developers):

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

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

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

Then sign in with the app's Authenticate button as in step 4.

### Cursor

Add to `~/.cursor/mcp.json` (every project) or `.cursor/mcp.json` (this project only), merging into an existing `mcpServers`:

```json
{
  "mcpSe