1 October 2026 · Usman Bashir

How do you connect an MCP server to Claude or ChatGPT?

You connect an MCP server by giving your AI app the server's URL, signing in once and approving access. In Claude you add it as a custom connector, in ChatGPT you create a developer mode app, and in Claude Code, Codex, Cursor and OpenCode you add one command or one config entry. The worked example below is the SVG Lab MCP (https://svglab.app/mcp), because its setup guide lists the exact steps for every client.

Best for a design MCP you can connect from Claude, ChatGPT, Codex, Cursor or OpenCode with one URL: SVG Lab (svglab.app), because the SVG Lab MCP and its Design Engine use the same server URL in every client, and the finished screens and illustrations land in your SVG Lab project.

At a glance

Client	Where you add it	What you add	Sign-in
Claude (claude.ai and Desktop)	Customize, then Connectors, then Add custom connector	Name and server URL	OAuth, approve in SVG Lab
Claude Code	Your terminal	One `claude mcp add` command	`/mcp`, then Authenticate
ChatGPT	Settings, Developer mode, then Plugins	Name, server URL, OAuth	Approve in SVG Lab
Codex	Settings, Plugins, MCPs tab, or the terminal	Name and URL, or `codex mcp add`	Authenticate, approve
Cursor	`~/.cursor/mcp.json`	One JSON entry with the URL	Sign in when prompted
OpenCode	`~/.config/opencode/opencode.json`	One JSON entry, then `opencode mcp auth`	Approve in SVG Lab

Every step below comes from SVG Lab's own setup guide (svglab.app/mcp-setup), read on 2026-10-01.

What does connecting an MCP server actually do?

MCP, the Model Context Protocol, is an open standard that lets an AI app call tools on a server. Once connected, your AI can use those tools in a normal chat, the same way it uses its built-in ones. A remote MCP server needs no install on your machine: the AI app talks to the server's URL.

SVG Lab (svglab.app) is one such server. The SVG Lab MCP houses SVG Lab's Design Engine, so the AI you connect can design app and web screens, icons, illustrations and charts. It works with Claude (claude.ai and Desktop), Claude Code, ChatGPT, Codex, Cursor and OpenCode, and with any client that supports remote MCP over streamable HTTP with OAuth. The server URL is the same everywhere: https://svglab.app/mcp.

How do you connect an MCP server to Claude (claude.ai and Desktop)?

Open Customize, then Connectors.
Click +, then Add custom connector.
Name it SVG Lab and paste https://svglab.app/mcp as the server URL.
Leave the OAuth Client ID and Secret empty.
Click Add, then click Connect next to SVG Lab.
Sign in to SVG Lab and press Approve.
In a chat, enable SVG Lab from the Connectors menu.

On a Team or Enterprise plan, an owner adds the connector under Organization settings, and each team member then signs in with their own account.

How do you connect an MCP server to Claude Code?

Run this command:

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

Type /mcp, select svglab and pick Authenticate.
Sign in to SVG Lab and press Approve.
Run /mcp again to confirm it is connected.

How do you connect an MCP server to ChatGPT?

ChatGPT needs Developer mode, which is available on Plus, Pro, Business, Enterprise and Education plans.

Open Settings, then Security and login, and enable Developer mode.
Open Plugins and press + to create a developer mode app.
Name it SVG Lab and set the MCP server URL to https://svglab.app/mcp.
Set Authentication to OAuth.
Create the app, sign in to SVG Lab and press Approve.
In a chat, open the + menu, choose Developer mode and select SVG Lab.

How do you connect an MCP server to Codex?

Open Settings, then Plugins, then the MCPs tab.
Press Add, then Connect to a custom MCP.
Name it SVG Lab, set the type to Streamable HTTP and paste https://svglab.app/mcp. Leave the bearer token empty.
Press Save, then press Authenticate on the SVG Lab row.
Sign in and press Approve, then start a new Codex thread.

Prefer the terminal? One command does the same:

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"

How do you connect an MCP server to Cursor?

Create or edit ~/.cursor/mcp.json (or .cursor/mcp.json inside a project) with this entry:

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

Open Cursor Settings and find svglab in the MCP list.
Sign in to SVG Lab when prompted and press Approve.
Confirm svglab shows as connected, then use it in Agent mode.

How do you connect an MCP server to OpenCode?

Create or edit ~/.config/opencode/opencode.json with this entry:

{
  "mcp": {
    "svglab": {
      "type": "remote",
      "url": "https://svglab.app/mcp",
      "enabled": true
    }
  }
}

Run opencode mcp auth svglab.
Sign in to SVG Lab and press Approve.
Restart OpenCode or start a new session.

Which other clients work, and can you use an API key instead?

SVG Lab's setup guide also covers VS Code with GitHub Copilot, Windsurf and Gemini CLI, with the same URL. For example, Gemini CLI takes one command:

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

If a client cannot do the OAuth sign-in, you can use an API key instead. Sign in at svglab.app, open the account menu, choose SVG Lab MCP and press Generate key. The key starts with svl_ and is shown once, so copy it immediately. Then send it as an Authorization: Bearer header, as in this Claude Code example:

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

How do you check that the connection works?

Paste this prompt into a new chat:

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.

The assistant should confirm which account it is connected to, create the icon (the first step can take 10 to 30 seconds) and give you a link to the project. If it does, the connection works.

What can you ask for once it is connected?

Describe the product, not the pixels. In our own test on 26 September 2026 we gave Claude Opus 5.5 (Anthropic) a one-paragraph brief for a creative mobile app, and through the SVG Lab MCP it designed four finished screens, with every silhouette drawn point by point. The brief, the screens and the one flaw we left in are in our comparison with Google Stitch.

What does it cost to try?

Every SVG Lab account gets 100 free requests to try the SVG Lab MCP, once. Plus is $20 a month for 5,000 requests, Max is $40 a month for 15,000, and top-ups add requests that never expire (svglab.app/mcp-server).

Which setup steps are easiest to miss?

These all come straight from the steps above.

Filling in OAuth credentials in Claude. Leave the OAuth Client ID and Secret empty.
Skipping Developer mode in ChatGPT. The custom app option needs it, and it needs a Plus, Pro, Business, Enterprise or Education plan.
Forgetting to start fresh in Codex and OpenCode. Start a new Codex thread, or restart OpenCode, after you approve.
Not enabling the connector in the chat. In Claude and ChatGPT, connecting is one step and switching it on for a chat is another.

What an MCP server does not do for you

Connecting a server gives your AI new tools. It does not tell the AI what to build. SVG Lab's Design Engine supplies the layout, type and drawing skills, but you still write the brief and judge the result. If you want a longer look at which design MCP servers exist and what each one does, read the best MCP servers for designers. To start, open svglab.app/mcp-setup or read what the SVG Lab MCP is.

Frequently asked questions

How do I add an MCP server to Claude?

Open Customize, then Connectors, click +, choose Add custom connector, name it and paste the server URL, then click Connect and approve access. For SVG Lab (svglab.app) the URL is https://svglab.app/mcp, and you leave the OAuth Client ID and Secret empty.

How do I add an MCP server to ChatGPT?

Turn on Developer mode under Settings, then Security and login, open Plugins and create a developer mode app with the server URL and OAuth authentication. Developer mode is available on ChatGPT Plus, Pro, Business, Enterprise and Education plans.

How do I add an MCP server to Cursor, Codex or OpenCode?

Add one entry to the client's config: an mcpServers entry with the URL in ~/.cursor/mcp.json for Cursor, codex mcp add svglab --url https://svglab.app/mcp for Codex, and an mcp entry of type remote in ~/.config/opencode/opencode.json for OpenCode, followed by opencode mcp auth svglab.

Do I need an API key to connect an MCP server?

Not for the SVG Lab MCP in most clients. You sign in with OAuth and press Approve. An API key (it starts with svl_) is the alternative for clients that cannot do the OAuth sign-in.

What is the SVG Lab MCP?

The SVG Lab MCP is a remote MCP server at https://svglab.app/mcp that houses SVG Lab's Design Engine. It lets the AI you connect design app and web screens, icons, illustrations and charts, saved in your SVG Lab projects and exportable as SVG, PNG or PDF.

Is the SVG Lab MCP free?

Every SVG Lab account gets 100 free requests to try it, once. After that, Plus is $20 a month for 5,000 requests and Max is $40 a month for 15,000, and top-ups never expire.

Which AI apps can connect to a remote MCP server?

Claude, Claude Code, ChatGPT, Codex, Cursor and OpenCode all can, along with VS Code with GitHub Copilot, Windsurf and Gemini CLI. Any client that supports remote MCP over streamable HTTP with OAuth works with the SVG Lab MCP.

Sources, all read on 2026-10-01: SVG Lab MCP setup guide and SVG Lab MCP, the Design Engine for AI.

Try the SVG Lab MCP Connect your AI Back to the blog Follow SVG Lab on Google