Usman Bashir

Posted on Oct 1 Originally published at svglab.app

Connect an MCP server to Claude, ChatGPT, Codex, Cursor and OpenCode (exact steps)

#ai #mcp #productivity #tutorial

Every AI app has its own way to add an MCP server, and the docs for each live in a different place. This is the short version: the same remote server, five clients, the exact steps for each.

The worked example is the SVG Lab MCP at https://svglab.app/mcp, which houses SVG Lab's Design Engine and lets the AI you connect design app screens, icons, illustrations and charts. The steps below come from SVG Lab's own setup guide, read on 2026-10-01.

Claude (claude.ai and Desktop)

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

Claude Code

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

Then type /mcp, select svglab, pick Authenticate, sign in and press Approve.

ChatGPT

You need Developer mode (Plus, Pro, Business, Enterprise or Education).

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

Codex

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

Or in ~/.codex/config.toml:

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

Then authenticate on the SVG Lab row, approve, and start a new thread.

Cursor

~/.cursor/mcp.json (or .cursor/mcp.json in a project):

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

Open Cursor Settings, find svglab in the MCP list, sign in, press Approve, and use it in Agent mode.

OpenCode

~/.config/opencode/opencode.json:

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

Then run opencode mcp auth svglab, approve, and restart OpenCode or start a new session.

Check that it works

Paste this 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.

If the assistant names your account, makes the icon (the first step can take 10 to 30 seconds) and hands back a project link, you are connected.

API key instead of OAuth

If a client cannot do the OAuth sign-in, generate a key (account menu, SVG Lab MCP, Generate key; it starts with svl_ and is shown once) and send it as a bearer header:

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

The same guide also covers VS Code with GitHub Copilot, Windsurf and Gemini CLI. Every SVG Lab account gets 100 free requests to try the SVG Lab MCP, once.

The full guide, with a comparison table, the common slips and an FAQ, is on the SVG Lab blog: How do you connect an MCP server to Claude or ChatGPT?

DEV Community